Theme Template Tag Cheat Sheet

These are some of the common template tags you will use, listed by the file you would use it in. Some are appear more than once.

Right now it’s just a list. Eventually I hope to link them to their respective pages in the WordPress codex.

index.php

  • get_header() – runs header.php and inserts it into the page
  • get_sidebar() – runs sidebar.php and inserts it into the page
  • get_footer() – runs footer.php and inserts it into the page
  • have_posts() – returns true if there are posts and false if not. Used twice in if( have_posts() ) and while( have_posts() )
  • get_template_part('content') – runs content.php and inserts it into the page. Used inside the LOOP. you can get other files like this: to get content-video.php you would write get_template_part('content', 'video').

content.php

  • This is used if you want to separate out the loop from index.php. Otherwise all of this needs to go in the loop in index.php. All of these require being in the LOOP to run.
  • the_ID() – gets the ID of the post:
    <article id="post-<?php the_ID();?>" <?php post_class(); ?> >
  • post_class() - returns class=” xx ” where xx is a bunch of class names that relate to the post. See above.
  • the_title() – the title of the post
  • the_title_attribute()
  • the_permalink()
  • get_the_date()
  • the_date()
  • comments_open()
  • comments_popupLlink()
  • the_content(): shows the full content of the post or page.
  • the_excerpt(): this is used if you only want to show the excpert of the post and not the full post. Most of the time you use either the_content() or the_excerpt() and not both.
  • the_author_link()

header.php

  • bloginfo('name') – used in the title attribute in head and for the h1 for the site name in body
  • bloginfo('description') – used to get the Tag Line of the blog
  • wp_title() – used to show the title of the page in the title attribute
  •  get_template_directory_uri() – gets the path to the theme’s folder. Must put echo in front of it. Used to link in other CSS files besides style.css. It can also be used to pull in images, like for the header
  • bloginfo('stylesheet_url') – this is used in the href attribute of the link element to include style.css
  • bloginfo('description') – used to show the tagline, you set the tagline in Dashboard > General
  • wp_head() – add this in just before the closing </head>
  • wp_nav_menu() - used to pull in the menus that you can set in the Dashboard > Appearance > Menus

footer.php

  • echo date("Y");
  • wp_footer();
  • bloginfo(‘name’);

sidebar.php

  • dynamic_sidebar( 'home-sidebar' ); This gets sidebar with an id of home-sidebar.
  • is_active_sidebar('x') :x is replaced with the name of the sidebar. This is used to check if a sidebar is active. You can use this to only output a sidebar if there are widgets in it like so:
    <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?> <div class="sidebar"> <?php dynamic_sidebar( 'sidebar-1' ); ?> </div><!-- #secondary --> <?php endif; ?> 
  • The rest of the code for the sidebar is in functions.php

functions.php

  • Functions.php is where you can write functions you’ll use in your theme. While your imagination is the limit here, for now I’ll focus on how to register a sidebar. While this shows registering two, you can register as many as you like and then use them throughout your theme pages.
  • There are two steps to registering a sidebar
    1. writing the function that registers the sidebar
    2. adding the action to make sure the register function runs at the right time

    below is example code for both steps

    Here we’ve put all of our register functions in one function named sidebars_init

     function sidebars_init() { //short version of named sidebar //this is what the is_active_sidebar code above would call register_sidebar(array('name'=>'Sidebar 1', 'id' => 'sidebar-1')); //longer version where the HTML that wraps the widget and the title is specified. register_sidebar( array( 'name' => 'Home Sidebar', 'id' => 'home-sidebar', 'before_widget' => '<div class="widget">', 'after_widget' => '</div><!-- end widget -->', 'before_title' => '<h3>', 'after_title' => '</h3>' ) ); //end register_sidebar } 

    And now we need to hook the sidebars_init function to widgets_init so it runs at the right time. It’s important to note that this code is NOT inside of the above function.

    //this makes sure the registration happens add_action( 'widgets_init', 'sidebars_init' ); 

single.php

  • This is (or can be) basically the same as index.php. The main difference is that you’re getting content for a single post. In this case we’re just going to change what template part we get, but you could make other changes if you like. The other difference is that you dont’ need the if(have_posts()) statement.
  • get_template_part('content', 'single'): gets the page that is shown next.

content-single.php

  • This is similar to content, but it is designed to show the content for a single post. The main change is that it adds the comments after the post.
  • comments_template('', true): that calls comments.php which is next

comments.php

  • have_comments(): this returns true if there are comments and false if there are not.
  • comments_number(): outputs the number of comments. It takes three arguments:1)text if no comments, 2) text if one comment, 3)text if more than one comment. Here is an example
    There <?php comments_number( 'are no comments','is one comment', ' are % comments' ) ?>

    The % is replaced with the number of comments so the above would output the following depending on the number of comments:

    • There are no comments
    • There is one comment
    • Ther are 23 comments
  • wp_list_comments(): this spits out the comments themselves. WP wraps it’s own HTML around them.
  • comment_form(): this spits out the form to allow people to make comments.
  • get_comment_pages_count(): this gets what it says.
  • get_option(‘page_comments’): this gets true/false if comments are on the current page
  • previous_comments_link(): gets a link to the previous page of comments when you’re paging through comments
    <?php previous_comments_link('← Older Comments'); ?>
  • next_comments_link(): gets a link to the next page of comments when you’re paging throug comments.
    <?php next_comments_link('← Newer Comments'); ?>

