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.
Here, we’ll make a menu called main menu, and add our basic pages.
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.
Coding a Basic Navigation in WordPress
To do this, we’ll go to our header.php file and pop in a php block.
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.
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.
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.
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.
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.
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.
We’ll also remove the p tags around the content, as that’s not needed in this case.
Now we can edit our Portfolio page and set its template to Portfolio Page instead of default theme.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Note that this can also be written this way, which we’ll do here.
Finally, we need to add another element to the $args array we’re passing to our WP_Query object.
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.
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.
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.
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.
We’ll also want to copy that code over to sidebar.php, and change it so it works for our blog page.
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.
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.
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.
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.
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.
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.
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.
Kyle's Awesome Awful Websites 