Theme Developer’s Toolkit: Part 3

This is Part 3 in a series of posts that try to answer the question:

What are some good resources for someone who wanted to learn more about WordPress theme development?

I encourage you to checkout Part 1 & Part 2 in this series if you have not yet: Theme Developer’s Toolkit: Part 1 and Theme Developer’s Toolkit: Part 2.

In Part 1, we learned how a WordPress theme combines a few template files together to create a single page in WordPress. In Part 2, we learned about utilizing the WordPress Template Hierarchy to communicate with WordPress about which template we want to use for specific pages. Now we are going to discuss the WordPress Loop. More specifically, we will look at a tool that every WordPress Theme Developer will find super handy: Generate WP’s WP_Query Generator.

What is a database query?

Consider a blog that has 100 posts. Each of those posts is stored in the site’s database. Scary?! No, not so scary.

When WordPress wants to display a feed of blog posts, it will go to the database and perform a query. In this case it will say, “Hey, database may I please have all the posts.”

When WordPress wants to display all blog posts in the category Tutorials, it will go to the database and perform a query. In this case it will say, “Hey, database may I please have all the posts in the category Tutorials”.

So, a database query is simple a question of the database to retrieve content of a specific type. In a WordPress template we often perform queries in order to display content. In the first example, where we want to see all blog posts, we would likely be forming a query like this for the blog template. In the second example, where we want to display only posts from a specific category, we would likely be forming this query on a category archive or perhaps if we wanted to feature a specific blog category on our home page.

What is the WordPress Loop?

The WordPress Loop is what you do after the query has gathered up the content we are looking for. Let’s take our first example of a blog website that has 100 posts. We want to display all those posts on our blog page.

Rather than code that we want to display the title of blog post 1, the featured image of blog post 1 and an excerpt from blog post 1… and then do the same for blog posts 2 – 100, we use what is called the WordPress Loop.

The WordPress Loop allows us to say while we have these 100 blog posts, go through them one at a time and perform these actions for each post. In this case the “actions” we want performed are to display the title, the featured image and an excerpt.

Now that we understand the concept behind a query and the WordPress Loop, let’s take a quick peek at the tool we are featuring in this installment of the WordPress Theme Developer’s Toolkit.

Tool: WP_Query Generator by GenerateWP

GenerateWP offers a tool on their website called the WP_Query Generator. When we code a query for WordPress to ask the database we have to format it a special way and make sure we are communicating correctly the type of information we want returned. The WP_Query Generator tool allows you to fill in fields that describe the information you are looking for, in return it provides a formatted query that you can use in your WordPress templates.

Whether you use this tool to creates your queries for you or you simply play around with some values to see what is possible with a database query — I think it is a useful tool in working towards understanding WordPress Theme Development.

The code found below was generated by WP_Query Generator after I went to the “Type & Status” tab and entered in “post” under the label Post Type. I also went to the pagination tab and entered in the value “-1” under the label Posts Per Page (-1 means return all posts).

The code below shows how we setup our array of query arguments, which we are setting equal to a variable called $args. We then perform our query by using the WordPress function WP_Query(). Lastly, we have asked the WP_Query Generator to include a loop which we would use to perform the same action on each individual post (show it’s title, etc.).


// WP_Query arguments
$args = array(
'post_type' => array( 'post' ),
'posts_per_page' => '-1',
);

// The Query
$query = new WP_Query( $args );

// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
// show the title, the featured image and the excerpt
}
} else {
// no posts found
}

// Restore original Post Data
wp_reset_postdata();

Theme Developer’s Toolkit: Part 2

This is Part 2 of a series of posts that try to answer the question:

What are some good resources for someone who wanted to learn more about WordPress theme development?

I encourage you to checkout Part 1 in this series if you have not yet: Theme Developer’s Toolkit: Part 1.

In Part II we will be discussing a tool that every WordPress Theme Developer will find super handy.

Tool: The WordPress Template Hierarchy

A WordPress theme consists of a number of templates. They are reusable on a number of pages and posts. For example, the template page.php is the template that most of a site’s pages will use. The slightly less obviously named single.php is the template that all our blog posts will use.

A template will provide the types of content featured and layout of that content. A template is powerful and reusable though because the content will change for each page using that template.

So for example, let’s say the page.php template might layout all pages to have its title at the top and centered. Below that title the template might be built to show copy on the left and one featured image on the right.

