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?

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.