how to add custom css and js on wordpress post editor directly without using .php file

I am trying to add some css and js code to my home page editor at the wp-admin.

I am using simply

<script type="text/javascript">
jQuery(document).ready(function($) {
  $('.x-feature-box').each(function() {
    var self = $(this),
        icon_href = self.find('.x-feature-box-text a:last-child').attr('href');
    if ( icon_href.length > 0) {
      $(self).find('.x-feature-box-graphic-inner > *').wrap(function() {
        return '<a href="' + icon_href + '" target="_parent"></a>';

<style id="cornerstone-custom-page-css" type="text/css">
.maps iframe{
    pointer-events: none;

p.x-feature-box-text a{
  font-size:1.5em !important;
  color:white !important;
.x-text{color:rgb(250, 250, 250)}

at the top of the content in editor.
Javascript is working but css is not working because this code is not called at the end of all css files instead it is loaded above the css files.

Also I want these code to be added at right place as we do with hooks. Means just above body tag.

And when I am adding this code it is coming in <p> tag which increasing space on my front end page.

I don’t know how to do this but this is very critical for me.Please help.

Solutions Collecting From Web of "how to add custom css and js on wordpress post editor directly without using .php file"

The reason your script works in your post is because you have the capability as an administrator to insert unfiltered_html in your content. Now if you call the functions of your script after you have inserted it or when the DOM is ready, then it’ll work. But for CSS, it needs to be rendered in your <head> so the style can be applied when the page loads. Once the page is loaded, your style won’t be applied anymore (unless using some javascript/jQuery).

Now this mainly is theme dependent, but some theme developers offer the possibility to add css/javacsript in the header/footer of their themes either in their themes settings page or through meta boxes on posts/pages.

That is because they have placed some hooks there so when you add code in their settings page, that code will be called by those hooks.

So, it’s not really possible to achieve this if the theme developers haven’t incorporated in their designs the necessary hooks for you to customize your styles or scripts. You will need to edit your style.css and functions.php files in order to achieve that.