Class on Tuesday 3.5.13

We got through starting a theme and converted the basic header and footer. The files from class are in the Class Files section for 3.5.13

Today we will start with creating themes. It is chapter 4 in the book

We will use these files for today

StartingHTMLCSS.zip

and start to convert them into a theme.

Diagram to help explain below.

Blackboard is Available

Hi Class,

I apologize. I didn’t click the button to make Blackboard available to you. It is now. So you can turn in Assignment #3 there and future assignments as well.

 

Sublime Text Tutorial

This tutorial shows how to install sublime and the Emmet Package

In addition you should also install the WordPress package too.

Stein Tutorial on Sublime Text Package Installer: http://profstein.clarify-it.com/d/tfgnrw
Emmet Cheat Sheet: http://docs.emmet.io/cheat-sheet/

If you know how to do it and just need the code to install the Package Manager, here is that code:

 

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')

Class on Tuesday 2.26.13

Update

Today we changed things a bit and added in a lesson on installing and using Sublime and the Emmet and WordPress packages for Sublimt Text 2. There is a separate post on Sublime here:

We then went through the first 3 STEPS of Assignment 3. These are essentially the steps that get the blog and the theme ready to add the code to put loops on the page.

As part of our working through thos steps we also looked at the query_posts() function and downloaded my example page template that uses query_posts:page-test-query-posts.php.zip. When you are using this yourself there are a couple of things to keep in mind:

  • You need to download and unzip the file before adding it to your Theme.
  • The page template was created with the idea that it would be added to the Twenty Ten theme.
  • To see the page that uses query_posts in action you have to assign the “Test query posts” template to a page and then view that page.
  • You need to go in and change the code in page-test-query-posts.php so that the part that reads
  • $args = array(‘cat’ => 13 ); is changed to
  • $args = array(‘cat’ => x ); where x is the id of a category on your blog

You can find the id of a category on your blog by going to the Posts>Categories page in the Dashboard and then clicking on a category and looking for tag_ID=13 in the URL. The number is the category id. (also most browsers show the URL of a link somewhere near the bottom of the browser window if you hover over the link, so you can see the number there).

Before we did the query posts thing we had already added the sample posts as outlined in STEP 2 of Assignment 3.

My files from today can be found in the Class Files page.

Outline

Today we are going to focus on the loop again. We will start with going over the setup stuff for assignment #3. Then we will look at two different ways to make a custom loop. But first we will talk about the default query

Default Query

The WordPress Loop is based on a query made to the database that stores all of the information in WordPress. If no query has been made then there is no information to loop through. Changing the query changes what kind of information is shown in the loop.

By default WordPress makes a query based on what you’re showing. If you’re showing the front page and have set it up to show posts (NOT static) then WordPress will do a query for the most recent posts and the Loop will use that. If you’re on a page WP will make a default query to get the information for that particular page only and the Loop will use that info.

Sometimes however you want different or more information that might be contained in the default query. That is what the next two queries are for.

query_posts()

This function replaces the default query when it’s run. It goes out and gets information based on arguments that you provide and then you can use the loop like normal to display the information.

page-test-query-posts.php.zip

Download this file (and unzip it), and add it to the theme you’re using. We will write some code that will show the page content and then show all of the posts in a particular category after that.

You can use a similar idea to show posts or excerpts of posts based on other arguments (date, author etc).

WP_Query()

One of the problems with query_posts() is that it resets the default query. That makes it difficult to have more than one loop on a page and can mess with existing loops.

WP_Query() to the rescue. It is very similar to query_posts() except that you store the information in a variable. Then you need to use this variable when you’re making the loop.

Here is an example of how you create the WP_Query
$args = array(‘cat’ => 13 );
$ featured_query = new WP_Query( $ args );

