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

Question

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>';
      });
    }
  });
});
</script>

<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)}
</style>

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.

Am I correct that you are editing a theme file to do this? In that case you could just as well edit functions.php and add the code to the wp_head hook. — cjbj
– cjbj, Commented Aug 19, 2016 at 12:06
@cjbj: looking at his question title, it seems that he doesn't want to use PHP to insert his CSS/JS code, even though I agree that is best way to do it. @ Bhuvnes: is there a reason why you don't want to use PHP to insert your custom code? — Ethan Rævan
– Ethan Rævan, Commented Aug 19, 2016 at 12:44
@cjbj I think he's adding the script/css directly in the post editor (WYSIWYG) also he doesn't want to use the .php files, so he's looking to add some script in some input box on the post page. — bynicolas
– bynicolas, Commented Aug 19, 2016 at 12:44
@bynicolas yes I dont have .php file access thats why I dont want to do it with php files. — Bhuvnesh Gupta
– Bhuvnesh Gupta, Commented Aug 22, 2016 at 5:50

bynicolas · Accepted Answer · 2016-08-19 12:55:14Z

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.

In practice modern browsers will process and apply CSS wherever. I think the issue in question is more of order/priority of CSS rules than it not working. — Rarst
– Rarst, Commented Aug 19, 2016 at 13:40
so there is no way to do it without php files manager? I dont have .php file access — Bhuvnesh Gupta
– Bhuvnesh Gupta, Commented Aug 23, 2016 at 5:47

Stack Exchange Network

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

1 Answer 1

Your Answer

Hot Network Questions

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

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions