Documentation is key to developing and only by repeating the same types of projects are you able to refine and improve on the steps taken to complete tasks. Here are my 4 best tips that I always make sure I’ve done when starting out and finishing up a new theme.
- Always start your theme with Underscores since this has all the best practices already built-in and includes all the necessary files required for a WordPress theme to function. It’s a base to start building on and can be thought of as a quick start for building. Most themes on ThemeForest are built upon the Underscores theme as it provides a solid base to start building your own custom CMS on.
- When you build a theme it’s important to test it against all the different types of content people can and will place in the site. Depending on the type of site you’re building, you’ll need to build custom content that mimics what will actually go on the site. Regardless of what you’re building, you need to test for all the basics such as content types, HTML tags, image alignment, and so on. Building out all this content could take a long time, but fortunately, you don’t have to do this. You can simply download what’s known as the Theme Unit Test Data plugin for WordPress to test the appearance of your new theme, which provides all the scenarios you should be testing for.
- While developing, it is useful to have an intuitive debugger and there are a lot of plugins available but I recommend “Developer” by Automattic to help resolve issues in your code. This is a plugin which essentially provides a list of useful plugins for you to use listed in one place where you can easily disable and activate them as you please. I suggest experimenting with them all but the most useful ones are:
- debug bar
- monster widget
- regenerate thumbnails and
- instal theme check
- This last one is useful you are coming to the end of your project. In the WordPress editor when creating posts the content style is different to the actual page layout style and does not reflect what we actually see in the front end. By adding editor styles to match front-end styles in your functions.php file within your themes setup function, can easily be achieved by following the following steps:
Open up your function.php file and within your
theme_name_setup() function to add these lines of code:
/* Editor styles */ add_editor_style( array( 'inc/editor-styles.css' ));
Then create the .css file with the name “editor-styles.css” and place it in within the inc folder and add this line at the top for reference:
/** * Theme: your_theme_name * Editor styles for TinyMCE */
Lastly, now copy and paste all your css code for header, lists, paragraphs, etc to get the desired result.