But then you use it in a different way.

So for example This is a standard Loop:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 

And this is one with the $featured_query from above

<?php if ( $ featured_query-have_posts() ) : while ( $ featured_query-have_posts() ) : $ featured_query-the_post(); ?> 

So you add the $featured_query in front of everything.

Then after that you use the loop like normal. But you can use this multiple times throughout the page.

Assignment #3: The WordPress Loop

Assignment 3 The Loop

Turning it in

For this assignment I need to be able to see your code. So you won’t give me the URL. Instead  do the following

  1. Zip the theme folder (make sure you changed the name of the folder and the theme name in style.css as outlined in Step 1).
  2. Upload the zipped folder to Blackboard for Assignment #3
There didn’t used to be an Assignment section on Blackboard but there is one now.

Instructions

We will start this assignment in class on 2.21.13. No single thing in the assignment is extremely difficult but there are a lot of small things you need to do for everything to work. This is part of the assignment and part of working with WordPress.

The ovearll assignment is to create a new page template the uses three custom Loops to out put a featured post and two lists of posts. The following is the breakdown of how you should accomplish that.

  1. Start with this Custom Loop theme that is based on Twenty Ten and modify it as follows:twentyten-chapter3-customLoop.zip
    1. Edit the folder name to have your name on the end like: TwentyTen-CustomLoop-ChrisStein
    2. Open the files in your text editor and in style.css, change the Theme Name to have your name at the end like: Theme Name: Twenty Ten – Custom Loop – Chris Stein. Make sure to Save Your Work
  2. Setup your Posts as follows: (you need to be connected to the Internet to install the importer) This is the same set of sample posts we imported in the first week.
    1. First, create what will become the Featuerd Post. (1)Make a new post, (2)give it a title and (3)dummy content and then (4)create a new category named Featured Posts and (5) assign that to the post.
    2. Download the sample posts file: http://donalyza.com/projects/wordpress-sample-blog-content/
    3. Import the Sample Blog Posts: Tools > Import > WordPress.
    4. It should then ask you if you want to install the plugin. Install it.
    5. Click Activate Plugin and Run Importer
    6. Choose the files you downloaded above
    7. CLick to Import. Assign your admin as the author. You should now have a bunch of posts.
  3. Set up a custom front page
    1. Create a new Page. Name it what you like (but Front Page might make it easy to remember)
    2. Assign it the Custom Front Page template
    3. Publish it
    4. Go to Settings > Reading in the Dashboard.
    5. Select Static Front Page
    6. Set the page you just created as the front page. You can either leave blank or set whatever page you like as the posts page.
  4. Add the Loops to the Custom Front Page templat. Use the examples in Chapter 3 in the book. Look in the Featured Posts with Multiple Loops section of the chapter. I’m only asking for three loops, but if you want to do four like in the book you can add another category.
    1. Make one loop that shows the post in the Featured Posts category
    2. Make another loop that outputs the posts in Category 1
    3. Make another loop that outputs the posts in Category 3
  5. Styling the posts is optional. We will talk about that more in future classes. However it’s good practice to give it a try and see if you can figure it out.

Class on 2.19.13

Outline of the day

Template Tags

  1. Background on WordPress Template Hierarchy: http://codex.wordpress.org/Template_Hierarchy
  2. Download the TwentyTwelve-2.19.13 theme: twentytwelve-2.19.13.zip
  3. Page Templates
    1. Open the test-page.php page template file.
    2. Create a page that uses that template
    3. Have it use sidebar-new.php instead of sidebar.php
  4. Duplicate sidebar.php and rename it sidebar-new.php
  5. Add Link to RSS feed in the sidebar-new.php using the bloginfo() Template Tag: http://codex.wordpress.org/Function_Reference/bloginfo
  6. Add in a tag cloud using the wp_tag_cloud() template tag http://codex.wordpress.org/Function_Reference/wp_tag_cloud
    1. We will also talk about template tag arguments and use them for the wp_tag_cloud()
  7. Conditional Tags
    1. What are they
    2. Examples of Conditional Tags

The Loop

This starts in chapter 3 in the book. We are going to start this out. We might not get to it until Thursday.

  1. What is the loop
  2. Download modified Twenty Ten theme and follow along in the book.
    1. twentyten-chapter3-start.zip
  3. Below are some images that help clarify what the book asks you to do
    1. This file contains a basic loop: BasicLoop.php

The Basic Loop

Asking for a particular loop file using get_template_part()

Adding in the Excerpt

Removing Filters in functions.php

Adding CSS to style.css’