As WordPress forges ahead into v4.6+ we’ve seen a lot of changes in the ecosystem. It’s easier than ever to create multifaceted themes with dozens of editable features like custom post types, taxonomies, template styles and alternate homepage designs.

But how do all these features work in a typical theme dev pipeline? In this post, I want to share the best tips and techniques you can apply to WordPress theme development. You’ll learn how to craft brilliant themes from scratch and expand them further with modern WordPress features.

But let’s get started with some of the advanced methods of theme architecture.

Proper Theme Structure

Simpler WordPress themes can just place all their files into one directory. This is usually fine because there aren’t too many files in a basic theme.

01-wordpress-admin-dashboard

But more advanced themes can have many PHP files with added template files like category templates. These all need to be in the root of the theme, but other files can be organized into their own subfolders.

You still need the styles.css file in your root, but I recommend creating a /css/ folder to house any extra CSS files. You should also create an assets folder for theme-specific images and web fonts.

If you do a lot of PHP development then you might also create a PHP includes folder. This is a great way to add PHP libraries to your theme or to keep your functions separated into different files.

I like to break up my functions.php file so that all the code is separated into different include files. Just use a PHP include to add all the different files into your functions.php file. This keeps the functions file clean and it’s much easier to find whatever code snippets you might want to edit.

Developers call this modular development since it breaks up the code into modules that can be edited separately or copy/pasted into other themes.

Try to be as modular with your development as possible. You can separate CSS files, PHP files, and JS files based on their functionality. Your theme will be much easier to manage and if you ever want to add more features you can just add another file.

All of the free yearly WordPress themes from Automattic come with well-defined structures. For example, Twenty Sixteen is an excellent theme to clone for organizing your files.

But to dig a bit deeper check out these related posts:

 

Support WP Admin Features

The WordPress dashboard lets users do a lot of customizing without any code. It’s easy to change the site’s logo, background image, alternate through multiple color themes, and even drag & drop sidebars based on the theme’s design.

Whenever you look through magazine themes you’ll often find many homepages that come with different features for adjusting content based on size, placement, or context.

But these features need to be coded into a theme to have them all work properly.

I would highly recommend that you add these admin features to every theme you build. It makes them easier to manage and gives a professional tone to the work.

In the newest versions of WordPress 4.5+ you can update partials and see how they look in real time. This is all based on the Customizer API which lets developers register partials for adjusting the page layout.

These partials come in many different styles but they ultimately define parts of the page in your theme. Here’s a brief list of partials you can customize:

  • Header
  • Footer
  • Sidebars
  • Post/page content
  • 404 content
  • User comments area

Build your themes with functionality to swap these partials in the demo page to make it easier for site owners to work with your theme.

In fact, I’d recommend that you go through the entire theme customization API to see what’s available. Real premium themes offer everything a site owner could possibly need, and it should all be easy to use right from the admin panel.

As WordPress grows I’m certain more admin features will become available. Try your best to keep up but don’t add more than is needed.

Use A Theme Framework

A WordPress framework is the most powerful tool you can add to your arsenal. Frameworks offer security, custom features, and pre-built components that work right out of the box. You don’t have to write any custom code but you can build on top of these features to create powerful WP webapps.

The best modern WordPress framework is Unyson Framework. It currently runs in 40,000+ installs and it’s frequently updated to comply with the newest version of WordPress.

themefuse-unyson-framework-preview

With Unyson you can radically decrease the time you spend on WP development. It comes with dozens of built-in widgets, a custom WP backup feature, a contact form builder, and a drag-and-drop visual editor for all your site content.

Best of all this framework is completely free and it even comes with a separate plugin if you prefer that instead of adding Unyson directly into your theme.

Either way, this is undeniably the most valuable resource for building a new theme from scratch. It’s jam-packed with dozens of handy features for WP developers. Some examples include:

  • Drag & drop visual builder
  • Built-in SEO options
  • Custom sliders
  • Dynamic mega menus
  • Dynamic contact forms
  • Calendars & events
  • User reviews & feedback
  • Automated backups

