There are thousands of WordPress themes available, but when you can’t find exactly what you want for your own website or for your clients DIY is always an option.Building a custom WordPress theme offers a lot of advantages that ready-made templates don’t provide always.
In building your own WordPress theme you can include the exact features your website needs and only those features. With this you won’t have to sort through a pre-built template’s dozens of features to find the sections you need to work on when it’s update time.
This also means you can create a site that loads faster because it’s not weighed down by features that you’re not using. To keep customers from getting impatient this is important for businesses. It can also help you improve your site’s SEO, because Google prioritizes sites with faster page load speeds.
What skills do you need to build WordPress themes?
Building a theme for a basic blog site is different from building an eCommerce theme.
No matter what kind of WordPress theme you want to make, it helps to know some PHP because you can’t build without it.
It’s pretty much a good idea to be familiar with WordPress before you begin, so that you have a knowledge of which features are standard across WordPress sites.
Patience is required to look things up in the theme development section of the WordPress Codex as you work, to answer all the little questions that come up as you’re building. Fortunately, finding what you need can be as easy as Googling “show [component] WordPress codex”–for example, “show featured image WordPress codex” or “show date WordPress codex.”
With some PHP know-how and WordPress sense, it’s possible to create simple custom themes even if you don’t know how to code. That’s because there are resources that can find code snippets you need to add functionality and features to your theme.
Well you may need help with the process, which is the core of this post. For example, if you’re brand-new to WordPress developing, you may not know what enqueueing a script is.
Pro tip: Enqueueing is a way to add stylesheets and JavaScript efficiently. That’s because these WordPress functions will cross-check against the core and plugin stylesheets and JavaScript to make sure that you don’t run into any conflicts. Enqueueing also helps to keep your theme code organized, so it’s easier for you or other developers to update. And these functions allow you to use included WordPress included libraries for faster theme-building.
How long do you think it will take to build a WordPress theme?
It varies, depending on the complexity of your theme idea and your level of skill. Forty to sixty hours is not a bad estimate.
If you are a beginner, much of that time will be spent looking up what you need to know. Experienced developers will probably use that much time to create more complex themes and get all the commands right.
If you ready to build a WordPress theme doing things in the right order will save you a lot of time, especially when you’re new at it.
Take a look at these steps:
- Plan your theme.
As with any web project, you should figure out what your theme is going to look like and what it’s going to do before you start coding.
You’ll need a few tools to plan and also revise your wireframe:
Sketch pad: Before you start designing digitally, sketch out what you want on paper, like where the content will go on homepage, for example, and where that content will go. After that the Digital wireframing app is next.
Digital wireframing app: Adobe Illustrator is a good choice if you have a design background because it will allow you lay things out easily, but there are other wireframing tools out there. You can even use the drawing app on your tablet or phone or Insert > Shapes in Word. If you can use an app to trace boxes, you can use it to make a simple wireframe.
- Create your theme file.
You might not need to start from the scratch. You can use Underscores which is built by Automattic, the people that built WordPress.
Start by entering the name of your theme-to-be on the Underscores homepage and clicking “Generate.” The site uses the latest build from the Underscores GitHub repo to create a ZIP file for you. - Set up standard WordPress functions and features you want to use.
When you download and unzip your Underscores theme file, open functions.php in Microsoft Visual Studio so you can edit code for the theme.
use microsoft visual studio to edit wordpress theme code
First, check to see which functions are already turned on. For example, search forms, comments and galleries are already activated in Underscores, so you don’t need to add anything to get those features. One menu and one sidebar are also already registered through the functions file in your theme, which you can copy, paste, and edit to fit your needs. - Pull all the dependencies you want for your theme.
This is where you add sidebars, scripts, stylesheets or other functionality. You can find the enqueue functions here that are required for any libraries you’ll need—like Bootstrap, jQuery, Font Awesome—plus any JavaScript- or CSS-based dependency files.
If your wireframe calls for multiple sidebars, like a social sidebar on your homepage and a “recent posts” sidebar on your blog page, you’ll register those different sidebars in the functions file. You’re not done collecting your code resources yet. Google’s jQuery library gives you the link to hosted JavaScript libraries that you can load on your site. They’re already on a CDN (content delivery network) which helps your site to load faster. - Build your front-end functionality.
This step is where you build what you want to appear on your site, you can set up the header and footer first, add a home.php, duplicated from the index.php.
Everything between them, like menus and sidebars, may vary depending on the page template. At this point, you can build your main index template (index.php), then the single post template (single.php), then the archives and any additional page templates you need. You can use the WordPress theme template hierarchy as a guide.
This stage is when you can expect to send some time referencing the codex, to answer questions like “How do I call the page title?” and “How do I call this list of categories and get it to display?” WordPress has very good documentation, but you can expect to toggle back and forth a lot as you work. - Style your theme template.
Once your code and front-end are all together, then it’s time for style. It’s most efficient to start your stylesheet with the mobile version of your WordPress theme, because that’s the foundational, minimal amount of styling.
Next stylesheet step is a small tablet, followed by a large tablet, then a desktop,and more styling as you go.
These are the media queries you’ll place at the end of your mobile stylesheet to target these progressively larger devices (“…” is where the style code goes):
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { … }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { … }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { … }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { … }
Working in this order helps keep your code clean and ensures that your theme looks good on all kinds of devices.
- Test your theme template.
You can create test environments by setting up subdomains on your website’s hosting, or rather get VPS hosting for a separate, private sandbox. There’s also an application called VVV you can download from GitHub and use to build your test site locally on your computer.
Make sure to check your test site on as many different devices and browsers as you can, to be absolutely sure your WordPress theme works right everywhere.
- Publish your WordPress theme!
When you’re done testing through VVV, zip up the theme folder like you would any other folder on your computer (right-click “compress” or “archive”) to create a version of the theme you can upload through the dashboard. If you have FTP access to your server, you can also use an FTP uploader. Then go to the Themes section of your WordPress dashboard, run your live preview, and when you’re ready, save and activate your new theme.