Taking this example further, if we imagined a site that had a Privacy Policy page and a Terms and Conditions page that were both using the page.php template, the layout would be the same but the content will vary. They are both using the same template and the template provides consistent layout for varied copy.

If we wanted the About page to be a completely different layout than the page.php template we described before, we would need to build a new template. Let’s say in this template we built a special layout to display our awesome team and a hero image with our mission statement on it. In order for WordPress to know to use our new, special About page template and not the page.php template described before we would need to utilize the WordPress Template Hierarchy.

The people at WPSHOUT are apparently brilliant and turned this tool into a website that can be found here: https://wphierarchy.com/.

The WordPress template hierarchy is a tool that demonstrates how WordPress selects which template to use. Near the right hand side of the tool we see a purple box that read page.php. If we trace the line out of page.php two boxes over to the left we see a box that reads “page-$slug.php”. We can ignore the $ here, and focus on the word slug.

In our example, we want a custom template for the About page. If the About page were found at the URL www.example.com/about, than our slug would be “about”. It is the last part of the URL.

So in our theme we would create a file called page-about.php. In this file we could build our special About page template. When loading the About page of the site WordPress would use page-about.php instead of page.php. When viewing the Privacy Page noted earlier WordPress would continue to use the page.php template.

The WordPress Template Hierarchy is a powerful tool for learning how to build WordPress themes. It is also a great reference years into theme development.

If you enjoyed this post please checkout the next installment, Theme Developer’s Toolkit: Part 3.

Theme Developer’s Toolkit: Part 1

Last week I was at the Pasadena General WordPress MeetUp, which I have the privilege of occasional hosting in place of the very knowledgeable Alex Vasquez. If you find yourself in the area come say hi.

Anyways, this question came up:

What are some good resources for someone who wanted to learn more about WordPress theme development?

A few developers in the room described their personal journeys to theming — many recalled trial and error, others cited specific resources however they were a bit outdated. There was also a shoutout to the WordPress educator extraordinaire Zac Gorden, who I believe is presently pouring his energy into JavaScript for WordPress.

In the vein of tutorials, personally I remember finding this gentleman’s YouTube Channel helpful for my journey.


WordPress Theme Developer’s Toolkit

Despite the thoughtful answers, the question lingered with me for a few days. I started to think about what were the conceptual pieces one would have to put together to wrap their head around WordPress theme development. And more fundamentally, what combination of resources and lessons would setup a future WordPress theme developer.

Lesson: Build a Website using only HTML and CSS

WordPress, Joomla, Drupal and any other Content Management System are all abstractions. WordPress provides a tremendous amount of utility bundled into a package that allows anybody to create a website.

Part of this abstraction is breaking a website into various components. For example a header, page content and a footer all come together to form a single page. In WordPress each of these three components correspond to files you will find in a WordPress theme. The reason they are broken into three files is not so important for this article, what is important is that the three files combine to form a single page.

This abstraction is ultimately beneficial for us when developing sites, however if you do not understand what is being abstracted away it can leave you struggling to connect the dots WordPress is filling in for you. On the other hand, to be able to build a page without the help of WordPress allows you to understand the fundamental structure of a WordPress theme.

If you were to build a one page website using only HTML and CSS you would start from the HTML head tag. That would be followed by the HTML body tag. And at the end of the body tag you would likely place a footer tag. Understanding the barebones of a website gives you perspective when looking at a more complicated file structure like what you would find in a WordPress theme.

If you took this process a couple steps further you would likely want to include a couple images, a CSS file and maybe even load a Google Font. Understanding how and where to reference these additional elements dusts away even more of the abstraction WordPress supplies. Additionally, you will need to store the image files and the CSS file somewhere in your site’s folder. The Google Font you would reference externally. Perhaps this is a little confusing. To quickly visualize this, here is another tutorial that demonstrates what I am describing: https://thehelloworldprogram.com/web-development/creating-files-folder-structure-web-pages/.

In a WordPress site we have all the same components — images, CSS and third party resources (the Google Font). Going from a content manager familiar with the WordPress dashboard to a theme developer who needs to be familiar with the theme file structure is challenging. However, if you go through the process of building a site using simply HTML and CSS, I believe you will find navigating a WordPress theme’s file structure much easier.

If you enjoyed this article, please checkout the next post in this series: Theme Developer’s Toolkit: Part 2.