Wordpress Development Beginner's Guide

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.

Download the Slides for the Presentation Here

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.

For me, the most important element of beginning to understand WordPress development thusfar has been the ability to get things done for clients. I had a client call me last week who wanted several static pages to output related posts at the bottom of the pages, adjusted which categories show up on the homepage, and a few other tweaks. It was because of my understanding of the loop and how WordPress works that I was able to accomplish this with relative ease, and be able to say to her confidently “no problem, I can do that for you”. The previous developer she has worked with said it wasn’t possible to accommodate her requests within WordPress. I get these types of requests all the time, so a thorough understanding of what you’re about to read below will be immediately applicable.

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.

Frontend development is the part that users see and interact with. That includes the UI, the animations, and usually a bunch of logic to talk to the backend. In the modern day that can mean an app running on your iPhone or the HTML and Javascript in a web browser.

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.

Template Tags

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:

<?php bloginfo('name')?>

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:

The Loop

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:

Title (the_title())

Time (the_time())

Categories (the_category()).

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(); ?>

</div>

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(); ?>">

<h1>Not Found</h1>

</div>

<?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

Continuing Education

I’d like to close with a short bit on continuing education. It’s tempting once you get familiar with WordPress to slack off in pushing yourself to continuously learn more every day. Sometimes you’ll find you know ‘just enough to be dangerous’ and work your way through most jobs. But to truly become a top WordPress developer, you need to dedicate time every week to studying, coding, and continuing to learn. This is a very fast changing industry and it’s important to stay on top of it. Personally I set aside several hours each week to further my understanding of PHP, mySQL, and Javascript. I work with others on test projects, present whenever given the opportunity, and occasionally take projects outside my comfort zone to push myself. The following links are a collection of resources I’ve found most helpful for continuing to learn WordPress and its underlying languages, broken down by category, with notes/explanations.

Tutorials

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.

Forums/Discussion

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.

Books/General Reference

I find it has been greatly beneficial to have several resource guides as a base of knowledge. Because WordPress is PHP/mySQL driven, it helps to have a working knowledge of both languages. When reading these books, set aside time to try out what you’re reading. Type out the code! It’s easy to breeze through each chapter and nod your head as you follow along, but you’ll learn and absorb so much more by typing out the code you’re reading and experimenting with it. I dedicate time for one chapter per week in one of these books at a time. You’ll find the plugin development and theme development books extremely thorough and useful references – I use both of them on a regular basis.

People to Follow on Twitter

Blogs to Follow

Final Note

Thanks for taking the time to read through this. It means a lot to me to be able to help people out because I’ve received, and continue to receive, so much help from the WordPress community. If this guide has helped you in any way or could be improved in any way, please leave a comment and let me know. If you’re looking for WordPress development work for a personal or business project, feel free to contact me and get in touch.

resources, tutorials, wordpress

Intro to WordPress Development – Themes, Template Tags, and The Loop