How to customize the Customizr WordPress theme ?


This article assumes you understand how to use WordPress, install and use a theme, and that you know the basics of html and CSS. But what if you wish to go further and customize Customizr a bit more?

On this site and on the WordPress Customizr forum, we give you “snippets” to add to your site to customize it in some way. As you get more proficient, you will also write your own.

Where do I put the CSS snippets?

The CSS snippets that are posted here and on the WordPress forum can be:

  • Pasted the CSS into the Customiz’It > Custom CSS panel. This is the easiest approach for beginners.
  • Pasted into your child theme’s CSS. This is slightly more complex, but once you understand the principles here, it’s a 5-minute job.

Any CSS placed in the above 2 locations will override the CSS in the theme’s stylesheets.

You shouldn’t modify any of the stylesheets in the theme (red.css, orange.css, etc.) — firstly because you don’t need to, as you can simply override it; and secondly because you will lose your changes when the theme is updated. Sometimes people say “That’s OK, I’ll simply re-upload my version of the CSS file”, but what they forget is that this way they will miss out on bug fixes and improvements in the future.

Once you’ve pasted your CSS in the Custom CSS panel or in your child theme, you will be able to see your CSS overriding the theme’s when you look in Firebug.

Do I need a child theme?

customizr-child-themeIf you’re making more extensive changes, it’s probably best to set up a child theme.

  • A child theme has a folder in the wp-content > themes folder, just like its parent. You can see this with an FTP client (for example Filezilla) or with a file manager provided by your hosting provider (if available);
  • It must contain a style.css file;
  • The style.css file must link the child to the parent in a specific way.

An easy way to set up a child theme for Customizr is to download one free from the Themes & Co site. Install it by uploading it in your WordPress dashboard using Appearance > Themes > Add new > Upload. Make sure to upload the full .zip file to WordPress — it won’t upload properly if you try to upload the unzipped files.

You can see more details on child themes here.

To put new CSS in your child theme:

  • Edit the file using the WordPress Editor (using Appearance > Editor); or
  • Download the file with FTP, edit it, and re-upload it.

 

What if I want to start using functions and php?

The child theme supplied on the Themes & Co site also contains a functions.php file.

Any php placed in the child-theme’s functions.php should be designed to override the theme’s functions.

Unless you really know what you are doing, you shouldn’t modify any of the php files in the theme’s folders — firstly because you don’t need to, as you can simply override their functions in your child-theme’s functions.php and secondly because you will lose your changes when the theme is updated. Sometimes people say “That’s OK, I’ll simply re-upload my version of the php file”, but what they forget is that (a) this way they will miss out on bug fixes and improvements in the future and (b) updates in other areas of the theme may mean that their old php code may eventually break their site altogether.

 

What does a child-theme’s functions.php look like?

Yup, that’s all there is to it.

Some people also add a closing ?> tag. But that can be dangerous, because if there’s anything after that closing tag (such as a blank line), the php processor will throw out the whole thing and probably bring down your site. It’s safer to just leave the closing tag out altogether, because in any case, the php processor happily closes the tag itself when it gets to the end of the functions.php file.

So now you know the basics of customizing Customizr. Your knowledge will snowball from now on!

 

Further reading and resources