How To Add Custom Jquery On SIngle Page Only?

Support
#1

Hi

I’m using pro with child theme and recently i want little customization to move post title under the featured content with jQuery.

 jQuery(document).ready(function($) {
  $(".entry-header").insertBefore(".entry-content");
});

it works, but getting error on index page, which all title from post that show on index page (…/blog) appear on every post.

I do not have experience in php so if there is any way to add jQuery only on single page like using fuction or else kindly give me some guide.

thank you

#2

Hi there,

Please try this:

jQuery(document).ready(function($) {
  $(".single-post .entry-header").insertBefore(".entry-content");
});

Hope this helps.

1 Like
#3

Hi @Jade

Thanks for helping me :slight_smile: it works perfectly but if you dont mind i have one more request.

What if i want the post title on the index page (…/blog) is the same like single post?

I tried the same code on the index page by replacing .single-post with .blog, but the result seems weird, which is all indexed posts title appears on every article.

Thank you

#4

Hello There,

The code is only good for single posts. If you are going to use it in the index page or archive, it will just create an issue. You need a modified version of the code. You may use something like this:

(function($){
    $(".blog .hentry").each(function(index, el) {
      var entryContent = $(this).find(".entry-content");
      $(this).find(".entry-header").insertBefore(entryContent);
  });
})(jQuery);

Please let us know how it goes.

#5

Hi @RueNel

Awesome, thanks Rue.

Bless you

#6

You’re welcome. Glad to be of a help :slight_smile: