The biggest problems with WordPress child themes is that you can’t create children of them. This makes customising them more difficult. This post will explain how I solved this issue with the Elemental WordPress Theme Framework.
Unfortunately I can’t control all themes, but for those I can control I have built in a simple system for adding your own stylesheets to child themes to allow you to edit things as you wish.
Create Your Own Custom Site Styles
If you have Nominate already then you can see this skinning system in place. If you open up the theme directory you will see there is a custom directory – this contains a series of css files with the name ‘skin_XXX.css’ – these are what show up in the admin panel under ‘Site Style’.
Below is a very quick tutorial explaining how to customise Nominate without editing the core theme files.
Creating a new Site Style is a very simple process.
- Make sure that you have your theme up and running. In this case you will have installed Elemental and Nominate in the wp-content/themes directory
- If it doesn’t exist already create a ‘custom’ directory in the theme folder. For Nominate this should already exist.
- Create a new css file – give it any name you like but make sure to prefix it with ‘skin_‘
- Now when you load the theme admin panel you will be able to select the site style under the Site Styles heading in the ‘Basic Blog Settings’ panel. The file will show up with the ‘site_’ and ‘.css’ part of the filename removed to make it look nice.
- Once the style is selected you can edit the css file as much as you like and all changes will be applied to the theme.
It’s that simple! A basic Site Style will take you no more than 5 minutes to create, and you can have a custom design in no time.
This system will work with all Elemental based child themes, which (at the time of writing) means Elemental, The Local, and Nominate.
Elemental is a clean & powerful blog framework for WordPress packed with options for customizable layouts, typography, navigation, widgets, page templates and more.
I’ve just done this with my theme, and it surely makes things easier.
I made a sub folder in my child theme called ‘custom’ in which I’ve saved my personalized stylesheets (and these do not contain ‘template name: elemental’ or other core Elemental code). In addition I created a sub folder to ‘custom’ for my images (custom\images).
This is indeed a great way of controlling your own elements. Thanks for thinking untraditional and once again lead the way forward.
I’ve tried this with The Local theme and “site styles” does not appear in the ‘Basic Blog Settings’ panel.
i.e., I created a “custom” directory within “The Local” directory and populated it with a “skin_local.css” file.
I’m apparently missing something here.
Thanks
(I’m working in MAMP to set up the site. I’m moving away from webEdition CMS for our site at http://www.swnewsherald.com because of the absence of support resulting from their move to Open Source.
Looks like I didn’t look closely enough. Site style does appear in the middle column with a drop-down for “default” and “Local,” but not the “skin_local.css.” Shouldn’t skin_local.css be in the drop-down?
local is the one you’re looking for. It removes the skin_ bit to make the name a bit nicer.