This guide is intended to serve as a complementary resource to my presentation on Intro to WordPress Development at the MarkNet Group on September 25, 2012. MarkNet Group is run by Alex Miranda and Gina Nieves, two colleagues and friends who are amazing resources and huge contributors themselves to the web development, SEO, and WordPress community. My journey into web development started in 1998 (in 7th grade) when I built my first website using Notepad and hosted it on Geocities. I spent one week at computer camp that summer and learned a little C++, then spent the next 10 years pursuing other interests. It wasn’t until 2008 when I dove back into web design while working as a business development specialist at the Lewis Group at Vision Financial Markets. I had volunteered to help maintain one of our client’s websites and more followed suit. I convinced my boss to enroll me in a 3-day seminar at the Noble Desktop Academy in New York City. I was able to polish up on the changes in web design I had missed. About 6 months after diving back into web design, I discovered WordPress. I wouldn’t be able to build websites for a living without WordPress. This guide is my effort to give something back to the community and the software that has given me a career I look forward to everyday.
Why Develop For WordPress?
I recently read an excellent article in Smashing Magazine titled “How to Become a Top WordPress Developer”. If you’re looking for a fast growing, profitable industry, look no further. Wordpress developers are in high demand and if qualified can charge whatever they want. Check out this infographic by Joost de Valk illustrating the dominance of WordPress in the CMS market:
Opportunities for WordPress Development
WordPress offers several opportunities for development:
- Theme Developer – Theme developers build themes for sale to the public or for private clients. My presentation includes a short demonstration on the basics of theme creation. This is usually the starting point for many WordPress developers.
- Plugin Developer – Plugin developers code plugins that offer standalone functionality either for sale to the public or for specific client needs.
- Core Contributor – Core contributors are a group of developers that actively contribute to the WordPress core code itself.
Developing for WordPress – and Introduction to How WordPress Works, Theme Structure, Template Tags, and the Loop
This is going to be a very challenging write up, particularly because the title of this section could easily encompass multiple blog posts for each element. My goal is to provide as many of the best resources for each element and give you a basic understanding of how WordPress works, how themes are structures, what template tags are, and how to use the Loop.
This guide assumes that you have a basic understanding of HTML/CSS. If you don’t, I recommend the following resource to get up to speed: HTMLDog.com.
Developing Locally Using XAMPP / MAMP
I highly recommend installing a local copy of WordPress using XAMPP (for Windows) or MAMP (for Mac). XAMPP and MAMP run a local php/mySQL setup on your machine that allows you to install and run WordPress locally. I can develop in realtime without having to upload changes online. Instructions for getting setup are here:
What is WordPress / How does it work?
It helps to start with a general understanding of what WordPress is and how it works. Wordpress is a PHP-powered content management system. PHP is an open-source programming language used to power millions of dynamic websites. mySQL is an open-source database software that stores information. Think of it this way — PHP is the language that communicates with your mySQL database where all of your website’s content is stored. We use PHP to retrieve information from the database by sending ‘queries’ to the database. When you run ‘the famous 5 minute install’, WordPress is setting up several tables (using mySQL commands) within your database to store your posts, site options, user information, comments, terms/taxonomies, and term relationships. The following links are excellent resources to gain a better understanding of the database, PHP, mySQL, and the WordPress inner-workings. Read them over and email me or call me if you have any questions, I’d be happy to answer:
Introduction to Themes
What is a Theme?
Taken from WordPress Codex:
Fundamentally, the WordPress Theme system is a way to “skin” your weblog. Yet, it is more than just a “skin.” Skinning your site implies that only the design is changed. WordPress Themes can provide much more control over the look and presentation of the material on your website.
A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files. A Theme modifies the way the site is displayed, without modifying the underlying software. Themes may include customized template files, image files (*.jpg, *.gif), style sheets (*.css), custom Pages, as well as any necessary code files (*.php). For an introduction to template files, see Stepping Into Templates.
Let’s say you write a lot about cheese and gadgets. Through the use of the WordPress Loop and template files, you can customize your Cheese category posts to look different from your Gadgets category posts. With this powerful control over what different pages and categories look like on your site, you are limited only by your imagination. For information on how to use different Themes for different categories or posts, see The Loop in Action and Category Templates.
Put simply, themes are what control how the content of your site is displayed. By default WordPress ships with the Twenty-Ten and Twenty Eleven themes. You can find them in your WordPress installation directory under /wp-content/themes/. If you look in these folders, you’ll see a group of PHP files with names like header.php, footer.php, index.php, etc. I encourage everyone to open these files up and inspect them. Do this with every theme you come across and start to play around with them (on your local server). You can learn a lot just by adding and removing elements from the theme files and seeing what happens and why — deleting elements from the header and footer, for example.
Changing themes will not affect the content of your site because the ‘content’ is stored in database. It’s important to realize this if your theme files get hacked. Even if you delete your theme entirely, your content is still stored in the database, hanging out, ready for a theme to tell it how to display on a webpage.
Back-End vs. Front-End Development
These are terms you’ll inevitably encounter in the development world. I’m going to quote Ian Peters-Campbell here for a great explanation from Quora.com:
Backend development means the part of the system that isn’t user facing: the databases, big algorithms, etc. In the modern day that usually means a server.
If you use the metaphor of a car you can think of the frontend developer as the guy who installs the leather seats, steering wheel, pedals, shifters, and the stereo. The backend developer is the guy who puts in the engine and the transmission.
How does this relate to WordPress development? Think of theme design and programming as front-end development. The theme, because it controls the user-facing side of the website, is considered front-end. Even changes to the WordPress dashboard are considered frontend, because they are still things that you see. Backend development can be creating plugins that interact behind the scenes with the WordPress database or actual changes to the WordPress core itself (things you wouldn’t see).
WordPress Theme Anatomy
A WordPress theme is a collection of files within your /wp-content/themes/YOUR-THEME folder in your WordPress installation. Each file within the theme controls a specific piece of your theme, such as your header, sidebar, and footer files. It is possible to make these pieces ‘dynamic’ – adjusting for whatever page you’re on – for example, changing the header when on a certain blog category page, however most of the time these elements remain static. For a quick overview of static vs. dynamic websites, please read this. Technically the only files your need to have a working WordPress theme is the index.php files and the style.css file. Most themes you’ll encounter and develop will usually contain the following files (taken from WordPress Codex):
- Style.css – The main stylehseet. This file must be included with your theme, and must contain the information header for your theme
- Index.php - The main template. If your theme provides its own templates, index.php must be present
- Comments.php – the template that controls the display of user comments
- Home.php – The home page template, which is the front page by default. If you use a static front page this is the template for the page with the latest posts
- Front-page.php - The front page template, it is only used if you use a static front page
- Single.php - The single post template. Used when a single post is queried. For this and all other query templates, index.php is used if the query template is not present
- Single-<post-type>.php - The single post template used when a single post from a custom post type is queried. For example, single-books.php would be used for displaying single posts from the custom post type books. index.php is used if the query template for the custom post type is not present.
- Page.php - The page template. Used when an individual page is queried
For a great infographic breaking down the anatomy of a WordPress theme, check out this infographic by Joost de Valk: Anatomy of a WordPress Theme by Joost de Valk.
A template tag is code that instructs WordPress to “do” or “get” something. In the case of the header.php template tag for your WordPress site’s name, it looks like this:<h1><?php bloginfo('name'); ?></h1>
The template tag is <?php bloginfo(); ?> wrapped in an H1 heading tag. The bloginfo()tag gets information from your User Profile and Options > General in the Administration Panels. In the example here, the word name inside of the quote marks in the tag instructs the tag to “get the blog’s site name”. This is called a parameter.
There are numerous tags at your disposal for outputting the date, the author of the post, the permalink, the category, the post content, etc. For a full list of all available template tags, check out the full list from the WordPress Codex.
How do you use template tags?
One of the first questions I usually get asked is where to put template tags. You put them in your theme files. Since the theme files are controlling the information that is output to the front end of the site, we use template tags within the theme to control which information we are displaying. Using the example above of:
We could wrap that information in <title> </title> tags and put it in our header.php theme file. Whenever the header is loaded, it will use the bloginfo(‘name’) template tag to make a request to the database to get the blog name, then output that information within the <title> tags on the frontend of the site. Certain template tags are meant to be used within the Loop and others outside of the Loop. I’ll dive into the loop in the next section.
Resources for Learning More About Template Tags:
- List of All Available Template Tags (WordPress Codex)
- Stepping Into Template Tags (WordPress Codex)
- Template Tag Broken Down by Category
- Anatomy of a WordPress Template Tag (WordPress Codex)
- How to Pass Tag Parameters (WordPress Codex)
From the WordPress Codex:
The Loop is used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML orPHP code contained in the Loop will be processed on each post.
When WordPress documentation states “This tag must be within The Loop”, such as for specific Template Tag or plugins, the tag will be repeated for each post. For example, The Loop displays the following information by default for each post:
Other information about each post can be displayed using the appropriateTemplate Tags or (for advanced users) by accessing the $post variable, which is set with the current post’s information while The Loop is running.
The Loop is where the magic happens. It’s the most important WordPress feature you will need to understand to build your own themes or modify existing themes. Take time to read through the links and resources below and play around with some code yourself. The sooner you start messing around coding your own loop, the sooner you’ll understand the mechanics of it. A solid understanding of the loop is what separates casual WordPress users from beginning WordPress developers.
How to Use the Loop
The loop is placed within theme files to make a query to the database requesting posts, then outputting them. In its most basic form, the loop looks like this:
Let’s walk through that step by step in English, explaining what each line is doing so you can better understand it:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
This line opens the loop with a conditional ‘if’ statement. It determines if there are any posts and won’t proceed to the next portion if there are no posts. The next chunk of code initiates the ‘while’ loop – executing its contents while posts exist. It will end when there are no more posts to output. ’the_post()’ calls up information about the post and sets up the global $post variable. An important element to note is that this is a ‘while’ loop, so the section outputting the post title and content will run multiple times, outputting all posts until the loop is finished when there are none left to display.
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<?php the_content(); ?>
This next chunk of code is what will be output multiple times within the loop – as many time as there are posts. For each post, the loop will output a div with a class of post_class(), a template tag function that outputs various post-related classes to the div tag, useful for styling the post div later. The ID of the div will be post-[the post ID]. If the ID of the post is ’1′, then the ID of the first div will be #post-1. This gives control over styling individual divs and adding custom styles to elements. Next we output a link to the post using the_permalink(); function and the title of the post using the_title(). We wrap the link and the title in the header 1 tag. The last function, the_content(), outputs the content of the post. Lastly, we close the div. It’s important to understand that this chunk will be executed multiple times — hence ‘the loop’. It will be iterated over for each post, outputting the information specific to that post.
<?php endwhile; ?>
<?php else : ?>
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<?php endif; ?>
There are a couple things going on in this last chunk of code. The first part is an ‘endwhile’ statement – this closes the ‘while’ loop that we opened earlier with ‘while(have_posts())’. The ‘else’ statement isn’t required in the loop but I prefer to use it. It is the code executed if the opening ‘if’ statement returns false. The opening statement in this case is ‘if (have_posts())’. Therefore this code will run only if there aren’t any posts that match the query. So using the code above, if there aren’t any posts, we will output a div with a header 1 tag telling the user that there are no posts found matching those criteria. The final ‘endif’ statement closes the opening ‘if’ statement and closes the loop entirely.
Resources to Better Understand the Loop
- Introduction to the Loop (WordPress Codex)
- The Loop in Action (WordPress Codex)
- 4 Ways to Loop with WordPress
- Ultimate Guide to the Loop
- WordPress Cheat Sheet – The Loop Code Snippet
- A Beginner’s Guide to the WordPress Loop
- Coding the WordPress Loop
- WordPress Loop Tutorial Screencast
- PippinsPlugins.com - Pippin Williamson is one of the hardest working individuals in the history of mankind, as far as I can tell. I try to set aside time each week to work through his tutorials because they provide real-world application of the WordPress development concepts. He will walk you through how to build plugins from scratch. I highly recommend investing in the premium membership.
- WP Tuts+ - Another great tutorial site dedicated to providing quality WordPress tutorials. The topics covered range from building themes from scratch, basic plugin development, structuring workflow, and general development techniques. Try to set aside time to do a tutorial each week. You’ll start to absorb the coding practices and approaches to common WordPress problems.
You are inevitably going to get stuck many, many times along the way while developing for WordPress. Fortunately there is a huge, vocal community of WordPress enthusiasts standing by ready to answer your questions. Chances are, your issue have been encountered before and others have a solution. When posting questions to forums, make sure to be as thorough as possible when describing your problem. Oftentimes people will get frustrated when they don’t immediately receive an answer. If no one can understand you question or what steps you’ve taken thusfar to solve it, they probably won’t bother helping you out. Be specific — describe exactly what you’re trying to accomplish, what steps you’ve taken to get there, and what issues you are running into.
- Professional WordPress Design and Development
- Professional WordPress Plugin Development
- Smashing WordPress Themes
- Build Your Own Wicked WordPress Themes
- Beginning PHP/mySQL: From Novice to Professional
- PHP For the Web: Visual Quickstart Guide
People to Follow on Twitter
- Andrew Nacin (@nacin)
- Alex King (@alexkingorg)
- Bill Erickson (@billerickson)
- Carl Hancock (@carlhancock)
- Cory Miller (@corymiller303)
- Mark Jaquith (@markjaquith)
- Matt Mullenweg (@photomatt)
- Mike Schinkel (@mikeschinkel)
- Nathan Rice (@nathanrice)
- Peter Westwood (@westi)
- Jeff Starr (@perishable)
- Joost de Valk (@yoast)
- Justin Tadlock (@justintadlock)
- Silviu-Cristian Burcă (@scribu)