Mistakes will happen

This is a bit of a touchy subject since I know I’ve done this before. After all I am only human.

What happened

Here is a bit of background information. The last two weeks I’ve only done a handful of theme reviews. I’m a little upset by it. Part of that reason is because I see some themes that have a lot of potential but are a little restricted by the guidelines. Granted those were already put in place long before I even started reviewing themes.

I know you’re probably going to say that I’m overreacting a little. Maybe I am. But with good reason. I hate being the bad guy.

Seriously

No, I really do. I hate to have to do my job and give people bad news. Apparently I’m really good at it since nearly all my co-workers ask me to break the news to everybody that our store is closed and they have to get out. Unfortunately when it has to be done, it has to be done.

Fast forward a little

The last two days I’ve been lucky enough to look over about four themes. Sad to say that only one of those actually met standards. The others weren’t so lucky. They had a few mistakes that were not seen the first time around.

Like I said, “I hate being the bad guy.”

I had to break the news to the developer that the theme didn’t meet the guidelines and as it stood the theme couldn’t be approved. Of course, the developer asked why now. I simply apologized and told him that mistake happen, sometimes code is overlooked.

Right then and there all I kept wondering was how were these things missed?

Seriously. How??

Flashback

I can recall my first review. I felt like I was going to screw it up so badly. Fear of failure got to me. I skimmed over the code, ran through the paces of how I felt the test should go and made a decision on whether or not to approve the theme. I was younger back then and not as wise. I admit it.

Honestly, it did feel a little daunting. Knowing that a theme I reviewed and approved would be used by thousands of people all over. How can you not fear that.

Now, what brings me to the point I want to make is the last 48 hours. In those hours I saw two themes that had custom post types being registered. I mean really?

Yes. Custom Post Type.

A huge reason to not approve a theme. It is generating content. Once the person changes themes they lose all those things. Why would a developer want to do this? Why, I ask you. Why?

So here is a quick break-down of what I often tend to find are missed:

  • Translation
  • Meta boxes
  • Post types
  • Favicons
  • Social links
  • License for bundled resources

Interesting list, right? Some of those things are simple to fix like the license issue. The others require a little more work if you already have a theme approved. In particular the post types. Yes, those include sliders, portfolio, gallery, items, shopping cart like things that are being registered by the theme. Things that are better suited for plugins. As for the meta boxes, that would depend on how they are being used but I do see one slip through from time to time.

So, if you are a theme developer think about these things when you submit your next theme or want to share it.

Creating some bold headlines

Theme:

Bold Headline

Description:

Minimal, single column, responsive theme based on _s by Automattic, Bold Headline has three widget areas which will appear in your footer area.

Supports:

  • Widget
  • Menu
  • Header
  • Customizer
  • Featured Images
  • Post Formats
  • Editor style

The good

Bold Headline is a very good theme. I first ran across this theme when I was looking through a queue of themes that hadn’t had their first round of reviews. Yes. I do it from time to time. One of the things that attracted me to this theme was the word ‘minimal’ in the description. I love design and love minimalistic design just as much. So, of course, I had to check it out.

This theme is loosely based on a 960 pixel grid system with the real content being 581 pixels wide when viewed on a desktop monitor. That makes for really good readability with the chosen font family — Lato — for the body. What I truly love about this theme is that it doesn’t follow the norm of having the content of the article, or post, on the left hand side. It switched things up a little by moving it to the right-hand side.

Now, I mentioned it has support for editor styling. That is a great thing because it gives the user a slight preview of what the post will look like before they hit the publish button. I mean who doesn’t like a preview of a final result without having to press a button?

With aesthetics aside let’s talk about the thing that makes this theme really work. The code.

The code

As the description states it is based on Underscores. There are twenty PHP files that make up this minimalistic theme, six JavaScript and four CSS files. There are of course a few others but those are font, image and language related files.

What makes this theme really good is the fact you can actually expand it with a child theme. Yes. I’m a huge fan of downloading and creating a child theme to test.

Headlines has post format support from the get go so in your child theme you can easily add files and expand. You may, however, how to specify which ones you want to add just in case.

The bad

Yes, there are a few things I feel are not good. This list is fairly small. It comes down to only one thing. JavaScript. I’ve never been a huge fan JavaScript solutions. The theme uses it to adjust the size of some of the elements but does it in a nice way.

Conclusion

Bold Headline is a great theme. I feel it has a lot of potential to be used in a magazine style site. It’s a great starting point.

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!

Choosing the right path

It’s no secret that I love using WordPress and love design. Those are pretty obvious if you’ve known me for some time. I guess you could say I’m a little addicted to WordPress. My digital meth if you will, but I also love design about the same.

