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.
Every designer can benefit from free PSD mockups, and man do I have a resource for you today! A website called PSD Covers has one of the largest and most comprehensive free PSD mockups I have every found on the internet. But not only that, they come as Photoshop actions so you literally design what you want and drop it onto their pre-made template. Once you are done you simply click play in the actions panel and watch your mockup come to life right before your eyes.
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.
Here is an amazing video giving Google tips for responsive design. Whether you are a business owner or a developer, you need to be aware of the changing standards of web design, development, and SEO strategies. For the past couple of years we have heard the internet chatter on responsive design and how we should be using it. Some people listened, while others said “Yeah Yeah, Maybe Later”. If you happen to still be one of those people on the fence about it let me give you a few solid reasons why you should quickly jump on this train.
- Mobile devices are accessing the internet 60% of the time. (InMobi)
- Do you read emails on your phone or tablet? Mobile devices open 51% of emails. (Litmus)
- Mobile consumers are searching the internet first during their shopping process. Search engines make up 48% of those searches. (Google)
- Within one hour of mobile searching, 70% of people will take action. That high percentage only happens on websites that are mobile-friendly. (iAcquire)
- People only spend 40% of their social media time on a desktop computer, the other 60% is on a smartphone or tablet. (Business Insider)
If that doesn’t make you want to make your site responsive, go check out your Google Analytics and see what percentage of people are browsing mobile. If you happen to see a high bounce rate from mobile users that should tell you that your site isn’t user friendly or appealing to them at all.
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.
Have you every wondered why you should build WordPress themes from scratch? Well, I have compiled 10 reasons why I build WordPress themes from scratch as opposed to hacking another theme. This isn’t going to be one of those articles that bashes the use of professional themes or child theming. Most people start out using free or paid themes to develop with, because it helps get us used to how WordPress themes work and it can speed up the dev process. I wouldn’t be where I am today if I hadn’t hacked apart a theme or two.
When Should You Buy Or Hack A Theme?
There are times that you should purchase a theme or grab a free one if it suites your needs. If you’re a business owner and you just started the business, there usually isn’t a budget for a website. If you happen to be apart of a non-profit organization that has just started or all of it’s funding is used elsewhere, grab a $40 theme and add your content. There are some really great WordPress theme developers out there creating beautifully designed and highly functional templates.
When Should You Build WordPress Themes From Scratch?
If you are a developer and you have been hacking themes for a while, you should start building themes from scratch. It is a great learning experience and it will take your skill level way up. If you are a business owner and have a website already, I would recommend looking into a developer that can build you a custom solution. If your website is looking old, isn’t working for you rather against you, you aren’t being found on search engines, or all of the above you should upgrade. If you fit into any of these examples, this article is for you!
There are many articles on the web that explain the template hierarchy within WordPress but I wanted to write one about the WordPress Template Hierarchy for developers. Something that drastically opened my eyes to the power the WordPress Core developers have given us. The purpose of a template hierarchy is to not only allow you to develop more quickly and easily but to have backup support in case something happens to one or two of your files. It allows within your development to cover all of your bases or choose to only code the basic necessities. Ultimately, it is the skeleton of your theme and we need to know how to manipulate it and put all the bones in the right place.
Learn The Basics First
The first thing I would recommend doing if you haven’t already is go check out the WordPress template hierarchy on the codex. The explanation they give is really good actually. For some, especially beginners, it may look like lorum ipsum in some spots. After you read through that article, this article will give you a little more in depth information along with things I have experience in my daily theme development.
Google has always been a powerhouse in the acquisition of new and upcoming technology. So when you see them buy something from another company you know that it is gonna be something special. To give them an edge up from their already wonderful Google Translator, they have purchased Word Lens from a company called Quest Visual. This new app is a visual language translator that works through the built-in camera on your phone or device.
How Does It Work?
Once Google got their hands on it they turned it over to the public for free! That’s right folks, go download the new Google Word Lens App from the Android Play Store or the Apple App Store. You can currently use the trial version of it for free. When you first download it you will receive a few language packs for free. Then when the trial period is over the app will still be free to download but then you pay for the language packs you want.
The app is very easy to use and so far has only had a few inaccuracies. Simply open the app, point your camera at the language you need to translate, preferably something like a sign or something with larger letters. I found that it doesn’t work well with long bodies of text and small font size. The screen literally translates the language visually and replaces the language on the sign into the language you have requested. No joke! I had to download it and try it myself.
Watch the YouTube video from Quest Visual and see the new Google Word Lens App in action.