Sidebar.php is the next template file we will learn in our Let’s Build A WordPress Theme From Scratch tutorial series. As I am sure you have guessed from the name of the file, it handles the code that displays the content of your sidebar. Sidebars have been a common structural element in websites for years. Really anything can go in a sidebar but I prefer to “widgetize” my sidebars so that the user/client can dynamically include/change what displays. Widgets come standard with any WordPress install and give you the ability to drag and drop mini-plugins into your website and have certain things happen: like maybe a contact form or a dynamic list of categories. These can also be extended by searching the plugins section of WordPress to find more. When you build a WordPress theme you should always think about what type of functions you might want or need and go out and research plugins that might accomplish your needs. Once you have all of the widgets you want…you need to have a “widgetized” area ready to drag those widgets into so they display on your website. We are going to talk about how sidebars work in WordPress and how we can create these widget areas so they can be used throughout your build.
In today’s Let’s Build A WordPress Theme From Scratch tutorial we are going to go back and look at the blog and work with single.php. We talked about home.php in my second article in this series and how it controls/displays your most recent posts. When you come to wpdevsolutions.com, the landing page of my website displays the most recent articles I have written. This means that I am using home.php to display those posts. You have now clicked into this article and can now read the full tutorial. You are currently on single.php! It contains a lot of the same information we have seen in other php files but I will show you how we have to change up the code just a little in order to show the full content and a few helpful items you should include on a single.php file. Let’s look at the code from my theme from scratch example.
Today on Let’s Build A WordPress Theme From Scratch, our tutorial will look at the template file page.php which controls what is displayed on each of your pages. As you know, in WordPress there are posts and there are pages. When we build a WordPress theme we need to think about them separately because there are php templates that hold the code for the blog/posts and others that hold the code for the pages. For pages there is actually only page.php but there are instances where you would use a variation of it. For example, what if you don’t want every single page on your website to be structured and styled the same way? WordPress has you covered! It has the most intuitive naming scheme on the planet, in my opinion, and it allows you to do very powerful things. As you will notice later in the course, this naming structure works for many other template files as well. Let’s dig into it!
Are you ready to dig into another installment of Let’s Build A WordPress Theme From Scratch? Today we are going to talk about another three files that if used together can really be an asset if your viewer happens upon a page that doesn’t exist. We all want to be well oiled machines when we develop and try to never forget anything but sometimes, even we make mistakes. So we need to take the proper measures to prevent one of our mistakes affecting our audience. This is accomplished by setting up a 404 error page. In WordPress we use a template file called, you guessed it, 404.php. There isn’t any mandatory code that needs to appear in this template file. It doesn’t have to be anything special, but I recommend that you do make it special! Even as developers we need to think about a user’s experience. If they have landed on a broken link then that is already not a very good experience on your website. You want to add in a statement that is lighthearted, plus provide them a few options of how to get to where they were trying to go. This is your chance to use slight of hand to make your viewer unaware they landed on a broken page on your website. Let’s look at the code for the 404.php file below.
Continuing with my full tutorial on building a WordPress theme from scratch, I will be talking about three very important files: home.php, front-page.php, and index.php. I am combining these three into one tutorial because based on decisions you make will determine which of these files will be your “landing page”. Think of it in terms of regular, static html sites. We typically put everything inside of the index.html file and your browser knows that this is the file to look for. In WordPress it is a little different because it is based on specificity. HUH!?! Yeah I just through that word in there to see if you were paying attention. What I mean, in plain English, is that the more specific you are with your naming of files the better WordPress knows what you are telling it to do with that particular file. None of this is going to make sense until I show you a few of the important options WordPress needs to know before starting development. Let’s dig in a little deeper.
Quite a few people have been asking me lately for a tutorial on how to build a WordPress theme from scratch. So I have decided to write out a full tutorial, exposing all my tricks and secrets. This tutorial is going to break the process up into many parts, each focusing on a specific template file. I will show you not only why it is important to use this template file but how to use it properly. By the end of the series you will have the knowledge and experience needed to start building your own themes. But before we begin, you should understand that I build custom WordPress themes from scratch for business owners, non-profit organizations, and hobbyists. I won’t be showing you how to build themes like you would find on Themeforest.net or any other site that sells themes. Even if that is your goal, this series WILL help you get started because the process is pretty much the same. The only difference is that I won’t be teaching you how to build in a Theme Options menu where customers can change the theme to their hearts content. I know that this tutorial is going to help every aspiring WordPress theme developer get to the level they want to be. Let’s get started with the Header.php file.
Today I am going to give you two simple ways of creating IE Conditional Comments in WordPress. I don’t know about you but I can’t wait for IE8 and below to die! It makes a developer’s job way more difficult than it needs to be. The reality though is that we have to support these later versions until then. There are tons of solutions out on the web but I want to give you guys what I have found to be the easiest for me. If you would like to learn a little bit more about Conditional Comments before you start just head on over to the WordPress Codex and read what they have to say about them.
If you build a responsive theme it is important that you know how to make YouTube embeds responsive in WordPress. There are a lot of solutions out there for this but most of them use a plugin that either makes you enter your videos through a shortcode or wraps all of your Iframes in a responsive wrapper. How about we take a little time to build it into our theme so that we aren’t cluttering our site up with more plugins. It is actually really simply!
So you have built a beautifully responsive WordPress theme that works on all devices. Then you or your client adds a YouTube video into their content…ya know for better SEO…and it shoots out the right side of the screen! Now it looks completely broken. You, as a detail oriented web developer, want to make sure that any YouTube video will be responsive inside your theme. But you also know the importance of keeping your site as lightweight as possible so we don’t want to just go add ANOTHER plugin.
Custom taxonomies in WordPress can help you extend the standard ‘Categories’ and ‘Tags’ in your posts. They can also help extend WordPress custom post types if you have created one. Sometimes we run into situations where ‘Categories’ and ‘Tags’ just aren’t enough. Maybe we want to separate things out a little further. That’s what we are going to learn today.
What if you had a project where you were going to apply ‘Categories’ and ‘Tags’ to their posts but also something that would function similarly but called…oh I don’t know…Post Status. Let’s say these posts are being written by many people’s contributions and they need to show that a post is in the creative writing phase or in the proof reading stage. You would be able to harness custom taxonomies in WordPress to accomplish this. Once it has been created, it will show up underneath your ‘Categories’ and ‘Tags’ in the dashboard post menu.
Maybe we need another example. What if your client was a architect. They want to be able to write a blog post about drawing the floor plans and set a category of ‘Drawing Phase’. Then when they begin building the structure, they want to come back into that same blog post and write about the building process. So they would then change the category from ‘Drawing Phase’ over to ‘Building Phase’. Or if they had the taxonomy set as a tag then each phase could be added on as they go. This would require a custom taxonomy called ‘Phase’.
At the end of the article I will explain how to create custom taxonomies in WordPress for the standard post type. For now I will tell you about how to do it with a custom post type because that is where I worked with them in my recent project.
In my last article I wrote about creating custom post types in WordPress. I recommend you read that article before reading anymore. In that article I mentioned a client who needed a separate post type to display animals that were up for adoption. They had a few custom taxonomies they needed such as ‘Cat Breeds’, ‘Dog Breeds’, an overall ‘Pet Category’, and a ‘Pet Status’ such as Adopted or In-Active.
This article will teach you how to implement WordPress custom post types. Knowing how to code WordPress custom post types from scratch opens the door to vast possibilities, not only for you as the developer but for your clients as well. WordPress has always been a powerful tool, but with this knowledge you can turn a basic blog website into a massive, multilayer powerhouse.
I recently had a client come to us with a WordPress website that used it’s blog as a way to add and display animals that were up for adoption. They then add another WordPress site set up on a separate domain that had blog articles on it. When you clicked to read their blog, you would basically leave the main website and travel to another website. My goal in our redesign and restructuring would be to merge the two together. With WordPress custom post types I was able to do just that.
My vision was to have your regular ‘Posts’ link on the dashboard menu, then below it have a ‘Pet Posts’ link that would harness the same power the posts have but be completely separate from each other. Plus I wanted custom taxonomies instead of using the standard ‘Categories’ and ‘Tags’. This would allow our client to add blog posts and add pets on their main site and not have to log into a completely different dashboard to enter their blogs.