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. Here’s the process I use.
1. Plan and wireframe your theme.
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. The main page layouts I wireframe are the home page, post page and a general archive page (for tags or category browsing and search result pages). That should cover you for a basic blog or informational site.
You’ll need a few tools to plan and revise your wireframe:
- Sketch pad. Before you start designing digitally, sketch out what you want on paper. I use a dot-grid notebook to figure out what I want on my homepage, for example, and where that content will go. Once I grid those blocks out and have the concept, then it’s time to make a digital wireframe.
- Digital wireframing app. Adobe Illustrator is a good choice if you have a design background because it lets 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.
2. Create your theme file.
You don’t have to start from scratch. One of my favorite tools is Underscores (aka _s), which is built by Automattic, the people that built WordPress. It’s essentially a minimalist boilerplate template that covers the WordPress website basics without styling or extras.
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.
3. Set up the standard WordPress functions and features you want to use.
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.
4. Pull all the dependencies you want for your theme.
If you want to add sidebars, scripts, stylesheets or other functionality, this is where to do it. 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.
5. Build your front-end functionality.
What do you want to appear on your site? This step is where you build it.
It’s helpful to start with the content that will appear on every page. For example, I set up the header and footer first. I also usually add a home.php, duplicated from the index.php, so I can build a custom home page where I usually start I create the header and footer code.
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.
6. Build your front-end functionality.
What do you want to appear on your site? This step is where you build it. It’s helpful to start with the content that will appear on every page. For example, I set up the header and footer first. I also usually add a home.php, duplicated from the index.php, so I can build a custom home page where I usually start I create the header and footer code. 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.
7. Test your theme template.
You can create test environments by setting up subdomains on your website’s hosting, or you can 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.
Check your test site on as many different devices and browsers as you can, to make sure your WordPress theme works right everywhere. When you’re satisfied that it looks and works the way you want it to, it’s time to take that last big step.
8. 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.
Eastlink Cloud Pvt. Ltd.
Tripureshwor, Kathmandu, Nepal
Phone:166001-95985
Mail:info@eastlinkcloud.com
