New terms from treehouse – WordPress Theme Development Part 2 – Building Out WordPress Navigation, Custom Post Type Templates in WordPress, Adding a Blog to a WordPress Theme, Custom Homepage Templates in WordPress, and Finishing Your WordPress Theme

Building Out WordPress Navigation

The wp_nav_menu Function

The dynamic nav so we can see/use our header wasn’t working due to typos in our functions.php file, but it does now. We’ll now use the wp_nav_menu function to set up the menu. It takes a bunch of parameters that affect how it’s displayed, and what comes before or after it. For this to work though, you must first call the add_theme_support function, and pass it the parameter menus, which adds that as an option under the wordpress admin section under appearance, as that is not default.

Screen Shot 2014-12-22 at 2.09.33 PM Screen Shot 2014-12-22 at 2.09.43 PM

Here, we’ll make a menu called main menu, and add our basic pages.

Screen Shot 2014-12-22 at 2.11.21 PM

Next, we’ll go back to function.php and tell WP we have a specific menu set up. We’ll make a new function and call it register_theme_menus, containing the wordpress function register_nav_menus, which accepts an argument of an array of what menus you want to have on your site. You’d then add_action again, and for the first argument give it init, which means when WP is first run. This will add the Manage Locations tab to the top of the menu’s screen, where you can choose what menu you’d like for each menu location. When you go back to the menu’s page, MAKE SURE TO CHECK THE BOX FOR THEME LOCATION FOR YOUR MENU OR THE STYLES WON’T WORK.

Screen Shot 2014-12-22 at 2.19.41 PM Screen Shot 2014-12-22 at 2.19.10 PM

Coding a Basic Navigation in WordPress

To do this, we’ll go to our header.php file and pop in a php block.

Screen Shot 2014-12-22 at 2.22.16 PM

We’ll start by declaring an array. We’ll turn off the container, which is created by default. Next, we’ll set the theme location of our primary menu, which tells WP that this is where that is. Next, the menu-class parameter lets us assign a class to the first element, in this case our unordered list.

Screen Shot 2014-12-22 at 2.33.57 PMScreen Shot 2014-12-22 at 2.34.04 PM

Now, the admin bar at the top can mess with your styles and make it annoying to access some buttons is they’re near the top. You can go to your header file and add the function body_class() to your opening body tag. This adds a bunch of classes to that tag with info on things like if you’re logged in or not. You could then use these classes to modify your styles for logged in users. This is similar to how modernizr works as a concept.

Screen Shot 2014-12-22 at 2.37.46 PM Screen Shot 2014-12-22 at 2.36.57 PM

Custom Post Type Templates in WordPress

Coding Your Own Custom Post Type Templates

You’ll want to avoid the register_post_type function, because it places the code in your functions.php file, and if someone switches themes, their custom post types won’t be able to be accessed.

So, we’ll instead use the more common approach of using plugins. Like before, we’ll need to install and activate Advanced Custom Fields, and Custom Post Types UI. My first WP blog post covers how to use these, so we won’t cover that again here. Remember to set the rule to equal your new page (portfolio) and to hide the fields you don’t need. After clicking publish, you should now see the portfolio section on the left admin nav.

Screen Shot 2014-12-22 at 2.58.38 PM Screen Shot 2014-12-22 at 3.00.21 PMScreen Shot 2014-12-22 at 3.01.29 PMScreen Shot 2014-12-22 at 3.02.27 PM

You can then add a new post. To have it display though, we’ll need to add a custom template page for it, but first we need to lean about the WP_QUERY function.

Note: like menus, featured images won’t show unless you tell WP to do that. This will add the set featured image option on the admin page for that post type.

Screen Shot 2014-12-22 at 3.08.41 PM Screen Shot 2014-12-22 at 3.08.19 PM

The WP_Query Function

WP_Query is a special function that lets us say what we want a specific loop to display on a page. Its parameters let you cycle through posts with a certain author, tag, or in our case post type. Note that for this you need to create a query object, and then call that for your loop. At the end of the loop, the wp_reset_postdata function resets things and prevents this loop from interfering or interacting negatively with other loops on the page.

