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.

So you want to become a WordPress Theme Reviewer?

What does it take?

Some PHP, JavaScript, HTML, CSS knowledge and a little bit of time to spare. At least that is what it takes to get the ball rolling.

Yeah, very simple. Doesn’t take much really.

The basics

There are some things that you really have to know in order to becoming a WordPress Theme Reviewer. Here is a quick list I feel makes for a good theme reviewer.

  • Knowledge
  • WordPress prowess
  • Personality
  • Time
  • Communication

Now, that is what makes for a reviewer but how to get your foot in the door?

Those steps are a little bit easier. One of three ways to get started really. The first one is by requesting a ticket to review from the review queue. [note: it is as of this writing]

The second way is by emailing the theme reviewers mail list and asking if any new theme is available for a review. Keep in mind that you will have to subscribe to that list as well in order to keep in contact with all theme reviewers and admins. You can also follow a good few through twitter, personal blogs or however you’d like.

The third way, but is less frequently checked, would be through the IRC channel #wordpress-themes. They will also link you to the review queue I mentioned earlier so these last two would be just pushing it if you did all three. Just saying.

What next?

The next step would be to setup your testing environment. Getting all the needed information, the settings and finally testing the theme. How you set that up is entirely up to you but there are some things that must remain the same across all the testing platforms. Can you guess what that is? It’s a simple setting that will help solve some of your headaches.

It is setting WP_DEBUG to true in your configuration file. Yeah, a very simple thing, right? Keep in mind that there are other ways to keep track of errors as well.

As far as plugins go, there are plenty to pick and choose from. The widely accepted one is the developer plugin by the Automattic team. It is a great plugin to get you started in creating a theme or plugin.

Testing

Yeah buddy! Finally we can discuss testing the theme. In order to test a theme you need data. Enter the theme unit test file. There are a few places that have some sample posts and images that you can download. Just a simple XML file that you import. Thankfully there is one that is widely used by many theme reviewers. The file stays up to date and is looked over every once in a while for errors.

An alternative is to use your own posts if you have enough. I may one day try creating my own little set of posts but for now I use the theme unit tests provided. It’s convenient if you are just starting out.

Unit Testing

Simple. Follow the steps provided in the theme unit test page and then report any major errors in the theme’s ticket.

Go through each scenario and make sure you write any, and all errors that you encounter. Keep in mind that is only part of a review. There is one part that I feel is extremely important. Communication.

Let’s talk about it

Yes. Talking is the single biggest thing when you are reviewing a theme. Without talking to the theme developer neither one of you is learning or even progressing. I mean it. Keeping in touch is the key to becoming a good theme reviewer as well as a developer.

A great example of this would be a ticket I reviewed nearly four months ago. I assigned myself the ticket, looked over the code, tested to see if anything would break and took note of it all. I posted the required things that needed to be addressed in order for the theme to be approved.

I didn’t hear any response from the developer in three days. I posted a question asking if they needed more time. Still no response. Nearly a week later I told that person I had to close the ticket and not approve the theme. About a week ago I was on the support forums and saw that somebody had a question about the theme and if there would be an update, if any. Made me sad to see that.

Personality?

Yes. It does take a certain personality to be a good theme reviewer. At least I think so. The reason I say this is because as a theme reviewer you are helping somebody. You are helping them share something with the world. I know it does sound a little cheesy but it is true. Think back to when you were in school and you had to create something for a class project. Odds are there was at least one person in that classroom that got all the recognition and all the praise for going above and beyond what the project asked for.

Now put yourself in their shoes ( if you weren’t already that person ) and think about how it feels. It feels good. It makes me happy approving a theme. At least one that I feel is worthy of approval but that’s another topic.

Think you can?

So, you ready to become a theme reviewer? If so, then head over to the Make Theme blog, give some input, ask for a ticket and give back to the community!

Uploading and updating your theme

It’s no secret I love doing theme reviews. When I get a chance. The past couple of weeks though I’ve only been able to do one a week if I’m lucky. I do read the theme-reviewers emails when I open my inbox but of course that just isn’t enough.

Background

If you didn’t already know for the last year I’ve been stating that I am working on a theme to submit. Yes and no. The biggest thing I’ve actually been working on is a personal theme. for this site. I’ve looked at many themes and have even thought about purchasing a theme from an established, and reputable theme foundry. As you can tell I chose to use the Displace theme.

For the time being I like and it does the job. I’ve thought about modifying it but want to create my own. Maybe down the road. We’ll see. I’m getting a little sidetracked so we’ll talk about the issue at hand. Updates and the review process.

Uploading a new theme

themes-directory

