New terms from treehouse – WordPress Theme Development Part 1 – Starting a WordPress Theme, Working with CSS and JS in WordPress Themes, WordPress Header and Footer Templates, The WordPress Loop, and Building Page Templates in WordPress

Starting a WordPress Theme

Where WordPress Themes Live

Under Admin > Appearance > Themes you can see the ones that have been installed, and look for new ones to add. Installed just means the files for it are saved in our site’s server. Only the Active theme displays. When you buy a commercial theme, you must upload the zip file under Add New. If that doesn’t work, check the zip, it may have other stuff in there like licensing info, PSD files, a child theme, etc. So, make sure you’re installing the actual zip of the template.

Screen Shot 2014-12-18 at 1.18.50 PM

It’ll now be in your theme section. To manually install a theme, go to your project folder > wp-content > themes. When we’re making our own, this is where we’ll be working.

The WordPress Template Hierarchy

The codex page for this explains that this is all the possible files you can use when building a theme. The diagram here shows the flow for the type of page you’re trying to build, and the type of php file you should end up with. The outcomes on the right on the standard names, while the light blue and orange ones in the middle are more customized. Index.php is all the way on the right, and is a back up template for all other files. takes this and makes it into clickable links to the appropriate section in the codex.

Setting Up a WordPress Theme Folder

Make a folder in your wp-content > themes directory, but make sure to choose a unique name that someone probably hasn’t chosen before. Open the folder with sublime, and add three files: style.css, index.php and functions.php. index and style are required files for it to show up under themes eventually. All the meta info for a theme lives in the CSS file at the top in a comment. The Tags are helpful if you’re going to list this in the themes directory. To add a picture for your template, use a image named screenshot.png, with the dimensions 880 by 660px.

Screen Shot 2014-12-18 at 2.12.52 PM

Activating a WordPress Theme

Click Activate to do this. If you have styles.css instead of style.css it will appear in the bottom in the broken themes section with a description of why. If you remove index.php you’ll have the same problem. If you activate the theme and visit your page at this point you’ll find a blank page, which makes sense.

Working with CSS and JS in WordPress Themes

Porting Over Static Template CSS

Simply copy and paste the css over into the style.css file in your theme folder. If you have an @import rule, the best way to handle that is by the functions.php file.

Screen Shot 2014-12-18 at 2.19.33 PM

Adding CSS to a Theme Via the Functions.php File

From the static site we also have normalize and foundations. Copy those into a new css folder in the theme folder. Then in functions.php, make a new function wpt_theme_styles. The wpt_ (wordpress treehouse) is namespacing to make this function’s name unique so it won’t conflict with other plugins that may have functions with similar names. Next, inside that call the wp_enqueue_style function, which lets us link to stylesheets for our theme. The first parameter it takes is a name you can give the file, and the second is the link to it. To do that, use the function get_template_directory_uri concatenated with the path to the file. That function gets us from wherever our root is to the template folder.

We’ll link to both normalize and foundation, and also the google font from our import rule (which we don’t need the get template directory function for), and the mains style.css file.

Finally, use the add_action function to tell WP when to call these files. wp_enqueue_scripts is a hook that tells what css and js files to load for a given page.

Screen Shot 2014-12-18 at 2.38.47 PM

How to Link to JS Theme from the Functions.php File

First, copy the JS over to your theme. Note that you don’t need to copy jQuery because WP ships and installs with it running. Now, in functions.php, make a theme called wpt_theme_js.  Here, we’ll use the wp_enqueue_script function, and like before give it a name and link to the file but also an array of dependents, a version, and a true/false parameter for where you want it to appear in the footer. Foundation is dependent on jQuery, so we’ll add that in, and app.js is dependent on both. Finally we’ll use add_action again so this is called when WP enqueues its scripts.

Screen Shot 2014-12-18 at 2.49.07 PM

Now, you could just have these links in the header tags, but this is more dynamic and preferred as you have to worry less about the root structure and file paths.

If you want to use the jQuery $, in WP this is not auto assumed to have to do with that. You need to add a wrapper for no conflict jQuery. Here, we’ll edit our app.js file for that.

Screen Shot 2014-12-18 at 2.47.56 PM

WordPress Header and Footer Templates

The Header.php and Footer.php Files

These files are important as they let you have the code for the header and footer in their own files you can call on any page you make. First, make a file for each. You call them on a page using the get_header(); and get_footer(); functions.

Screen Shot 2014-12-18 at 2.55.15 PM Screen Shot 2014-12-18 at 2.55.19 PM