Screen Shot 2014-12-22 at 3.12.41 PM

The Portfolio Homepage

To start, we’ll make a copy of our page.php file, saving it as page-portfolio.php. Remember,  we need to add a comment at the top with our template name. We can also remove the else conditional at the end of our loop, as we don’t want that showing up if there are not posts found. We’ll also remove the p tags around the content, as that’s not needed in this case.

Screen Shot 2014-12-22 at 3.16.56 PMScreen Shot 2014-12-22 at 3.17.40 PM Screen Shot 2014-12-22 at 3.17.35 PM

We’ll also remove the p tags around the content, as that’s not needed in this case.

Screen Shot 2014-12-22 at 3.18.56 PM

Now we can edit our Portfolio page and set its template to Portfolio Page instead of default theme.

Screen Shot 2014-12-22 at 3.19.43 PM

Now to set up our WP_Query. First we’ll need the markup we want to loop. Then, above that we’ll create an array called $args that will contain the parameters we want to pass to WP_Query. Then, we’ll create a variable $query and set it to a new WP_Query object.

Now we’ll make our loop, which will be within the section tags but around the div, since that’s what we’re looping. First we’ll check if it has posts of the type portfolio, then add the while loop and what it should do. This is similar to what we had done before. Make sure to close the while and if, and add the wp_reset_postdata(); function to the end of it.

Screen Shot 2014-12-22 at 3.32.03 PM

Now to set up the actually thing to loop. For the link, we’ll use the the_permalink() function, which will know the permalink of the post and take us there. We’ll replace the image with the the_post_thumbnail(); function to use our featured image instead. It accepts a size parameter, in this case we’ll use large. We’ll test it’s working by adding some more portfolio posts and making sure that they show up. It’s looking good!

Screen Shot 2014-12-22 at 3.40.12 PMScreen Shot 2014-12-22 at 3.40.16 PM

The Portfolio Single Page

Now to make a page for the individual portfolio pieces. If we look at the hierarchy, we can see for a single post page, if it’s a custom page, it will use the orange single-$posttype.php, and if that’s not there it will use single.php.

Screen Shot 2014-12-22 at 3.41.35 PM

Now, we want a two column layout, and since we already did that for the contact page, we’ll copy that over and give it the name single-portfolio.php. Since we’re following the naming convention, we can actually remove the comment with the template name at the top. Now, before we just needed our loop in one section, but here, we need it in both so we should expand our loop to surround both sections. We can also remove the else conditional for if no pages are found.

Screen Shot 2014-12-22 at 3.46.13 PMScreen Shot 2014-12-22 at 3.48.30 PM

Now we can call our custom post field images using the the_field tag and passing it images. In the secondary column we can add the_title() and use the_field() function again, this time passing it desccription. Note that the_field() is from the advanced custom fields plugin, and is how you call any of the fields that you’ve set. Make sure that both the if and while statements are closed or the page won’t load.

Screen Shot 2014-12-22 at 3.54.22 PMScreen Shot 2014-12-22 at 3.54.27 PM

However, the images aren’t full size. To fix this, you’d simply edit the post and the images and select full size rather than medium.

Now, we’ll add an enhancement for this page that lets you click to the previous or next piece, or back to the gallery. For the previous and next links you can use the previous_post_link and next_post_link functions. For the link back to the portfolio, a good trick is to use bloginfo(‘url’) followed by the subfolder of the page you want.

Screen Shot 2014-12-22 at 4.00.36 PM Screen Shot 2014-12-22 at 4.00.33 PM

Adding a Blog to a WordPress Theme

Setting Up the Blog Homepage

The main blog listing page is called home.php. Since this is two columns as well, we’ll start by copying the sidebar-left file and naming it home.php. Since we’re using this name, WP will know to use it as the home page for our blog, and we won’t need to to have a comment at the top for its name. Next, we’ll go to our admin section and add a Blog page. Then, go to Appearance > Customize > Static Front Page > Set Front Page to Home and the Post page to Blog > Save and Publish.

Then, under Appearance > Menus add the Blog page to your main menu. Now the blog page will appear in that menu.

