1570 E. Edinger, Suite 1, Santa Ana, CA 92705
 

11 Useful Tips for Custom WordPress Theme Development

custom wordpress theme development

A WordPress site is simple to configure and use. But developing it from scratch is not so, especially if you need custom design and more functionality for your own WordPress theme.

Fortunately, there are lots of tips and tricks available on the internet to help you follow the right coding standards. The WordPress documentation also acts as one of the best resources for developers. But simply following the right coding rules don’t work until you consider the basics even before the development job starts. Apart from HTML, CSS, Javascript and PHP coding standards, a WordPress developer needs to know the preparatory grounds to start correctly. If you are switching from an HTML site to WordPress CMS, following these steps will be useful.

So, we will not go into the how-to-code part in detail but discuss more on the best-practice methods.

Below is the list of do’s and don’ts to prevent avoidable problems while developing WordPress theme.

1. Do Start with a Design

This is the first and most important step for a developer. Your scope of coding job much depends on how the site will look and feel once released. A design prototype in PSD or a wireframe provides the roadmap for the entire project. A sample UI/UX design tells how users will navigate through the site and interact with essential elements like button, menus, and content of a web page. Have a clear vision of the approved mockup design and its purpose for both client and the audience. This gives confidence before starting the development work and saves on production hours. Web developers creating ecommerce stores using WordPress may refer to premium templates for design ideas and help.

2. Don’t Hack the Core WordPress

It’s an offense. Hacking or modifying the core put you in deep trouble. People do that with the hope that they will get quick fixes around the internet if required. But most of the advice are difficult to follow. The reasons are as follows:

  • With every WP version update certain WordPress core files get changed. So you have to manually add these changes to your modified theme every time a new version appears. This makes things complicated.
  • Any manual changes may break plug-in functionality and core WordPress feature which you are not aware of. Plug-ins do change their versions often and on. So, plug-in compatibility with your modified theme could cause a major issue.
  • Breaking the core always pose security threats as you cannot test them for each type of vulnerability.

If you really feel the need to change the core, just submit a patch to http://core.trac.wordpress.org/ so that other fellow WP developers can analyze it and decide if the change is beneficial. If they are acceptable, you can add the change to the core.

3. Do Best Use of Plug-In

Most of the popular Plug-ins comes at no cost. But that does not mean you can use any of them in any number. There are 47,278 plug-ins with 1,438,372,317 total downloads as on date. Many plug-ins add excessive bloat, unnecessary CSS and heavy JavaScripts to your website which drastically reduces speed and performance of the website. For simple items like sliders, page navigation, menu, it is wise to develop your own version than relying on plug-ins.

4. Don’t Apply Hard-coded URLs

This is not a good practice even if you work on a specific site for a particular client. Using hard-coded URLs in your WP theme pose some definite risks and downsides as follows:

  • Changing the domain name will require you to edit URLs at all places wherever you have hard coded them.
  • If you switch between development and live server for testing, it is painstaking to change all hardcoded URLs
  • You can’t release the theme in public or for other developers’ use.
  • Any minor mistakes in changing the hard-coded URL may render 404 errors
  • Maintaining directory structure for plug-in

5. Do Build Theme Options

Custom theme options are a great way to manage frequently-used functionality and design components for end users. It allows modifying settings for the header, footer, categories, page, sidebar, custom pagination, background, banners, styling, typography in simple mouse clicks. Users can customize the look and feel and switch on and off any particular function they want on their own. Once you develop theme options, modifying it for future enhancements becomes easier. You can control the base code better.

6. Do Use Staging Environment

You should develop a theme locally or use a staging platform. Avoid working on a theme on a live site. The staging environment allows you to make as many changes as you need without worrying about breaking codes if something wrong happens. Also, ensure that your development setup has the latest database and files to work on. The same concept applies while updating or adding new plug-ins to live site.

7. Do Use WordPress Core Features

If you are not using WordPress for which it is known for, it is a big miss. Sidebar, Pages, Menus, Widgets, Permalink Structure are some of those regular options a developer must consider while building a theme. WordPress core features like functions, actions, filters are robust and there is no need to think of any alternatives. Also, use WP Core Functions and Libraries. Because, if your scripts are vulnerable, there are thousands of WordPress contributors to help you fix that. WP Core also contains many scripts that you can use in your theme or plug-in. So considering them for your new libraries is useful.

8. Don’t Hang around Shortcodes

What if you need to switch to a new theme in every 3 to 4 years of span? Shortcodes are theme specific and can’t be reused with a different theme. The same applies to Custom Post Types and Non-presentational metadata.

9. Do a thorough Check before Release

Ensure that you have –

  • Prefixed the code properly
  • Made the code translation-ready
  • Fully sanitized the code
  • Commented the code for functions or variable (helpful for other developers)
  • Followed PHP, JavaScript, CSS and HTML coding standards
  • Prefixed functions to avoid collisions in function name (happens during plug-in installation)
  • Blocked direct access to plug-in files for security
  • Do Check the speed, checking theme based loading time is important part.
  • Debugged warning and notices

10. Do Update Your Theme

Your website work is never finished until you shut it down. Web technology, design trends keep on changing with time. The usability perspective and choice of functions and operation also change. You need to stay updated about what’s new out there. It could be the use of HTML5, CSS3 for responsive design or introduction of bootstrap structure to your WordPress theme. The more you stay updated and relevant with your website technology, the better.

11. Review Theme with Others

WordPress.org Theme Review Team can help you with this. Read the Theme Review Teams Handbook and join the team page to take part in the review process. You may even use Slack (weekly meeting) for communicating with contributors real-time. These discussions happen all the hours around the world. Once a group of volunteers reviews and approves your theme, you may wish to include it to the official WordPress theme directory. You may also share the theme with peer developers and ask for improvements. Collaborative discussion helps improve a theme from the usability perspective.

Conclusion

Custom WordPress Development is an experience through learning. It’s also experimental for starters having basic HTML knowledge. Because there are hundreds of ways you can go wrong and it is easy to get discouraged. Following the right coding principles make your life easier. Take time before you jump into the development work.

Ensure you have done good research and understood the scope of work well. Create a list of possible change requests that clients generally come up with in the later stage of development. Because any structural changes you make in the theme afterward will cost you in double. So, keep those provisions open and focus on theme flexibility. Take the advantage of using WordPress as a CMS that you can configure for maximum output. At the end of the day, your WordPress template should look unique and easy-to-use for end users.

Share with friends   
Sarah Clark

Written by

Sarah Clark, working in B3NET Inc. as Technical Editor. B3NET is leading orange county web design company in California.