9 best practices for successful CMS templates Theme development under WordPress
08/16/2021
Author / editor: Christian Rentrop / Stephan Augsten
Theme development for WordPress can be a lucrative business: a good skin template generates tens of thousands of sales on markets like Themeforest. However, theme development for Wordpress also makes sense for your own needs.
company on the topic
A Wordpress site is more than a Wordpress installation with content: the appearance, the functionality and, last but not least, the speed of a theme decide whether a Wordpress-based website will be successful or not. Because if the template doesn't fit, users jump off - or Google devalues the page because it loads too slowly.
Wordpress theme development is therefore always an interesting playing field for software developers. Wordpress users are amazingly willing to spend money on themes - and a solid template not only ensures a good reputation as a Wordpress developer, but potentially a basic monthly income as well.
Themes can be added to the usual repositories free of charge as self-promotion, distributed by yourself using a license code and premium version, or sold on marketplaces such as Envato Themeforest. Those who offer good quality and regular updates with a reliable design have already won. Accordingly, WordPress theming offers web developers not inconsiderable opportunities for additional income and increasing their own awareness.
1. Set a topic
Of course, it makes little sense to just start hacking: Before creating a theme, there is always the question of which customers the theme should appeal to. First of all, developers should be clear about the purpose of the theme: will it serve as a portfolio theme for photographers or as a web shop template? Should an online magazine be operated with it or a BuddyPress or BBPress-based community? Both the design and the functions of the future theme depend on these considerations.
2. Speed or Features?
Of course, it is also possible to develop a multi-purpose template that is suitable for all possible purposes. Theme frameworks, which you can either develop yourself or use as a basis, also help here.
However, frameworks and multifunction pages have a significant disadvantage: they quickly appear overloaded for the average user and in practice often require considerable optimization effort - such as their own performance plug-ins - in order not to unnecessarily slow down the website. Therefore, every developer should first put themselves in the shoes of their potential customer or user: what would he or she expect from a theme in order to use it themselves?
3. Define requirements and design
As part of these considerations, it makes sense to define a kind of specification: Every function, every page and media type and every visual element that the theme should contain should be written down here. In this way, for example, the CSS framework can be created quite quickly.
In addition, it is advisable to create a mockup of the design including the fonts in order to get a first look at the website without having to write a line of code: In an image editing program such as Photoshop, Affinity Photo or the free Gimp, elements can be moved and changed without writing a line of code.
4. Create test environment with dummy content
Every WordPress site has three elements: the basic system, the theme and the content. While the theme is of course still under development, a Wordpress system can be set up quickly, either on a local or remote LAMP server or as a virtual machine.
The content is essential for the design of a page, but it is not enough to pack page by page dummy text into the database using the Lorem Ipsum generator: Wordpress pages also consist of images, comments and other elements. Plugins like FakerPress, which write complete website structures with dummy content into the database, help here.
5. Create the basic structure of the page
Now theme developers can actually get to work: Wordpress themes are not just design files, but have additional functions that are based on the basic system. So-called starter themes, which already have the necessary basic structure, are a good starting point. This also saves the work of creating all files and directories manually.
Such a starter theme is, for example, Underscores by Wordpress maker Automattic. If you want to use the popular Bootstrap framework, you can also use WP Bootstrap Starter, which is based on Underscores. Naked is also beginner-friendly, which also explains individual functions in its basic structure and thus makes learning the Wordpress codex much easier.
6. Get creative
Once the basic idea and the technical framework are in place, there is nothing to stop you from finally getting creative. Of course, it makes sense to take a look around the competition beforehand: What do the current designs look like, which typefaces and styles are used, which typefaces and which design rules are used?
You can fall back on almost irrefutable classics, for example red and green buttons for the opt-in, for example of a newsletter. But there is also a lot of creative freedom. The fonts in particular are important in order to create a certain look on the site. If you have the time, you might integrate Google Fonts into your theme and offer the user options for letter spacing and line height.
7. Work responsively
Modern websites are generally optimized for use on mobile devices, tablets and desktop computers. Developers of modern themes should always keep this design approach in mind and optimize the theme on different devices and screen sizes.
8. Less is more
Even if the starter themes and some frameworks may allow countless functions: Web designers who deal with WordPress themes should always keep the idea of minimalism in mind. This applies above all to the functionality and the code base used, here you should always code as much as necessary and as little as possible. Customers and users benefit from fast websites and the development and maintenance effort for the developer is also limited.
9. Test, test, test
The actual coding can easily be done in a source text editor, but developers should also test again and again in between: On the one hand, whether the theme is optimally displayed on all devices; and on the other hand, whether it also corresponds to the specifications given by the Wordpress makers. Wordpress plugins such as Theme Check, which are installed in the developer WordPress and run the theme through all the tests that are also carried out by wordpress.org for publication, help with this.
(ID:47503287)