Screen Shot 2014-12-22 at 4.11.36 PMScreen Shot 2014-12-22 at 4.12.49 PMScreen Shot 2014-12-22 at 4.13.26 PM

Note that due to what we have written on our home.php file, all its doing is looping through and displaying the header and content of each post, so we’ll need to add some changes.

Coding the Blog Homepage

First we’ll copy the markup framework we want, which will include a link, an excerpt, the featured images and the meta data, and paste it in the loop in home.php.

Screen Shot 2014-12-22 at 4.19.15 PM

First we’ll change the main link to the_permalink, and replace the link content with the_title. In the h2 we can use the_excerpt() function, which is similar to the_content but cuts it off after a certain point.

Then, you need to change/namespace the avatar class on the span in the author link since that is one used by WP. Within that, we replace the image with the get_avatar() function, which takes a few parameters, like the id or email of the user, its size, a fallback image, etc. To get the author’s id, we’ll actually use the get_the_author_meta  function, and pass that the id. The 24 is for the size. Because we’re using a function that starts with get, we need to use echo to print it to the screen, or it won’t appear.

We’ll replace the author’s name with the function the_author_posts_link(), which lets us link to a special author page we’ll build later.  We can replace the link for the category with the the_category function, which will auto create a link for us. It takes an optional parameter for a separator, like a comma or a pipe character for if the post has multiple categories. Below that, we’ll add the date with the_date function.

Within the image container div, we’ll use the_post_thumbnail() function for the featured image, but, within a conditional statement in case the post doesn’t have one. If we simply put the_post_thumbnail() within the conditional check, it will check based on whether or not it exists.

Screen Shot 2014-12-22 at 4.40.47 PM Screen Shot 2014-12-22 at 4.40.43 PM

Now to improve this. We’ll add a featured image to one of our blog posts to make sure this is working. It looks like it does, but if you look at the source you’ll find it’s not using the markup we want. To fix that, use get_the_post_thumbnail instead, as the other option will just echo out the featured image if it’s there, disregarding the markup in the conditional.

Screen Shot 2014-12-22 at 4.44.10 PM

Another issue – the excerpt is putting it in p tags within our h2, which we don’t want. To fix that, we’ll wrap it in the function strip_tags. Additionally, we’ll use get_the_excerpt instead, and echo the whole thing. Now the styles are correctly applied.

Screen Shot 2014-12-22 at 4.47.06 PM

To control how long the excerpt is, we can go into function.php and add a new function, which will accept a parameter of $length. It will return the number of characters we want, 16. Then we’ll use add_filter, which will take excerpt_length, the function we made, and 999. The function is telling wordpress to take it’s variable length, set it to 16. Then the add_filter says to do that for the excerpt_length, and the 999 makes sure that this is called last, so after anything else that may be setting that length.

Screen Shot 2014-12-22 at 4.51.31 PM Screen Shot 2014-12-22 at 4.51.27 PM

So that in looks wonky, and that’s because the_category function is outputting it as an unordered list. To fix that, we’ll simply pass in a comma and space.

Screen Shot 2014-12-22 at 4.53.35 PMScreen Shot 2014-12-22 at 4.53.39 PM

One other issue, the second post isn’t showing the date. The reason for this is that for the_date, if two posts are called in a loop that have the same post date, only the first one called will have that displayed. To fix that, we’ll replace it with the the_time function, with some parameters so it displays a date and not a time.

Screen Shot 2014-12-22 at 4.56.53 PM

The single.php Page

Now we’ll build out what a single blog post page looks like. It looks similar to home.php, so we’ll copy that, and to follow the hierarchy give it the name single.php (you may sometimes see it at single-post.php).

We’ll make some changes, like moving the featured image beneath the h1 and meta data, removing the h2 excerpt, and putting the content beneath the meta data list. Keep in mind when making pages you may need to make compromises or tweaks based on the design or WP’s capabilities.

Screen Shot 2014-12-22 at 5.19.55 PM Screen Shot 2014-12-22 at 5.19.03 PM

Adding Comments to a Template

The comments_template() function lets you do this, and takes some optional parameters like the file you’re loading, and whether to separate them by comment type. Simply add it in and it works! If you’re signed into WP, it just has a textarea, but if you’re not, it will have some additional fields for you to fill out.

