Developing a WordPress Theme

August 24th, 2014

This website has undergone a huge makeover. After much trial, error, and research, I have finally got a custom WordPress theme up and running. In this post, I will share with you some notes about what I’ve learned as well as some example code in case you want to get started in creating your own custom WordPress theme. (The theme folder is available to download from GitHub at here. Its version 1.0).

What is WordPress?

Essentially, there are two “forms” of WordPress. Firstly, WordPress (the software) is a content management system for creating custom website templates. It’s free and open source, and therefore, it can be customized to fit your needs. Secondly, there is wordpress.com, a blogging platform that runs on WordPress.

My WordPress Odyssey

This website, originally started as a simple wordpress.com blog. It used a free, pre-made theme called Mystique (version 2.5.7). It was a fairly basic blog, with blog posts in chronological order on the home page as well as an About page. To make my website easier to find, I bought a custom domain name, pumpkinprogrammer.com. Originally, it was pumpkinprogrammer.wordpress.com.

Initially, I was satisfied with this setup since all I was doing was basic blogging. I ran into my first roadblock when I tried to insert JavaScript code into a blog post. I was trying to make an interactive “quote generator” that would display random inspirational quotes when the user clicked on a button. Unfortunately, wordpress.com disallows the use of script in blog post and page content. Of course, this is for security reasons, but as someone who wanted to do more than just basic blogging, I was a bit frustrated with these limitations. I wanted my website to be interactive and responsive. Then, one weekend, I had an epiphany.

During the AngelHack hackathon, I learned about Bootstrap, a front-end web framework for making beautiful sites. It opened my eyes to a whole new world of website customization possibilities. With new tools in my arsenal, I knew I could never go back to plain, old-fashioned static sites. After that weekend, I bought server space on BlueHost and transferred my website to its new home. Free of the constraints of wordpress.com, I could do virtually anything I wanted! I could customize my website and add JavaScript wherever I pleased. In a few moments, I’ll describe what’s involved in creating a custom WordPress theme, but first let’s talk about Bootstrap!

What is Bootstrap?

Twitter Bootstrap is a free front-end framework for creating sleek, responsive websites. Bootstrap is basically a collection of CSS and JavaScript templates for customizing the front-end portion of a website (the back-end part of my website is handled by WordPress, which involves a lot PHP).

Some key features of this website that implement Bootstrap include the navigation bar at the top of every page and the way the social media buttons in the sidebar turn green when you mouse over them (or touch them with your finger on a mobile device).

What’s really cool about Bootstrap is that it enables your website to adapt to different screen sizes. That’s why this is called a “responsive” website. This site looks different on a smartphone than it does on a desktop with the browser opened up to full screen. For example, the navigation bar will display the page links as a vertical drop-down list instead of a horizontal array.

Developing a WordPress Theme

Now that you know a little bit about what you can do with Bootstrap, I’ll show you what I know about getting started in making your own custom WordPress theme. I warn you, though. WordPress is not exactly beginner-friendly and can be very frustrating, so it may be a good idea to sit down with a stiff drink and be prepared to scour the Internet for hours trying to find the solution to some mysterious little bug.** I’m hoping to spare you some of the initial frustration that may dissuade you from wanting to get started by providing a brief overview of what you need to get started.

Before you begin, you must, of course, install WordPress on your server (I’m currently using version 3.9.2 of WordPress). After that, locate the themes folder on your server’s directory. In the themes folder, you should find subfolders with names like “twentyfourteen” and “twentythirteen” for pre-made default themes. You can place my custom theme folder, “wpbootstrap,” in the same directory as the other theme folders. Click here to download the example theme from my Dropbox.

After you download the example theme, you can upload it to your themes folder. Then, in the WordPress dashboard (the administration console), you can select this theme and see how it looks on your site. It will probably look crappy on your website since I tailored this theme for my content. The purpose of this exercise is to demonstrate how to upload and activate WordPress themes.

If you examine the PHP files in the pumpkintheme folder, you will find some essential WordPress theme components:

  • In header.php, you will find code for the navigation bar at the top of the page and for displaying the favicon on the browser tab. In this file, you place HTML head code in general.

  • In sidebar.php, you can specify how you want your sidebar to look. This is where I include widgets such as pumpkin social media buttons and a list of blog categories.

  • In footer.php, there is code for customizing the bottom of the page as well as code for closing the HTML body tag. This is where I included copyright information and an orange horizontal line to separate the bottom of the page from the page body.

Behind the scenes, there are special files for specifying the template for blog posts and pages. These are in the same folder as header.php, sidebar.php, and footer.php:

  • In index.php, you can customize the way your homepage looks. Alternatively, you can create a homepage from your WordPress dashboard. After you create the homepage from the dashboard, be sure to go into settings > reading to set the front page as Home. That’s the way I did it. Also, this is where I placed “The Loop” for iterating through my blog posts. So instead of index.php defining my home page, index.php defines the page called Blog.

  • In page.php, you can control the way pages look. You can think of this as a skeleton consisting of things like a header, sidebar, and footer. For clarification, pages are not blog posts. Instead, they are pages you typically access through a navigation bar.

  • In single.php, there is code for controlling the way individual blog posts look. So this is the “skeleton” or template for blog posts. Like pages.php, I included PHP code for displaying the header, sidebar, and footer.

  • My site doesn’t include a comments.php since I’m too lazy to moderate comments and I tend to get a lot of spam whenever I do enable comments. This is where you would write code to customize the way comments look on your site. In addition to comments.php, there are other optional files such as archive.php, category.php, and tap.php.

  • In functions.php, you can specify functionalities you want in your website. For example, I put in some PHP code for controlling the length of blog post excerpts on the Blog page.

  • In style.css, you can customize the way your website looks with CSS classes. In here, I included code for making the highlight color for Bootstrap hover tables bright green.

The most important piece of code in your theme is probably “The Loop.” Basically, “The Loop” is PHP code for querying posts and displaying them on a page in list format. In my index.php file, you can see how my loop works. It gets all of my blog posts and displays their titles, dates, excerpts, and featured images (a.k.a. thumbnails).

Resources

Here are some resources for getting started with WordPress and Bootstrap:

Notes:

** One example of my many frustrations with WordPress was trying to get the Bootstrap carousel to stop inserting blank slides after the last real slide. After several hours of careful debugging, I found the rather unexpected solution on a GitHub message board. WordPress had been automatically inserting characters into my page content, so I had to copy-paste a special function in the functions.php file to stop WordPress from ruining my carousels.

/* Stop WordPress from adding those annoying closing paragraph tags */
  remove_filter( 'the_content', 'wpautop' );
  remove_filter( 'the_excerpt', 'wpautop' );

Categories: designtechnology