Reposition "related posts" by Jetpack

[leahvachani]

Hello,

I have been reading up on how to reposition the “related posts” plugin by Jetpack and I have found this article: https://jetpack.com/support/related-posts/customize-related-posts/

which seems very helpful, only, I have VERY BASIC skills with building my website and I’m not sure where I should enter these code snippets that they suggest. I want to move the “related posts” from alway showing up after the author bio and sharing buttons to showing up immediately after the post content. Here is an example blog post page: https://lunchwithleah.com/learn-how-to-meditate-with-your-children/

I’m also worried about totally breaking my site (but I do use a child theme).

any help would be greatly appreciated (especially if it is super simple to understand for the non-coder!)

[Prasant]

Hello @leahvachani,

Thanks for asking.

Jetpack is a 3rd party plugin and it will fall outside the scope of support we can offer related with customisations. However, to help you get started you can add following JS code under X > Theme Options > JS

jQuery("#jp-relatedposts").insertBefore(".similar-posts");

Please note that above code is a custom code and may cause conflicts. It will be difficult for to provide support for the same.

If you would like to learn or get started with programming starting with HTML, CSS and then Javascript, please take a look at following resource:

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

https://www.khanacademy.org/computing/computer-programming

Thanks.

[leahvachani]

@Prasant, thank you for your reply, This seems WAY too advanced for me. Is there a plug-in you know of that is compatible with Xtheme that would accomplish the same thing without coding?

Thank you,
Leah

[friech]

Hi Leah,

No worries, we understand. The line of code provided by Prasant above should do the trick

jQuery("#jp-relatedposts").insertBefore(".ck_form_container");

Please add that on X > Theme Options > JS

If our JS code suggested did not work, as this is a third party plugin, please contact the plugin developer due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script.

I did check the documentation that you linked above, and unfortunately, none of those will achieve what you need, except the one that involves pasting the [jetpack-related-posts] shortcode on the bottom on each of your posts manually.

Thank you for your understanding.