My favorite feature is the rotating sliders widget. You just select photos you want in a slider and drag it onto any post or page. Unyson does the rest with custom styling and JavaScript to create a functional rotating slider widget. This video shows how you can build your own slider with Unyson.

But Unyson also works well for more specific tasks like on-page SEO optimization and creating breadcrumb navigation. The framework comes packaged with default widgets for more specific features like a calendar and a portfolio showcase.

Regardless of your development background, the Unyson framework can radically improve your WordPress theme dev workflow.

To download a copy visit the Unyson website or check out a preview of what this framework can do from the video below.

Theme-Specific Plugins

If you can build extra features that can be used universally on a WordPress site, then you could build these features into a separate plugin. But there’s nothing wrong with coding a feature as part of a theme so that it runs only when the theme is active.

This is heavily contested amongst developers and I tend to learn towards adding features right into the theme. This relieves bloat and makes it easier to natively implement your function or class into the theme.

Many of these extra functions add simple features like custom dropdown menu styles, extra post types, custom shortcodes with the shortcodes API or even extra buttons in the WP editor using the Quicktags API.

02-wordpress-quicktags-plugin

There’s so much you can add to your theme that doesn’t rely solely on the theme files themselves.

Many of these features already have their own free plugins. WP Quicktags for example adds buttons dynamically so you don’t have to code over the Quicktags API.

But a great WordPress theme can add these features right into the code to save users the frustration of tracking down individual plugins to solve minor problems.

Don’t be afraid to build extra features and tie them directly to your theme. Sometimes this is necessary depending on the type of theme, like with a social voting theme that lets users submit news links to the site.

This feature would be extremely detailed and very complex. It would work with the userbase and user roles along with a custom post type for handling submitted stories.

You could work with this as a separate plugin, but you can build a higher-quality theme if this feature is baked right into the codebase.

03-w3-total-cache-plugin

Sometimes it can be smarter to let plugin developers take over the more complex tasks. For example, caching with W3 Total is much easier than building your own custom caching engine.

But if you can’t find any solutions that work the way you want I highly recommend rolling your own.

Utilize Built-In Classes

Default WordPress classes can be generated for containers on every page. Take a look at this cheatsheet to get a clear overview of the many default classes.

Every theme you build should support all of these main classes. These include a sticky class for stickied posts along with other classes like .logged-in for users browsing from an account.

Or you can custom style your layouts based on the pages. For example, the body_class() function is great for customizing your archive pages(tags vs categories) or different post pages based on custom post types.

These minor details can get extravagant rather quickly so keep it all within reason.

Don’t be afraid to dig deep into the lower depths of WordPress. This CMS can seem really simple on the surface. And in many cases, the simple stuff is all you need.

But thankfully WordPress comes with so many extra features out of the box that you can get pretty complex, and it’s helpful to build themes that support these native features by default.

I prefer working with body classes because they always come at the top of the hierarchy. So you can define CSS selectors with something like the .page-child class and use this as a way to structure breadcrumbs for child pages.

These classes also tie into custom menus. If you let users design their own menus they can easily add dropdowns and tiered navigations, so you’ll need to design CSS that can support all of it.

If you define your theme’s classes appropriately you’ll have an easier time working with the default WP classes.

For more reading material check out these related posts:

 

Frontend Frameworks

JavaScript frameworks are quickly becoming the go-to solution for web developers. They provide a scaffolding for frontend development and they’re insanely powerful when used correctly.

One of the more popular frameworks is React.js. This isn’t an MVC or MVVM framework. Instead, it’s more like a view framework that handles data on the frontend. This can be valuable for single-page apps and for more dynamic websites.

04-reactjs-homepage

WordPress’ parent company Automattic even created a project named Picard which is built on a React foundation. Another more technical theme named Lexi lets you build a single-page React theme on the WordPress REST API.

If you want a simpler way to manage data bindings and control your theme then React is the way to go. Check out this guide on Scotch.io to find some helpful resources to get started.

But if you’re already comfortable with React then you’ll have no problem diving right into the action. For this I recommend following this three-part tutorial about how to create a functional mobile app with the WP API and React Native.

There’s so much you can do with React+WordPress that it’s truly mind boggling. If you can work React into your theme development you may find it quite pleasurable, although it’s best used for SPAs.

