• Resolved Natsuki

    (@natsuki)


    I’m currently trying to make a child theme to twenty eleven, and so far it’s worked out well. Until i realized wordpress wraps images in p tags automatically.

    My p-tags are floated right and the images left, so I can’t just remove the wpautop completely, I just want it to remove it from the images.

    I found this plugin: https://gist.github.com/975026

    It works wonderful on the blog post, but it makes no difference on the static pages. The code looks like this:

    <?php
    /*
    Plugin Name: Image P tag remover
    Description: Plugin to remove p tags from around images and iframes in content outputting, after WP autop filter has added them. (oh the irony)
    Version: 1.1
    Author: Fublo Ltd
    Author URI: https://blog.fublo.net/2011/05/wordpress-p-tag-removal/
    */
    
    function filter_ptags_on_images($content)
    {
        // do a regular expression replace...
        // find all p tags that have just
        // <p>maybe some white space<img all stuff up to /> then maybe whitespace </p>
        // replace it with just the image tag...
        $content = preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
        // now pass that through and do the same for iframes...
        return preg_replace('/<p>\s*(<iframe .*>*.<\/iframe>)\s*<\/p>/iU', '\1', $content);
    }
    
    // we want it to be run after the autop stuff... 10 is default.
    add_filter('the_content', 'filter_ptags_on_images');

    Is there anyway I can alter it to make it work on my pages too? Or do anyone have a better solution?

    Oh, and I have next to no experience with php, I’m only used to css/html, so I’m sorry if this is somehow a stupid question.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Hi there,

    JS seems more appropriate than PHP in this case to do what you want. Could you check see if the theme you are using has a custom.js, general.js, or similar file and, if it does, share a pastebin here?
    That way I’ll be able to tell you exactly where to place the new code.

    Cheers!

    Thread Starter Natsuki

    (@natsuki)

    I’m using twenty eleven as the parent theme as I thought it might be smart…
    I found a showcase.js and a html5.js, and I’m guessing it’s showcase you’re after..(?) Tell me if I’m wrong!

    Pastebin here: https://pastebin.com/m4WQgtdZ

    (Haven’t used pastebin before either, so if I missed something, just tell me!)

    Thanks for helping!

    Hi. Thanks for the info. In that case, it would be more appropriate to create a separate JS script for this. If you are worried about the number of scripts loaded (HTTP requests), you can use a plugin such as WP Minify to regroup them.
    So, here is a step by step tutorial:
    1. Create a custom.js file inside the folder child-theme-folder/js (if the subfolder does exist, create it), and paste the following code inside:

    jQuery(document).ready(function() {
        jQuery('p').child('img').each(function() {
            jQuery(this).unwrap();
        });
    });

    2. Make a copy of your parent theme’s functions.php, place it in your child theme folder, and paste the following code at the bottom:

    function my_custom_js_scripts() {
        wp_register_script( 'my-custom-js-scripts', get_bloginfo('stylesheet_directory').'/js/custom.js', array('jquery'), '1.0', true );
        wp_enqueue_script('my-custom-js-scripts');
    }
    add_action('wp_enqueue_scripts', 'my_custom_js_scripts');

    Both codes are untested buy they should work. If for some reason it does not LMK and I’ll tune them up further.

    Thread Starter Natsuki

    (@natsuki)

    When I do this I get the following error message:

    Fatal error: Cannot redeclare twentyeleven_excerpt_length() (previously declared in /Users/Terese/Sites/borgarudden_childtheme/wp-content/themes/borgaruddenchild_3/functions.php:318) in /Users/Terese/Sites/borgarudden_childtheme/wp-content/themes/twentyeleven/functions.php on line 320

    Hi,
    That was my bad. I thought your new functions.php would supersede the parent one but it is actually loaded in addition to the parent.
    What you need to do is delete everything from your child theme’s functions.php except for the PHP code I pasted above. See this Codex article for reference.
    Cheers!

    Thread Starter Natsuki

    (@natsuki)

    I still can’t get it to work. :S
    If I just paste the PHP code into the new functions.php I get an error, so I put in a php open tag in there too. Now I get no errors but the img is still wrapped in p’s.

    I tried to put in a favicon with this code from the Codex article, just to see if it works.

    function favicon_link() {
        echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
    }
    add_action('wp_head', 'favicon_link');

    But nothing happens there either. I read somewhere that you need to name the functions with the parent themes name and the childtheme, like this: twentyeleven_childtheme_some_function. Is this applicable? Or am I just heading in the completely wrong direction? I did try just in case, but I didn’t get it to work, maybe I misunderstood something.

    And btw, I really appreciate the help, so thanks. ??

    Hi!
    The function’s name has no effect on the result.
    Sorry I didn’t mention the open and close tags. You need to wrap the code between <?php and ?>, like this:

    <?php
    function my_custom_js_scripts() {
        wp_register_script( 'my-custom-js-scripts', get_bloginfo('stylesheet_directory').'/js/custom.js', array('jquery'), '1.0', true );
        wp_enqueue_script('my-custom-js-scripts');
    }
    add_action('wp_enqueue_scripts', 'my_custom_js_scripts');
    ?>

    I think the problem might be that you are not including the right Template info in your child theme’s style.css file.
    Could you share a link to your site so I see what is going on there?

    Thread Starter Natsuki

    (@natsuki)

    I think I’ve managed that part, but you never know!

    The site’s at: https://borgaruddenscamping.se/utveckling/

    Sorry if it’s still a bit messy. ??

    Yeah, the Child Theme is properly set up.
    Change your JS code to this:

    jQuery(document).ready(function() {
        // Unwrap images
        jQuery('p img').unwrap();
    });

    If you only want to apply the code to the images contained in your content div, include the div id in the third line, like so:

    jQuery('#content p img').unwrap();

    Thread Starter Natsuki

    (@natsuki)

    It works! Thank you SO much for taking the time to help me out! I could never have solved this myself. So thank you! Again. ??

    Glad you figured it out!
    Please mark the thread as resolved whenever you can.
    Thanks!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Plugin wpautop] Only affecting posts, not pages’ is closed to new replies.