Screen Shot 2014-12-22 at 5.23.36 PM Screen Shot 2014-12-22 at 5.23.20 PM Screen Shot 2014-12-22 at 5.22.59 PM

Under Admin > Settings > Discussion you can customize how they work for the site.

To create a custom comment section, create a new file name comments.php, and WP will auto use that instead. The details of doing that won’t be covered here, but you can go to a template that has a good, custom set up and read their comments.php file to get started.

A Catch All Archives Page

If you have a archive.php file, it will automatically control archives for author pages, custom post types, categories, tags, etc. You can make a custom page template for each type, but the general archive.php template should be good for all of them.

We’ll copy our home.php file and name it archive.php. We’ll then add a div with the class leader, and in an h1 use wp_title(”) with Blog Posts. Now, when someone clicks on one of the meta data links, it will load the archive of all relevant blog posts with the applicable title at the top.

Screen Shot 2014-12-22 at 5.32.09 PM Screen Shot 2014-12-22 at 5.30.53 PM Screen Shot 2014-12-22 at 5.30.49 PM

Custom Homepage Templates in WordPress

A Static Homepage Template

You have two options for home pages in WP, a static page, or a latest blog posts page. If you look in the hierarchy, you’ll find we need a page named front-page.php. We’ll remove the else text for if there are no posts, If you name it that way, it will automatically be set to the home page, so long as under Appearance > Customize > Static Front Page > Front Page is set to Home.

We want to have the loop on our portfolio page here, but rather than copy and paste it (which is poor practice), will create an include file for it. We’ll name it content-portfolio.php, which is a naming convention for includes that involve content. To then include that file, you’d use the get_template_part() function, which is basically a php include statement, with the addition for WP that it takes two parameters, which are slugs of the url. So for content-portfolio.php, you’d pass it ‘content’ and ‘portfolio’. We’ll paste that in the portfolio and front-page.php files.

Screen Shot 2014-12-22 at 5.49.53 PMScreen Shot 2014-12-22 at 5.49.58 PM

To have less posts show on the home page, while have all show on the portfolio page, we can use a pagination parameter for WP_Query called posts_per_page. If you put -1 it will show all posts, and if you put a number it will show that many. We’ll do this with wordpress conditional tags, in this case the is_front_page() one.

Screen Shot 2014-12-22 at 5.55.16 PM

Note that this can also be written this way, which we’ll do here. 

Screen Shot 2014-12-22 at 5.55.19 PM

Finally, we need to add another element to the $args array we’re passing to our WP_Query object.

Screen Shot 2014-12-22 at 6.02.48 PM

A Blog Listing Homepage

If under Appearance > Customize > Static Front Page > you instead choose Your latest posts, you’ll find it doesn’t work right. Upon reviewing the hierarchy, while for static pages you should use front-page.php, for your latest posts you should just use home.php (which is your blog listing page). If you have a front-page.php file in there though, it will use that, so rename it to something else instead and it will use home.php.

Another way to get around this is to edit your pages in the admin section and select a specific template for each. Be sure to test your template in different kinds of content to make sure it works if you plan on releasing it for others to use.

Finishing Your WordPress Theme

Adding Widget Areas to a WordPress Theme

We’ll stat by going to the functions.php file and creating a new function call wpt_create_widget (remember the wpt is for namespacing), and within that use the register_sidebar function, which accepts an array. We’ll then call that function twice below, passing in the three parameters need for name, id and description.

Screen Shot 2014-12-27 at 12.53.30 PM

Now, a widget section appears under the Appearance section. Note how its name and description appears. You can drag and drop the widgets into the sections you want.

Screen Shot 2014-12-27 at 12.55.42 PM

Now, we need to go to our template and ensure the right code is there for the widgets. We’ll go to any template file that has the sidebar, like archive.php, copy paste that into an include, and use that instead. The file name you should use is sidebar.php. We can then use the get_siderbar function, which will automatically pull that in.

Screen Shot 2014-12-27 at 1.01.39 PM Screen Shot 2014-12-27 at 1.03.03 PM

