Creating a child theme from the hueman theme
I’m writing these notes so that next time I try to do this I have some guidance. The modifications relate to the new site I have been working on Manchester1984.uk. But I have subsequently determined that the better way to make the kind of changes I want to do to the CSS and maintain them if the theme is updated, is to use the Simple Custom CSS plugin – which works a treat (should have done that in the first place!!!!)
From the filemanager in the control panel on my host, I created a new directory in the blog/wp-content/themes/ directory called hueman-child. The blog directory is where the wordpress installation files are.
Using FireFTP, I downloaded the style.css file from the directory blog/wp-content/themes/hueman. It is useful to have a copy of the style sheet locally on your own computer anyway, so you can have a good look at it if there are things you want to change.
I created a new blank file in notepad++ called style.css. The example headers I had from various instructions I found didn’t completely tell me what I needed. The example from https://codex.wordpress.org/Child_Themes was this:
/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */
I compared this to the header in the hueman theme style.css and replaced each bit, so I then had this as the header:
/* Theme Name: Hueman Child Theme URI: http://alxmedia.se/themes/hueman/ Description: <a href="http://alxmedia.se/themes/hueman/">Hueman</a> is a responsive 100% high resolution theme for blogs and magazines. Unique toggle sidebars give a great browsing and reading experience on both tablet and mobile. The feature list is long: Unlimited topbar, header, footer and accent colors, unlimited widget areas, 0-2 sidebars to the left or right that can be uniquely specified for each page or post, 300px / 220px fixed width sidebars, 0-4 footer widget columns, almost zero layout images, related posts and post nav, featured story or slider, 10 post formats, good SEO, 3 flexible custom widgets, localisation support, social links, logo upload and many more useful admin panel features. Author: Alexander Agnarson Author URI: http://alxmedia.se Template: hueman Version: 1.5.4 Copyright: (c) 2013 Alexander "Alx" Agnarson License: GNU General Public License v3.0 License URI: http://www.gnu.org/licenses/gpl-3.0.html Tags: light, one-column, two-columns, three-columns, right-sidebar, left-sidebar, fluid-layout, fixed-layout, custom-colors, custom-menu, featured-images, flexible-header, full-width-template, post-formats, sticky-post, theme-options, threaded-comments, translation-ready Text Domain: hueman */
This is where the instructions from wordpress.org were not very clear. The one line that is not in the source theme header is the “template: hueman” part. I thought that by being inside comment codes this is not read by the server, but maybe it is.
The rest of the instructions on the wordpress.org page were far too complicated. I found these directions easier to follow http://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/ but it turns out they are out of date – @import is not the way to do things any more.
I then just added the following to the child theme style.css file:
@import url("../hueman/style.css"); /* CHILD THEME customization starts here ------------------------------------------------------- */
I saved this style.css file like that and then uploaded it via FireFTP into the newly created directory blog/wp-content/themes/hueman-child
Next I opened up the wp-admin panel of my site and had a look at what I could see in Appearance > Themes. I now had an additional theme labelled hueman that was just a grey box without the promotional picture.
I had already done some CSS customisation using Appearance > Edit CSS. That option had the warning that if the theme was changed the editing would be lost. It was unclear if selecting the child theme would lose those changes, but to be safe I copied them and pasted into a text document. Then I went back to the Appearance > Themes tab and clicked on the Activate button for the new child theme. Sure enough the CSS edits I had done reverted back to the original, but all of the setting options associated with the theme were still in place. That was my main concern that the colour settings and side bar changes would also be lost.
Now I can edit the CSS using the Appearance > Editor option. So I opened the new style.css file in that and copied and pasted the CSS modifications that I had saved in a temporary text file. Now I can add any other CSS modifications there and they will be saved.
The other thing to note is there is an additional CSS file with this theme: responsive.css. I assume that if I wanted to make modifications to that I would need to add another file that is called responsive.css to the hueman-child directory and have the following text at the top of it
@import url("../hueman/responsive.css"); /* CHILD THEME customization starts here ------------------------------------------------------- */
Confusion that I have
I am not really understanding how the instruction is being interpreted for which CSS file to look at and how the instruction is working to look in the hueman-child directory for the CSS to the hueman directory for everything else.
I’ve found it quite difficult to get exactly the changes that I want, in particular I am not finding my way around the responsive.css to make changes to the look on the tablet and phone. I wonder if there is an equivalent to the developer inspector tool that I can use on my android tablet to identify the classes of the components that I want to change?