1

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.

5
  • 1
    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
    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? Aug 19, 2016 at 12:44
  • 1
    @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
    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. Aug 22, 2016 at 5:50
  • @bynicolas absolutely. Aug 23, 2016 at 5:52

1 Answer 1

1

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.

2
  • 1
    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
    Aug 19, 2016 at 13:40
  • so there is no way to do it without php files manager? I dont have .php file access Aug 23, 2016 at 5:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.