You’d then go through and replace anywhere else you need the sidebar with that, like home.php and single.php. However, for the page-sidebar file, we want to use a different sidebar file, which you can do by passing get_sidebar a parameter. If you pass it page, it will use the file sidebar-page.php. Here, we’ll add a conditional that checks if it’s there’s not any widgets installed using the dynamic_sidebar function, and if there’s not to display a message to install them. If there are, it will simply display them.

Screen Shot 2014-12-27 at 1.44.40 PM Screen Shot 2014-12-27 at 1.44.28 PMScreen Shot 2014-12-27 at 1.12.10 PMScreen Shot 2014-12-27 at 1.44.48 PM

We’ll also want to copy that code over to sidebar.php, and change it so it works for our blog page.

Screen Shot 2014-12-27 at 1.46.38 PM

Note that if we use the search widget, and don’t have a search.php template file, it will use the default template, which is index.php.

Adding Shortcodes to your Theme

While you can add html to your wordpress pages and posts under the edit sections, a better way to do this is shortcodes. The Easy Foundation Shortcodes plug in adds formatting buttons to the WYSIWYG editor. You could code this into your theme, but once again a plugin is better because you can change themes and maintain the formatting.

Screen Shot 2014-12-27 at 1.54.07 PM

You can now add buttons, columns, whatever you need.

Testing your WordPress Theme

1. Make sure all the pages/links/features (like comments) work. Make sure the titles

One issue we have is on the about page the title is just saying about, and not the name of the site. We can add that with bloginfo(‘name’), and also add some parameters to the_title. ‘|’ is the separator, true is that we want it to echo, and ‘right’ to have it display on the right side.

Screen Shot 2014-12-27 at 1.58.59 PM Screen Shot 2014-12-27 at 1.57.21 PM

2. Go through site with debug mode on. If you go to your main wp install > wp-config.php file. Then, scroll down to WP_DEBUG, and set it to true.

Screen Shot 2014-12-27 at 2.02.16 PM

Now, if we make an error in our code (like a : instead of a ;), and try loading the page, we’ll get an error message saying where the problem is. If debug mode is off it’d just give you a blank page. Don’t turn this on when the site is live, but this is good to have it on when developing.

3. The Theme Development Checklist lists three main things to check.

3a. The Theme Development page gives a great overview of everything you need to know when making a theme.

3b. The Theme Unit Test is a bunch of data you can download and install into your theme. It’s generic content that includes all the default stuff you could have like pictures, lists, etc, and you can see how your theme handles it. If your theme is specialized, this may be overkill.

3c. The Theme Review is the guide WP gives for you to follow if you want to submit your theme to the repository.

The Theme-Check plugin helps with this, it goes through your theme and sees if it meets those standards. It appears under Appearance > Theme Check. You will need WP_DEBUG enabled.

If we test our theme, we get a bunch of errors.

Screen Shot 2014-12-27 at 2.12.52 PM

One is that WP has certain set css classes it uses, like wp-caption when it works with images. An easy way to get these classes for your theme is to go into the stylesheet for a default WP theme like twentyfourteen, find the needed rules, and copy them into your css. Note that some class, like .wp-caption may be used for many rules.

The text domain problems listed may be from code copied from the codex, where we didn’t include a second parameter for the language file, which is for translating to other languages. Here’s that corrected. You’d want to do this for each error.

Screen Shot 2014-12-27 at 2.17.59 PM

It doesn’t like our flexible width tag, which can be found in the comments section at the top of the style.css file, and replace it with fluid-width.

Another issue is our lack of pagination code. You can look a loop up in the codex for that. If you’re testing this code make sure you have enough blog posts that it will appear, and that under Settings > Reading you’ve set how many blog posts per page to appear.

Screen Shot 2014-12-27 at 2.21.54 PM

The post_class() function is similar to the body_class one in that you add it to the div containing your posts, and it will add classes to it that may be helpful for you reference later. You can pass it parameters of other classes you want it to add, like post.

Screen Shot 2014-12-27 at 2.25.16 PMScreen Shot 2014-12-27 at 2.25.27 PM

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 )

Facebook photo

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

Connecting to %s