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