Blog

26 Apr 2019

How to Customize Themify Themes (Best Practices)

Tutorials / 8 Comments

WordPress themes exist on an extremely flexible system, allowing both users and web developers to customize it easily. Because of its flexibility and variety of customization options, there are chances people are editing and customizing WordPress themes in an incorrect or mistaken way.

In this foundational tutorial, we would like to take this opportunity to provide tips on how to customize Themify themes. We'll introduce you to the best practices and proper WordPress techniques that'll help you avoid unneccessary bugs or glitches while customizing your Themify theme, ensuring it works well alongside other WordPress plugins.

Let's get started.

Do Not Edit Template Files (Use a Child Theme)

Rule number one is DO NOT edit any template or script file in the theme folder. The problem with editing the template file is when you update or reinstall the theme, the changes you made will be gone. If you need to modify the template file, please create a child theme. Do not use third party plugins to generate child themes. You can download a sample child theme zip to start.

Adding Header/Footer Code

If you need to add tracking code or scripts (ie. adding Google Analytics or Facebook Pixel tracking code) in the header or footer of the page, do not edit the header.php or footer.php template file. You can add header/footer code via the Themify panel (located in Themify > Settings > Header Code).

Adding Content Via Hook Content

Hook Content is one of the powerful tools available in all Themify themes. It allows you to insert content/code in the theme without any coding skills or having to modify any template file. Lets say you need to add content in the single post view, the typical way is to modify the single.php template file. With Themify themes, you can bypass this by using the Hook Content feature. To add Hook Content, go to Themify > Settings > Hook Content, click "Add new", then select the display condition and done! It is that simple.

Customizer & Custom CSS

If you need to change the styling of any element, do not edit any CSS file in the theme. You can style the theme with the Customize panel (go to WP-admin > Appearance > Customize). The Customize panel gives you the basic styling options to most elements in the theme. If you need advance styling, you can add custom CSS in the "Custom CSS" panel.

Custom CSS Best Practices

Try to consolidate all your custom CSS in one place. This will make debugging and editing easier. Since the Themify framework already has the Custom CSS panel on the Customize Panel, you don't need to install any third party plugins for custom CSS. Adding CSS code via third party plugins might cause conflicts. Try to keep all your custom CSS in the Customize panel or the child theme style.css file.

If you are creating a child theme for customization purposes, please do not copy the whole style.css file from the parent theme as this will cause conflicts. Only add the CSS rules and properties that you want to override.

For example: if you want to change the letter-spacing on the h1 element, you only need to add the following:

h1 {
	letter-spacing: -.03em;
}

Google Fonts

All Google Fonts are included in the Themify framework, so you don't need to install any third party plugins to add Google Fonts. If the Google Font(s) that you want to use are not available on the font list, you can enable all fonts at Themify > Settings > General > Google Fonts (select "Show all Google Fonts" option).

Translating Themes

Please do not edit the template files for translation purposes (ie. do not edit the template files to change the words/language on the template). You can use Loco plugin to translate the theme easily. When you update or reinstall the theme, the translation will be intact.

With that, we hope this provided a little more insight into how to safely and expertly customize Themify themes to your exact liking. While you're on the customization train, don't forget to take a look at our latest customer showcase post to see all the awesome things you can do with Themify themes and builder. Enjoy!