A deep dive into creating wordpress themes from scratch

As a WordPress coder, whether you develop free or premium WordPress themes, testing is one of the most important steps in the entire theme development process. Theme is the soul of any website, so if it doesn’t function in the same way as it’s crafted, then the whole site becomes useless. Therefore, it’s quite crucial for a developer to have complete knowledge of theme testing in addition to the theme development.

In general, there are three phases in every theme’s development life cycle: planning and designing, development and testing, and delivery and maintenance. Delivering a bug-free theme require a developer to be much more cautious from the starting phase. In this article, I’ll take a look into what precautions a developer should take during the second phase that is development and testing. For your convenience, I’ve divided my article into three different sections:

  • Setting up WordPress
  • During Theme Development
  • Final Testing

Let’s start with setting up WordPress!

creating wordpress themes from scratch

Setting up WordPress

This is the first and foremost phase of keeping a WordPress theme away from any kind of bug and fault. Before you’re going to develop your theme, you need to set-up your development environment correctly. So that, all possible bugs can be prevented and in case a bug occurs, you could find it more easily. Following are some things you can do while setting up WordPress to ensure minimal mistakes:

 

Use WordPress Multisite Network:

To ensure as few installation-related errors as possible, I suggest you to set up a network for all the themes you develop. This doesn’t only provide you a secure path for your theme installation, but also guarantees you that your theme will also function properly on network installations.

 

Customize Table Prefix:

While installing database, don’t forget to change default table prefix from wp_ to something tricky. Using a custom table prefix will benefit you in two ways. First, it’ll simplify database queries. Second, it’ll tighten up the security of the database by adding an extra layer to it.

 

Switch on Debugging:

Mostly, developers forget to enable debugging before getting started on a new theme. This leaves trails of undefined variables in the code, which leads to decreased quality and efficiency of the final product. That’s why; you should always set WP_DEBUG variable, which is assumed to be false by default, to true in the wp-config.php file.

define( ‘WP_DEBUG’, true );

 

Disable Script Concatenation:

In the WordPress back-end, all script files are concatenated into a single URL which causes slowing down your dashboard. To avoid this, you have to disable script concatenation to make your scripts work separately. Add the code give below to your wp-config.php file:

define(‘CONCATENATE_SCRIPTS’, false);

Remark: In the production/testing environment, be sure to set CONCATENATE_SCRIPTS to true.

 

Advanced Query Analysis:

One of the best practices of testing a WordPress theme is to analyze all of the WordPress queries performed. To save all the queries into a variable, all you need to do is to set SAVEQUERIES to true in wp-config.php.

define(‘SAVEQUERIES’, true);

Later, by printing the variable $wpdb->queries, you can get access to all performed queries.

 

Disable the Trash:

While developing a WordPress-based site, switch off the trash. Doing so not only saves the memory of your database, but also eliminates possibilities of existence of a bug in the trash. Just open wp-config.php file and add the following code to it:

define(‘EMPTY_TRASH_DAYS’, 0 );

 

Test Posts:

Use Theme Unit Test to test your theme in a better way. This test suite comprises sticky posts, normal posts, posts with no content and titles, posts with/without images and so on. As this testing technique goes through each and every element of the theme,
you can easily figure out fringe cases.

 

Add Different Users:

While you’re going to develop a WordPress theme, it’s always a best practice to create different users with different roles. You can either do it manually via admin dashboard or using wp_insert_user() function.

 

During Theme Development

Once you’ve everything set up as it should be, dive into the second phase that is development. Keep following things in mind during theme development.

 

Modular Programming Wins:

While developing a theme, it’s highly recommended to follow the principles of object-oriented programming in which a set of coding is kept in a module. Keep a set of code as independent to another set of code as possible. This way, not only the code will remain clean but the coding management task will be simplified.

 

Do It Now:

While working on a project, often developers put it on-hold for some reason and think, it can be done later. This is one of the worst practices ever, because later when you touch up the project, chances are you would have forgotten many things. To avoid this, I suggest you to either start coding or not. Once you started, push yourself to the end of code.

 

Choose Right Tools:

Below are some useful tools to boost your WordPress theme development process:

LESS: A CSS pre-processor built to make your CSS more efficient, extendable and maintainable.

CodeKit: A Mac App that allows developers to compile LESS, check syntax, concatenate JavaScript files and do a ton of other stuff. If you’re on windows, you can try Mixture and Compass as alternatives.

Post Snippets: A WordPress plug-in that enables you build a library with snippets of frequently used text, PHP or HTML code. You can insert defined snippets directly or use them as shortcodes.

Regenerate Thumbnails: A WordPress plug-in using which you can re-generate thumbnails for your image attachments. This plug-in is very useful when you immediately need a different-sized image during development.

User Switching: This plug-in lets you quickly switch back and forth between user accounts in WordPress with a single click of mouse. It would prove to be quite useful in testing environment where you regularly swap between different accounts.

Template Hierarchy:

Having knowledge about Template Hierarchy will minimize the chances of forgetting essential pages you have to create. Go through this interactive diagram to take an in-depth look into template hierarchy.

 

Final Testing

This is the final phase of theme development, which is as important as the first phase. In this phase, you’ll have to find and rectify minor bugs in the developed theme. To minimize the risk of any fringe case, try tools and tips given below:

 

Theme Check:

Theme Check is an extremely useful WordPress plug-in that provides developers the simplest and easiest way of checking if a theme is built with latest WordPress theme standard and practices in mind. By checking things like hidden files, incorrect text domains, legacy functions etc, it lets you ensure that your theme up to spec.

 

CloudApp:

CloudApp is a file sharing service that allows you to share anything including screenshots and screen recordings quickly and easily. Everything from capturing to sharing is done via global keyboard shortcuts.

 

Bug Management:

There are so many tools available to find bugs and fix them. Some of the best bug-management tools and services that you should use are: Lighthouse, Redmine, Sprintly, and Sifter.

 

Documentation:

Creating killer documentation can prove to be very helpful for you to catch mini errors. Not only a well-formatted theme document forces you to manually go through every feature of the theme, but also lets you check whether theme is working well or not.

 

Testing By Different Minds:

As everyone has their own mind and skills, it’s better to get your theme tested by a team of experts. To make your theme completely bug-free, let as many people as possible test your theme. Every one of us is different, which means everyone will certainly discover different bugs.

 

Conclusion:

In my opinion, no theme is 100% bug-free but you should always try your best to make a theme free from any kind of bugs and errors. You have to test every single aspect of a theme, only then you can deliver an effective, efficient and reliable product to your clients. I hope everything mentioned above will help you make your theme development process bug free to a great extent.

If you find any other effective bug fixing technique during WordPress development, you can share it in the comment box given below.

 

Author Bio:

Ajeet is an experienced WordPress developer who is working with WordPressIntegration – Developing WP themes from PSD. In his spare time, he writes about different topics related to HTML5, Responsive, WordPress, eCommerce, and JavaScript to share his work experience with others. For weekly updates, follow @Wordpress_INT.


About the author

With a passion for Knowledge, Smashinghub has been created to explore things like Free Resources For Designers, Photographers, Web Developers and Inspiration.

Twitter Visit author website

Subscribe to Smashing Hub


Comments are closed.