Perfecting the Twenty Fourteen WordPress Theme

This year I wanted to streamline the theme for the Director’s Student Voice Forum and make it a bit easier to navigate and more accessible for users. I was using the Minimatica theme for the site, which I love, but it does require quite a bit of maintenance and the main screen was a bit of curtain that some could not “see” around. I wanted something a bit simpler, a bit easier to navigate, and (because I love them) a magazine theme. You can check out the rationale for re-designing the blog by following this link —> http://bloggucation.learninghood.ca/2014/01/05/redesigning-the-directors-student-voice-forum-blog/.

Ok – so now the little irritants:

1. The theme is left justified by default (and there is no internal way to centre it)
2. The posts are displayed in full on the home page by default (with no way to select a summary or excerpt display)

So why does this matter?

Well, maybe #1 doesn’t technically matter but it really bugs me from a design standpoint. On a regular sized screen it looks ok, but on a 1080p hi-res screen it looks ridiculous.

Since my computer screen is a full 1080 x 1920 resolution this is what I see regularly and my OCD can’t handle it.

So I did some research to fix it and found….

Thank you @infos (http://wordpress.org/support/topic/how-to-center-the-whole-site?replies=14#post-5198115)

Now, it is always important to remember that it is never wise to add or change code in the core files of a theme. The best route is to create a child theme –> http://codex.wordpress.org/Child_Themes. It might sound complex but it is deceptively simple.

To begin, I created a file called style.css with Notepad and added the following text…

Just by adding that code to a file called style.css in a new folder created this look instead (with my images – the one above is the demo theme)…

I added an image to the background to add some texture.

I’ve had it up like that for a few weeks now but noticed that it was loading slow. I don’t know if you’ve ever noticed but look at the bottom left corner of your screen when loading websites (at least with Chrome) and you will see what is being loaded to your browser when you visit a page.

Many of my posts have embedded YouTube clips, Storified Tweet digests, forms, embedded websites, and more. By default, the theme loads all of your posts in their entirety when, more efficiently, it should be loading a summary or excerpt of the posts only. Loading all of these extra files when you first visit the site causes it to be painfully slow and laggy. It is much more streamlined to just get a taste of the post on the home page and to click through to see more of the content.

So, I did some research and found this…

http://wordpress.org/support/topic/display-only-excerpts-on-home-pagecategory-pagessearch-results?replies=10

So what I did here was download the complete Twenty Fourteen WordPress theme package (https://wordpress.org/themes/twentyfourteen) copied the content.php file to the child theme folder and changed the line as indicated above by @Zulfikar Nore.

This is what my child theme, named “twentyfourteen-centred” looks like. It is just two tiny files in a new folder. Remember, you need to have the original theme (in this case, ‘Twenty Fourteen’) installed before you activate your child. This is necessary because the software calls on your “child” first and then activates the remainder of the files from the original theme. It really is very cool!

So, the file is uploaded and the site is now screaming fast as it isn’t trying to load all of the APIs of the 3rd party embeds I’m calling for.

Hopefully, WordPress will tweak this theme and perfect it a little bit in the next update. It’s beautiful but it definitely has some issues. I really think these tweaks should be available by default.

Check out the Director’s Student Voice Forum blog – http://directorsforum.commons.hwdsb.on.ca and follow along on Feb. 27th on the site and at #HWDSBvoices as we engage our students in discussions about their learning.