Wrap posts p tags in div

Question

I am trying to set up blog posts so that when an image is added it is wrapped in one div set to float right and when text is added it is wrapped in another div set to float left. So that all images added to posts in the blog will always have images right and text left.

have tried using jQuery to wrap all p tags in a div like so jQuery('p').wrap("<div class='post-txt'></div>");

But I cant work out which PHP file to add this to, so nothing appears to be happening.

Any help to point me to the correct PHP file within wordpress or any other options would be very much appreciated.

All the best

Harry

Answer 1

You need to add it to a JS file and then enqueue it in your functions.php

jQuery(document).ready(function($){
  $('p').wrap('<div class="post-txt" />');
});

If you already have a js file, you can add it to that file and you're done.

Else, save the above snippet in a new file. Put that file in a folder called js in your theme folder(for the sake of clean code). Let's say you called that file wrap.js.

Add the following in your functions.php file:

function wpse_134325_scripts() {
    wp_enqueue_script( 'wrapper', get_template_directory_uri() . '/js/wrap.js', array('jquery') );
}

add_action( 'wp_enqueue_scripts', 'wpse_134325_scripts' );

You can read more about enqueing scripts on the Codex.