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

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!