7 Hacks to Develop Better WordPress Themes Faster

Developing a WordPress theme is a big undertaking. There are so many elements involved and skills required; it can be a really time-consuming project.

The strategies below will help you develop your next theme faster. And no, you won’t sacrifice quality, in fact, your themes will probably turn out better.

Here are 7 different ways to develop your next WordPress theme faster.

Learn how to create your first WordPress theme from scratch in my brand new course: View the course.

1. Build mobile first

Developing mobile first has a lot of benefits and one of them is saving time.

Not only does desktop first make it tough to eventually fit your theme into a 320px screen, it requires more code.

How does it require more code? Check out this example.

Here we’re styling hypothetical footer widgets to fit in one-column, then two, and finally three in a row at 720px wide screens and above.

/* DESKTOP FIRST EXAMPLE */

@media all and (max-width: 1200px) {

	/* base styles go here */

	.footer-widget {
		width: 33%;
		float: left;
	}
}
@media all and (max-width: 720px) {

	.footer-widget {
		width: 50%;
	}
}
@media all and (max-width: 480px ) {

	.footer-widet {
		width: 100%;
		float: none;
	}

}

/* MOBILE FIRST EXAMPLE */

/* base styles go here */

@media all and (min-width: 480px) {

	.footer-widget {
		width: 50%;
		float: left;
	}
}
@media all and (min-width: 720px) {

	.footer-widget {
		width: 33%;
	}
}

In short, the desktop down approach cascades the wrong way. The difference? An extra media query and additional code.

In the mobile first approach, the widget divs start as block level elements, so there’s no need to define a width or turn off float later.

2. Use a CSS preprocessor

SASS or LESS, it doesn’t really matter as long you use one. Among the many benefits, setting mixins and variables to use in all your themes saves a ton of time.

Do you remember exactly how to set a clearfix? Do you?

Just let the preprocessor do the remembering for you:

@mixin clearfix {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

/* in use */

div:after {
	@include clearfix;
}

You don’t have to be a wizard with SASS and know all the functionality it offers to start saving time with it.

By the way, if you use a preprocessor, we’ve got a sweet list of SASS & LESS variables for the colors of the most popular social media sites you cany copy for your own stylesheets.

3. Save post formats until the end

Post formats were a disaster in my first theme.

If you start to design post formats before your design is completely finished, especially if you use custom template parts for them, you’re creating extra work for yourself.

A small adjustment to the way excerpts are displayed on the homepage could lead to updating multiple files and styles to keep all the post formats looking right. Instead, save post formats until the end.

Maybe I’m the only dummy who did this, but as long as I save one developer…

4. Hack now, refine later

If you’re adding new functionality to your theme, let’s say a sliding animation to navigation items, don’t worry about writing perfect code on your first go through.

You may end up deciding to scrap it later because it doesn’t fit the aesthetic of the theme. That’s time wasted if you tried to make it perfect.

Write something ugly that works even if it doesn’t work when the screen is resized – whatever. Don’t worry about it for a while and then come back to it with fresh eyes to make stylistic adjustments and rewrite the code in a smarter way.

5. Start with the same core – learn it by heart

Whether you adopt someone else’s base theme or build your own from scratch, learn it by heart. Knowing your code in-and-out will make you more confident and comfortable working on your theme.

It will also let you style your theme faster because you won’t have to use dev tools to check the class of the div you want to style. You’ll instinctively know which element you want to style and what it’s class is.

Also, when you’re familiar with every line of code in your theme, you’ll be able to quickly assist any customers who need support. Having issues with unfamiliar code could be potentially time-consuming.

6. Use Hybrid Core

Hybrid Core is a true framework in the sense that it is a drop-in code library. It’s not a base theme that you build off of, but rather a collection of functionality that you can add at your own discretion.

Hybrid Core will do so many things for you, and do them well. For instance, if you wanted to add support for widgets in the footer and after blog posts, you could do that with a single line of code:

    add_theme_support( 'hybrid-core-sidebars', array( 'subsidiary', 'after-singular' ) );

You still want to be familiar with the code you’re adding, but studying how any feature of Hybrid works takes much less time than coding it yourself and you’ll learn a thing or two along the way.

7. Have Multiple Sets of Dummy Content at Hand

Developing with the WordPress unit test data from the start is a mixed bag. You’ll catch a lot of style issues right off the bat. However, it’s not the most realistic representation of a user.

For instance, you might end up leaving 20 menu items in the nav bar while you develop and then later find out that it looks bland and empty when there are only 4.

You also don’t want to treat yourself to perfect content the whole time and then shock yourself with the unit test data after you’re done either. While working on your theme, have different dummy content to import just to switch things up. It may even bring out different creative insights.

Related Posts

2 Comments

  1. Very useful.good job.i am learning WordPress , in order to build a theme . Now it seems there are so many theme in the market, how is the future of WordPress theme development.?
    Thank you.

  2. Thanks for sharing this is very helpful! I’ve only just started using word press for my blog and found its a pain when testing out my site on different devices as they aren’t always compatible.

Post a comment

Your email address will not be published. Required fields are marked *