The process is actually quite simple. One of the first things you want to do is go to the themes directory. As you can see from the image on the right hand side the welcome screen showcases a few featured themes and on the right hand column there are three sub-sections: Popular, Newest and Recently updated.

You will want to login with your WordPress.org username and password. After you have done that you have, and I mean have to, read more about having your theme hosted in the repository. I cannot emphasize that part enough, either. In particular the guidelines to getting your theme accepted.

That little about page is very crucial and does look a little like:

themes-directory-2
Read! And I mean read this page.

Yeah, it does seem a little daunting but it is fairly simple and straight-forward. Some information about theme-tags, guidelines and why you would want your theme in the repository.

So, you’ve signed in and want to upload your theme. You go to the upload section by clicking the Theme Authors link and you are taken to the upload screen. This is the crucial one you will want to store not only in your bookmarks but in your head as well. This page is what will create a new Trac ticket with your theme so that an actual human being will go over your code and give you feedback and hopefully approve your theme.

A ticket?

You read that right. A ticket. You will receive an email confirmation with that ticket number. If that doesn’t happen you may want to contact the theme-reviewers list and I’m pretty sure at least one person will be able to help you out.

themes-trac-intro

The next stage is the review process. When I started doing reviews it was a little tedious, to say the least, only because so much of the process wasn’t as automated as it is now.

What a reviewer would do is login to the Trac for WordPress themes, go to the report, as demonstrated in the next image, and see if there were any other tickets that have been submitted using the same username/theme and close the tickets. The reviewer would then conduct the review with the most current version of the theme.

trac-ticket-queues

What next?

The next thing you will be getting is feedback. Good, bad and maybe even some ugly. We don’t always like to hear the truth but let’s face it. We don’t always do our best the first time around. I know I don’t.

previously-approvedFrom here on out it will be a human being, an actual living, breathing, eating, human being that will read over your lines of code. That person will read every character and see every image you used to create that WordPress theme. And hopefully, just hopefully it will pass inspection. The key here is communication. Get a dialogue between both you and the reviewer. A great example is a review I did a few weeks ago to the Customizer theme as seen on the image to the left.

Now, I know you’re wondering why such a long list of tickets that developer has. At least those that looked at the image. That was because some of those are updates. If you’re not asking how you update your theme then I’m not sure we can keep talking. In real life. I kid of course.

In order to update not only your theme in the repository, but in the theme trac you will want to visit the upload page once more.

upload-signedAfter you have signed in, naturally, you will head back to the upload page, make sure you bump the version of your theme in your stylesheet and you will be on your way to sharing with the WordPress community.

 Final thoughts

As I said the key is communication. Talk to the person conducting the review and the developer. You would be amazed about what both parties can learn and you also may make a new connection in the end.

Make things a little more accessible

Key on keyboard
I was asked to redesign a site not too long ago and I’m pretty pumped about. Not going to lie. What I do like is that the site already has plenty of content to work with. The trick will be creating a good user experience for the person I will be handing off the site to.

The current state is blank since I’ve not really had much time to work. Personal matters. I do have a site design in mind but still need to sort out a few things here and there. I think the downside is that he wants the site to be finished as soon as possible. This may present a bit of an issue.

I can quickly get the ball rolling for him but the trick will be creating his theme and I may even have to experiment with a few plugin options to better enhance both his experience as well as user experience.

With that in mind when it comes to the actual coding of the site will be a feat as well. The reason is because I want to be that change. I want the web to excel and in a good direction. How will I achieve this? By making the site accessible. What do I mean by that? By using ARIA roles in my markup.

Yeah it does seem a little odd to be using those but it will all make sense. It’s just one step to creating a better web experience for everyone.

How will I use it?

The way I will go about this is by using

role=*

to make things a little more accessible. There are several roles in a document but they must be used properly. You can’t just go berserk and start giving everything a role just because you think it has to have one. In an HTML document there are some that really need them. HTML5 does play nicely with several of these.

The reason for wanting to use this is so people that aren’t able to view the site traditionally don’t miss out on certain things.

Let’s look at a decent example of this.

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


    
    Document Title


    

As you can see with HTML4 some of the information can seem a little repetitive. Now, when we change to HTML5 and use some ARIA roles it makes a little more sense.

< !doctype html>


    
    Document Title


As you can see the document makes a little more sense. You can tell what the role is of each element. I think that is one of the main reasons I have come to love using HTML5 markup. The ability to use elements like

main

,

aside

,

header

, and

footer

are a great addition and make for much easier organization of information.

The key will be reading the documentation for the roles and definitions of those roles. This will be fun!