Working on WordPress themes is an amazing middle ground for me. It’s almost a zen state for me when I’m looking at a design and trying to figure out how to code the theme. Some themes require a little more TLC than others. A great example is when you have to think about the end user. As some may, or may not, know I like to help out in the WordPress.org support forums when I can.

I’ve even written a post about creating a child theme. Yes, I do encourage that in the forums as well if you want to make any modifications to any theme. The downside is that often times some themes don’t generally like to use: get_stylesheet_directory_uri()

Dilemma

Now, there are two things to remember when it comes to working with child themes.

  1. Use them
  2. Code properly for them

What I mean by number two is that you should be using the right function when it comes to enqueuing the stylesheets and scripts. In this case I’ll be talking about stylesheets.

A few days ago I was typing out some code for my theme and started to think about the structure of my folders. The most commonly used in themes seems to be to have all the CSS files bundled together and all the JavaScript files together as well. Simple and makes sense really. The downside is when some people use a stylesheet that resides in that folder. It does seem a little odd but it will all make sense in a bit.

The issue is when a parent theme uses the rule

@import url( 'path/to/stylesheet.css' );

in the main stylesheet. What that means is that the user now has to look for the location of the main stylesheet and create the right code for it. Or better yet have to include the

@import url( '../path/to/parent/stylesheet.css' );

rule in the child theme.

Why not make it a little easier for them?

How?

By using a quick conditional check to see if the current theme is a parent theme or a child. Yes, there is a function for it. Believe or not it is actually:

is_child_theme()

Simple little function that checks to see if the stylesheet path and the template path are the same; if they are then it is a parent theme, otherwise it is a child. Quick and painless, right?

But how to use it to our advantage? Easy. When we register our scripts and styles we add on the little conditional and when it is a child theme we use both the child’s stylesheet as well as the one being used by the parent.

if ( is_child_theme() ){
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/css/mite.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri() );
} else {
    wp_enqueue_style( 'parent-style', get_stylesheet_uri() );
}

You’ll notice that I am using two different functions when it is a child theme to enqueue the stylesheets being used.

The main reason for this is that when the function

get_stylesheet_uri()

is used it will get the location of the stylesheet of the active theme. We don’t always want that because if you are the a developer that likes to group their files accordingly then it may just lead to a little trouble.

With that little snippet you can now rest assured that when you activate the theme it will load the right path. Now in order for all of this to work we just add one minor thing to our style.css file:

@import url( ../css/theme-style.css );

Fairly straight forward, right?

Filtering the page links

Nothing is ever truly perfect. There are some things that do come close though. In the mean time we can make just a few changes to get our desired result. The photo above is a quick comparison of a photo I took a few years back while at Yosemite National Park.

As you can see there is a huge difference between the two. One is more vibrant and full of color while the other is just a little flat with little to no contrast. Yeah, I critique my own photos constantly. The left is the raw untouched file taken with my camera and the right is the edited version. As you can see it made it better by correcting some color and adding a little more light to the overall image.

Now, in WordPress one way of altering is by using filters. Recently I’ve been messing with one in particular that I feel can be a good practice for any theme developer. Filtering the arguments of wp_link_pages() to style post pagination.

Pagination?

Yes, pagination in posts. Often times when a tutorial or a written work is far too long that it needs to be divided into segments of easy to read, easy to consume blocks of text. In WordPress the

<!--nextpage-->

tag is used in the text editor to create another page within that post. WordPress handles this in one of two ways. The first is by listing the pages and the other is by using simple next/previous links. All themes tend to style that in different ways. The default Twenty Thirteen handles it like:

twenty-thirteen-link-pages.PNG

The way it is styled uses the same code throughout all the content related files. The reason I say it that way is because 2013 has support for all the post formats available within WordPress, which is amazing! Now the downside to that is that it can mean you have to copy/paste, type out a lot more code than you’d want to. I know I can be that way. I just want to be able to set it once and be done. I mean who doesn’t, right?

So, the way 2013 is coded is by calling wp_link_pages and then passing to it an array with some settings.

 wp_link_pages(
        array(
                'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>',
                'after' => '</div>',
                'link_before' => '<span>',
                'link_after' => '</span>'
        ) );

As you can see you would copy and paste that code on all the files depending on how you have all your content files setup. While it does create that nice little HTML structure for us to style it may be tedious to have to copy and paste over and over. I know I got tired of it.

Solution

What I did was looked at the source code for the function. I took notice at one particular line of code that made me happy. That line was:

$r = apply_filters( 'wp_link_pages_args', $r );