A similar library with a different technique is Angular. This JS framework lets you add code into existing markup to help you build dynamic webapps, and it can work perfectly on top of WordPress.

05-angular-homepage

There’s actually a free WP plugin called AngularJS for WordPress which adds the library right into your WordPress install. This plugin adds custom directives into the admin dashboard that you can move around or add to specific pages at will.

I suggest building a theme with Angularjs from scratch if possible. This gives you more control and it lets users disable Angular when they disable your theme, instead of needing to also disable a plugin along with it.

Thankfully you don’t really need to know much about Angular to get started. I found an excellent list of tutorials covering AngularJS+WordPress with a focus on the WordPress API. This way you can follow other developers and pick up tips for proper coding standards with WordPress.

JS frameworks are still very new so there isn’t much on the official WordPress website. But you can build anything if you know your way around the framework and the WordPress theming system.

One last framework I have to mention is Ember.js. It’s wildly popular because it offers so much functionality for routing and SPA development.

06-emberjs-homepage-feature

This is also probably the hardest framework to learn from scratch. It has a very steep learning curve but there are lots of amazing resources to help you learn Ember if you’re willing to put in the effort.

But I did find a really cool Ember+WordPress project on GitHub that helps you bridge the gap using the WordPress API.

This comes with a live demo and code documentation if you’re not sure where to get started.

But if you want a custom solution you can always add Ember.js into your WordPress theme and code everything from scratch.

All three of these JS frameworks are wildly powerful and they can all be used for single page app development on WordPress. If you already know how to write stellar JS code then you’ll have a rockin’ time building themes with any of these frontend frameworks.

Keep Up With Security

This is a tough subject because you can’t always keep up with all the bugs in every one of your WordPress themes. As the years go on certain functions get phased out and you can’t always be responsible for maintaining work you did for fun or for a small side project.

Thankfully most WordPress themes are built to run even with legacy support, so they aren’t open to as many vulnerabilities. But sometimes older functions can be depreciated making them obsolete in future versions of WordPress. You should be more concerned about these issues in your themes rather than the WordPress core itself.

You can check for depreciated content using the WP_DEBUG setting found in the wp-config.php file. This outputs any errors right to the page while developing so you simply can’t ignore them.

07-wordpress-debug-wp-function

With this enabled, you’ll have a much safer development process and you’ll be aware whenever you commit a security no-no.

Thankfully WordPress is an extremely secure platform. The issue is when you add extra code to the platform that connects into the database, or into other 3rd party APIs.

You can run something like the Exploit Scanner plugin to check for potential holes in your code. This won’t catch everything but it can help you solve some rather annoying problems that you might’ve missed otherwise.

Also, make sure to test your themes and all the features that you add to a theme. If you’re letting users add multi-level navigation links then be sure to test how this looks on a demo install. Same goes for any complex functions that work with form submissions, cookies, or POST data.

08-wordpress-docs-theme-security

There’s an excellent section on the WordPress website talking about WP theme security. It covers the basics of SQL injections and XSS attacks, two of the most common security breaches for a WordPress theme.

By educating yourself about security you’ll have an easier time building themes that can stand the test of time and run on WordPress for years to come.

The topic of web security is huge and there’s no way you can ever be 100% secure. But the goal is to mitigate risk and reduce any problems down as close to 0% as possible.

If you want to delve a bit deeper I recommend checking out these articles:

 

Moving Forward

There will always be new features for WordPress and new development libraries to improve your process. But as standards evolve it’s important to improve your knowledgebase along with them.

I hope everyone can take away some practical tips for modern WordPress theme development. Make note of anything that you want to remember and don’t be afraid to try new things! The more you practice building advanced WP themes the more you’ll learn and the better you’ll get.

there are 2 comments added

  1. Carolina Monteiro 23rd March 2018

    Hello there, I really like your website!

  2. Brett 7th November 2018

    "I tend to learn towards adding features right into the theme. This relieves bloat and makes it easier to natively implement your function or class into the theme." Completely agree with this. Especially if you're running multiple sites built on that theme.

Reset fields

back to top