Playing nice with plugins

Yep, you read that right. Playing nice. With plugins. I know what you’re thinking and are probably wondering what I mean by that.

Don’t lie

You know you want to ask. What do you mean by that?

What I mean is that as a themer you shouldn’t be adding frivolous things to your theme. What I mean by this is things that add content or completely alter, and manipulate, content. Things like sharing buttons, meta boxes or things that a user may end up losing once the choose a different theme. That is what I mean.

Background

What really brought this up is a change in guidelines to the theme review. It has been around but up until recently has been more enforced than before. At least from what I’ve noticed.

jetpack-sharing

Recently, I did a review where the developer used plugin functionality in the theme. Mainly the sharing buttons. I know, I know. Everybody loves to share their content. But the thing is when I switch a theme I want those buttons to stay where they are and not move around on me. A good portion of the time they reside towards the bottom of the post. As noted by the quick screenshot. That is using the Jetpack plugin’s sharing module, for demonstration purposes of course.

social-sharingJetpack is a great plugin and does the job for me and a few others. But what about those that append their sharing options to the content. It can look a little funky. A great example is the image on the left because it shows simple content but it showcases the issue I’m more concerned about fixing.

What is the issue?

The issue is that when you have content that is paginated the sharing icons get right in the middle of it all. As you can see the real content of the post ends with “Post Page 1” but can continue to page 2 and then three. It creates a separation that can ruin almost any design.

Now, I know what you’re probably going to say. But Jose, that’s a plugin. My theme handles it better. Of course it does. The theme developer chose the placing of the elements and how to display it. But what if you are a new user and are using a plugin? Looking at the second image you can see what can happen. To me it does look a little odd having sharing icons in between.

A better example is the default theme Twenty Fourteen. I wanted to use it because I do like the way it looks but when it came to displaying the post pagination it didn’t look right to me.

default-sharing

As you can see it almost feels like the content gets cut off. Yeah, I know it does seem a little picky but when you want to share a theme with many people you have to think about who the end-user really will be. It reminds me of a talk Nikolay did in WordCamp SF. Made me think about who will really be looking at the code.

How to solve it

What’s really funny about how I managed to resolve this issue, at least for me, was by thinking about when that social bar gets added. Now, do keep in mind I do use Jetpack on this site and try to test with it on a local setup. This is where the playing nice with plugins comes into play.

Notice I install the plugin and add styling and functionality to it rather than create my own? That is the way any theme developer should be creating any and all themes. Whether personal, for fun or commercial.

Currently I’m trying to redesign my site, of course, and have at least one post that is split up into more than one page. While that is sort of an edge case it does represent a bit of an issue that I would like to discuss.

The first thing I did of course was turn to the code. The first file I looked at was the Jetpack PHP file to see what things were being loaded. I noticed that Jetpack uses modules so I went ahead and skipped straight to the sharedaddy module. Started looking at the sharedaddy PHP file and it led me to the sharing file. Then the sharing service file.

You’re sort of wondering where this is going right? Thankfully that was the last file I really needed to see because towards the end of the file there was a line of code that was music to my eyes.

add_filter( 'the_content', 'sharing_display', 19 );

What that meant was that I could add a filter to the content and add a priority greater than 19.

Enter the code

So in order to add to the content I needed to filter the content and add to it. What is nice is that we can easily do that with a simple call. By using

add_filter( 'filter_name', 'function_callback' );

I managed to get the result I wanted and was so desperately looking for. The code I used is actually quite simple. I think that is part of the reason I’m shocked it worked the way it did.

// Append linked_pages if any are available
add_filter( 'the_content', 'my_theme_add_pages' );
function my_theme_add_pages( $content ){
    // Get the markup
    $linked = wp_link_pages(
        array(
            'before' => '<div class="page-links">Pages: ',
            'after' => '</div>',
            'echo' => false,
            ) );
    // If there is any markup append it
    if ( $linked ){
        $content .= $linked;
    } // otherwise we just return the regular content
    return $content;
}

Simple right? What really makes this work is the last key in the array. The echo key and setting it to false so that it won’t output any code and stores it to the $linked variable. Then a quick check to see if there is anything and if there is concactinate to the $content. The next step is styling it to give it some room.

personal-adjustment

As you can tell I still have some styling to do but now my post/page navigation links don’t appear after my sharing icons.

By Jose

Born in El Salvador. Loves to read, write, draw, paint, build, test, typography, hike, photography, art, design, sewing, and many other things.