The reason it made me happy was because I realized that I could filter the arguments and not have to type out all that code over and over again or even have to copy and paste it all. So all I now had to do was create a callback function and hook it through a filter.

add_filter( 'wp_link_pages_args', 'theme_link_pages_args' );
function theme_link_pages_args( $args ){
    $args = array(
        'before'           => '<div class="link-pages">Page ',
        'after'            => '</div>',
        'link_before'      => '',
        'link_after'       => '',
        'next_or_number'   => 'number',
        'separator'        => '<span>',
        'nextpagelink'     => 'Next Page',
        'previouspagelink' => 'Previous Page',
        'pagelink'         => '%',
        'echo'             => 1
    );
    return $args;
}

*If you are going to filter the $args make sure you use all the settings or you may end up getting some errors.

There we have it! Keep in mind that if you want the theme to be translation ready don’t forget to add the proper functions where needed and prefix the function with your theme’s name.

Regenerate all the things!

HTML formSo, I’ve been dabbling with WordPress for some time and I have loved every bit of it. I even helped a few people along the way. Learned many things and met and talked to many more. Every day I do feel like I am learning something new. Whether that is how to

enqueue

a certain file, how to remove certain things, how to style and just how to do more things in a different fashion.

It has been amazing! I think the biggest thing taken from all of this is that I need to start sharing a bit more. So I’ll begin with a simple plugin that I feel just about any person using WordPress should at least try out.

That plugin is: Regenerate Thumbnails

But why?

Yes, I know WordPress already has a way of creating custom thumbnails but what if you don’t want to click on several photos. What if you just installed a new theme and the images are looking all funky? What happens when you have to resize and you have hundreds of images? I know I have several photos in my library and don’t always have the time to go to PhotoShop and readjust every single image. Who does?

I know I don’t always have that time. What the plugin actually does is go through the entire

wp-content

folder and regenerates all the thumbnails.

Thumbnails?

Yes. Often times when you set a featured image on a post a theme handles the sizing of the image. Some don’t touch it at all and some alter the dimensions to better fit the overall design. While I know that very few companies will actually change their site’s theme it is a very important thing to keep all elements of a site united.

I am sharing this for those that have blogs and are changing the theme every so often and for developers that like to try to break themes.

So by all means, go and try it out. You will not be let down either way.

All about my Child – Theme that is

Frequenting the WordPress support forum always makes wonder a lot of things. The biggest one, I hate to admit, is do people read. I know it does come off a little mean, rude but the truth is a lot of the threads that are in the forums could easily be avoided. The number one being how to modify a specific theme.

The forums are filled with a few of these but the biggest mistakes is that people don’t really read. I want to say part of that reason is the welcome page to the forums. Don’t get me wrong I can find my way quite easily since first starting over a year ago but for a first timer you will want to look elsewhere.

The thing that people want to be able to do is modify a theme or alter it to make it their own. The best way to do this is by creating a child theme. The codex has a good quick and simple tutorial and then gets a little more detailed about how child themes function.

I’ll break things down into steps. Why? Because that’s how most of us read and follow directions, right?

  1. Create empty folder
  2. Create style.css
  3. Active

Create an empty folder

One of the first things to do is create a folder. It really doesn’t matter what you name the folder. 

Create a new folder
Create a new folder

I chose twentysumchild for demonstration purposes but it really could be anything you want. In that folder we will then create a new file. It will be the main file for our child theme. Can you guess the name? Yep,

style.css

will be the newly created file.

Create style.css

Pick any text editor and you will add the needed format so WordPress knows what to do and how to interact with our newly created theme. In our randomly named folder we will now have a single file called: style.css

In this file we will add the CSS header information so that WordPress will show it on our Themes selection page.

Sample information for style.css
Sample information for style.css

As you can see I chose to name my child theme ‘My Randmoizer’ but really it can be anything you want it to be. The key to making the child theme is actually the keyword “Template.” It sounds a little odd but it is true. If you for some reason get a message that there is a template file missing it may be due to that missing line of code.

Now all that is left is to activate the theme.

Activate

Child theme activated
Child theme activated

I didn’t use a screenshot only because I didn’t have much time and I got a little lazy towards the end. A good size for one is 600 pixels by 450 pixels.

As you can see I chose to base my child theme on Twenty-Thirteen but you can create a child theme from just about any theme. Just don’t forget that the key word is: Template

So go, explore, tweak and hack away to your heart’s content. Make as many changes as you want knowing that you will not lose any changes when that theme gets updated.

Twenty-thirteen in April

At least that is the plan from the development blog on core. I updated my trunk version on my desktop which I use primarily for testing and will be using for all my theme and plugin development needs.