Porting Existing Headers and Footers into WordPress

Go to your index file and copy from the top of the page down to the bottom of your header tag or div. Then for the footer copy over everything from the beginning of your footer element down to the bottom of the page, including the closing html tag. Then, clean up your code by removing anything that will be replaced by code form elsewhere. For the title, insert the wp_title() function to have WP determine the page you’re on and display that as the page for you. Delete the references to the CSS and JS, replacing them with the function wp_head(), to let WP know we’re about to be at the end of a head tag, so it should load any functions that need to be here, like our wp_enqueue_scripts ones in the add_action on the functions page.

Screen Shot 2014-12-18 at 3.02.11 PM

Next for the header element, we’ll switch out a link to index.html for bloginfo(‘url’), which will give the url of the site. Then for within the a element, we can do bloginfo(‘name’) to output the name of the site. We can then copy and paste this where needed.

Screen Shot 2014-12-18 at 3.06.15 PM

In the footer, we’ll remove the social links, and change the copyright date to use echo date(‘Y’). Remove the js links, then put in a wp_footer() function. This lets WP to it can put stuff it needs before the closing body tag, like js files. This also results in WP inserting a lot of JS here for the admin header at the top of your site.

Screen Shot 2014-12-18 at 3.14.36 PM

The WordPress Loop

An Explanation of the WordPress Loop

The loop is a powerful block of code at the heart of most templates. It checks for what content is available for a page, then loops through and displays it. It starts with an if statement to see if content is available. It then moves into a while statement that will execute as long as there is code or content to be displayed.

It can be displayed using a shorthand method (the first two blocks below), or a longhand method (the third).

Screen Shot 2014-12-18 at 3.26.24 PM

The shorthand method lets you write your opening, put in a bunch of code, then just put in the closing part, as shown in the example on that page.

Adding the Loop to the Index.php file

Apparently we don’t need normalize, so lets comment that out in our functions file.

Screen Shot 2014-12-18 at 3.30.51 PM

Screen Shot 2014-12-18 at 3.36.19 PM

Now to add the loop for our dynamic content by copying and pasting it from its codex page.

We can then switch out the content for dynamic content using functions like the_title or the_content, which thankfully have very clear and semantic names.

Screen Shot 2014-12-18 at 3.35.43 PMScreen Shot 2014-12-18 at 3.35.48 PM

If we were to go in and add another post under our admin section, it will appear here now as well!

Screen Shot 2014-12-18 at 3.37.54 PM

If we add a page, then customize our site to use a static home page, that will display as well.

Screen Shot 2014-12-18 at 3.39.55 PMScreen Shot 2014-12-18 at 3.39.29 PM

This works because index.php is the back up template for all pages, and since we don’t have specific ones right now for blogs or pages, it uses index.php.

Common WordPress Functions Used Within the Loop

A lot of the ones you’ll want are under the Post section in the function reference. Some say the_something while others say get_something. The the ones will echo that thing out, while the get one will let you get the something and save it as a variable for later. The ones start with is are conditionals, and let you know things like if you’re on a single page or not. Under the Others section you’ll find familiar ones like the_title, the_author, etc.

Building Page Templates in WordPress

The Page.php File

This controls what static pages like the about or contact page look like on your site. First we’ll copy our index.php page to a page.php file. Then we’ll change the no post found message. The e_() that’s wrapped around it let’s this text work with language files for the translation of your site.

Screen Shot 2014-12-18 at 4.13.49 PM

We’ll add some new pages under admin for our portfolio, about us, and contact us. You’ll note that the permalink is the page id, so we’ll change that to use the post name instead.

Screen Shot 2014-12-18 at 4.16.28 PM

If we go to view a page, it will now use the page.php template instead of index.php.

Creating Custom Page Templates in WordPress

Here we want to make a new page template that has two columns, the left of which for nav. We’ll copy page.php and make a new file page-sidebar-left.php. Then at the top of the file, add a php comment with Template Name:. This tells WP this is our custom template.

Screen Shot 2014-12-18 at 4.22.37 PM

We’ll then copy over code from our static blog.html page. Note that the container elements are outside of the loop, and repeated elements are inside of it.

Screen Shot 2014-12-18 at 4.31.54 PM

Now that we’ve created this, we can go to a page in the admin section, and under templates on the right choose this template.

Screen Shot 2014-12-18 at 4.28.51 PM

Screen Shot 2014-12-18 at 4.31.38 PM

Now we can create and choose a custom template for each page!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s