Quite A Week at Work

After a much needed week away from computers, during which I devoted myself to spending time with wife and family, I returned on Monday to find everything ticking over nicely. No missed deadlines, no broken web sites, no panic e-mails and no problems. Nice. I cleared my desk well before I left for vacation, clearly.

Still, there were some items on the table that needed cleaning up by the end of this week.

A graphic for a three-panel 10 foot by 10 foot trade show booth. Complimentary table skirt and two tablet stands. One attract mode video to loop on the monitor during the event (I really like what I did for this one). One broadcast e-blast announcing the upcoming trade show next week in Vegas, shared across our social media channels.

Also, two 16 inch by 20 inch posters for the Executive sit-rep meeting on Tuesday. Four medical technology articles for three blogs. Backed up, upgraded databases and security tested all web sites (end of month schedule). Research and development, learned a little 3D goodness in Blender and pushed some pixels around in Photoshop developing a few new concepts to put in the bank for future use. Plus the usual incidentals as required. All good.

And it’s not even Friday yet.

Tomorrow, I have a 2-page hardware brochure to turn out, I want to firm up an appointment to shoot some corporate video on-site with the client and I need to talk more to the boss about graphics for another booth for the next trade show in Montreal at the beginning of November.

I have no plans for after lunch. I’m keeping that free, just in case something comes up.

Fun With WordPress Templates

Today, I changed the layout of this site. I was frustrated by the template I was using, so I just threw it out and started again.

Changing WordPress templates is actually easier than it looks. Select from your choice of installed template and hit Activate. It’s that easy. And once you wrap your head around Child themes, it gets even easier. Why? Because, you can customize everything about a template, without changing anything at all. Huh?

A Child theme is basically a copy of your chosen template. You only ever make changes to the copy, leaving the original untouched. The child references the original, but overrides it wherever you tell it to. That’s where the parent-child thing comes in. Parents always think they know best, and kids always ignore them and do their own thing.

With this method, any updates to the original template code which may be released by the authors do not affect your modified child template. You get all the benefits of upgrading (new features, code improvements) without overwriting your favourite background image or chosen color scheme. So you no longer have to avoid updates (potentially dangerous from a security standpoint), or redo them all from scratch every few weeks, which is a pain in the proverbial for many web developers. Very cool.

It can be as simple as creating a new folder in your Themes directory and creating a single file called ‘style.css’ inside it. That stylesheet file must reference the original stylesheet, and it will pull the majority of layout info from there. But whatever you place inside the new custom stylesheet takes precedence and will override the original. Sweet. Here’s how it works.

The child style theme requires certain parameters. Create your blank ‘style.css’ file in the relevant folder, and paste in the following section:

/*
Theme Name:     OriginalTemplate – Child Theme

Theme URI:      http://www.whatever.com/
Description:    Child Theme based on the Default template, which is OriginalTemplate for this example
Author:         Carl Green
Author URI:     http://www.gystservices.com/linktoyoursiteifyouwantit
Template:       OriginalTemplate
Version:        1.0.0
*/
@import url(“../responsive/style.css”);
/* =Theme customization starts here
——————————————————- */
.site-description {color:#ffffff; font-size: 1.2em;}

Modify the above to suit your own situation and need. The last line is optional and can be removed. It is there for demonstration purposes only.

The most important items above are ‘Template’ and ‘@import url’. Both are case sensitive. Get it right or your site will break. The first is the reference to the Parent template. The second is a reference to the style.css file within the folder structure of that template. The other items are mainly informational, except the part below the ‘theme customization starts here’ line. That’s where it gets interesting.

The original template had the attribute site-description set in CSS as a mid-gray. This did not fit my needs, so I changed the color and size to make the text stand out more for this child theme. See? Easy.

Once you have set up the folder structure and file on your site, go to Themes. You should see a new entry there, which uses the name you set in your style sheet as ‘Theme Name’. From there, you should be able to figure it out as you would any other theme, and you can always fall back to the original in case of emergency. Preview, configure and Activate. Again, it’s as easy as that.

You can go down a rabbit hole with this and change everything about your original template. Depending on how complex the original is, that will be more or less difficult, of course. The pattern to follow always remains the same. Any file that needs to be changed in the original template should instead be copied into the child folder, using the same file and folder names and directory paths. You customize the copy in the Child folder and leave the original untouched. As long as they match (and remember they are case sensitive), the child theme will use your customizations instead of the originals.

One caveat, if you modify some of the deeper functionality within your chosen template, for example the underlying coding or PHP, then you will not benefit from any security patches to the original template, as your customizations will override the update. This is unlikely to affect anyone, but I would be remiss if I did not address the possibility.

For our purposes, we just found an easy way to make sweeping changes to a web site without having them overridden every time the site automatically updates itself. Isn’t that grand?