The one thing that just about everybody noticed from the get-go was the color usage. Vibrant and a good color scheme as well. The one thing I don’t like is the way it presents itself on wider screens. Part of that reason is the content doesn’t take up much real estate and is centered. When I’m using my 22 inch monitor it does look really strange to see a band of color stretching from left to right.

The focus on this theme is post-formats. I’ve wanted to experiment with that for some time now ever since I learned about them. The best part about it is that with 3.6 launching the focus is also post-formats. Themes should be pretty interesting to see on how they style each one should they choose to. I have a few ideas on how I want my theme to look once I’m done – whenever that is. I’m tempted to just do text and call it a day; do it all in one file.

Looking over the files for the theme and I notice a few different things from previous bundled themes. One of the first things that I noticed is how few lines of code there are on the index file. Only thirty-eight lines and of those seventeen are comment/documentation. I still have several other files to look over and read to get more familiar with the theme.

I am tempted to create a child theme and use it on my personal site. So many ideas! I still have to take several pictures for the theme I’m creating so I can submit it to the WordPress repository. I think the challenge there will be keeping up to date and maintaining the theme as up to date as I possibly can.

Twenty-thirteen has a lot of promise and a lot of potential to it and I think it can derive some really cool themes down the road with a few tweaks here and there.

One more week

Earlier today when I got home from work I did my usual routine of updating to the most current development version of WordPress, made sure all other applications were up to date and opened up my code editor (Notepad++) to view and edit my theme files. Since I was wide awake I tried my hand at experimenting with Git and TortoiseGit on my main computer. One thing leads to another and I managed to delete my theme. I hadn’t made the last commit of adding my modified gallery shortcode.

Needless to say I am kicking myself pretty hard. What this means now is that I am starting over with a new repo but still with SVN and not Git. Git will be for my next project theme. The reason I am starting over is because I deleted the working copy and didn’t realize that I hadn’t added all the files and hadn’t made all the commits I needed to be in sync.

In about one week WordPress 3.5 will be launching and I am pretty stoked about it. The reason is because the way media is uploaded has improved. I feel this is a huge step in the right direction for WordPress development and adoption. People want to be able to share not only their stories but some want to share photos, videos and sometimes audio. The uploader is fairly easy to use and the user interface is elegantly designed.

But enough drooling about what is to come more about what I was trying to get across: patience. I have plenty of it and sometimes I feel I have too much of it. In one week I will make an attempt to rebuild all the code I lost and have it all finished by the time 3.5 launches. This should be manageable since I know what files I need this time after having tested file hierarchy with my previously deleted theme.

Today I created all the empty files and committed that to the repository so I can code away and make the final commits when I am satisfied with the code; that way I won’t have so many commits and a lot versions to go through down the line if I ever have to see why I did what I did.

My WordPress theme

I finally, finally got the ball rolling on what will be my theme and theme structure for this site! I am so excited about this. After having read so many posts about templates, CSS, OOCSS, SaSS, PHP and just about any random acronym you can possibly think of I finally have a name for the theme and the look.

The name is actually inspired, of course, by Flamenco. I am calling the theme: Soleá. The name is a the type of compás, or time signature that is in one of two forms. 3/4 and 6/8 time is a simple way of putting it but there is more to it. It doesn’t really follow the basic musical pattern but I’ll let you research that on your own if you want to really learn more about Flamenco music.

I am slowly learning how to work with TortoiseSVN as my local version control and will try to gain more knowledge with github with this theme as time progresses. I know that my second theme will be a lot easier to work with once I get the hang of my workflow and work area.

Photoshop is a great tool and I love using it. Notepad++ and I have been getting along more and more and Chrome has been very dear to me in this learning process. Forums and web articles I have read are great and taught me not only new techniques but also helped improve my way of thinking about programming.

The theme is a simple theme with very few images to cut load times. The colors I have chosen are black, a dark blue, a grey tone, and blue tone as an accent and for emphasis for certain elements like links and some headers.

The only images I chose to use are for the header and maybe a divider for the bottom of the article when being viewed as a list of and not a single view. The one view that will be a little tricky to finagle will be getting the gallery the way I want.

There are so many ideas that I want to use for the gallery format postings but I think I may just go ahead and implement a simple one. Click on an image and it takes you to the single image page and not having a modal window with the gallery of images; that version I’ll try to implement for the next theme or maybe as an update.

The reason I am wanting to release said theme is because I want to learn more about web development and I hope to share my learnings with the community as well as others. So in the next three, or four weeks, please don’t be alarmed if I start posting three things in one day about code. It will serve as a way for me to organize my thoughts and ideas as well as sharing my pains with the world and hopefully some people gain some insight how to code for their own projects down the road.