The Travellist Project: Configuring WordPress theme

Projects
Here we go with part 3 of The Travellist project. This post will cover changing the heading text and logo in the header of a WordPress site, as well as testing prior to client handover.  

Let’s get right to it.

THE WORDPRESS THEME

Changing a WordPress theme is not easy at first. But after you get the hang of how it works, it becomes easier.

I’ll be using the Gateway theme as base and configure it to the specific client requirements.

Trello

The Trello card which detailed the requirements

The job gets even trickier when you don’t have a final design – we only had low-fidelity mocks and therefore designed solely on the fly i.e. mainly in the browser.

n.b. That entire arguement on whether you need to invest time up-front to design or design-in-browser does not really apply here. The client came to me stating that tried to launch this site last year, unsuccessfully – we, therefore had to the shortest route to launch which is designing on the fly.

 


DESIGNING THE HEADER TEXT

1. Adding the header image and text

Adding the header background image is as easy as going to Appearance > Customise > Theme options > Header then adding (or changing) an image.

Screen Shot 2015-06-07 at 6.32.27 pm

Changing the text of the title in the header, I wanted to make colour changes to specific letters, takes a little bit of configuring. The title of the site is ‘The Travellist’ and I wanted to make the ‘Travel’ stand out from ‘list’ to really drive home what the site is all about.

In order to style specific letters in the header, I needed to target the header title, this is where the span element comes in.

<!--------------------------------------------
Travellist Hero Title
---------------------------------------------->
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<div class="Hero-title">
<h1 class="Travel-Hero">The Travel<span id="Travel-colour">list</span></h1>

n.b. You might also notice that I have added a lot of comments above e.g. <!– everything in here is a comment –>. I only use comments in order to find stuff. I’ll be removing these when I move them in production.

The first thing to do is to go to your heading.php file located under Appearance > Editor > Header.php. You might have a few of these depending on your theme.Screen Shot 2015-06-07 at 6.32.47 pm

 

The second is adding the span tags. The key here is the identifier of “Travel-colour” which is used in the CSS to style ‘list’.

<h1 class="Travel-Hero">The Travel<span id="Travel-colour">list</span></h1>

 

2. Styling the Header text

Unlike WordPress.com, WordPress.org does not come with CSS file that easily allows you to override default theme styles. This is where plugins come in and the simple but superb Simple Custom CSS has saved my tail (it allows you to override styles with ease). I would rather do this, than mess with the theme’s style.css (and completely mess the design).

This plugin is launched from the Appearance > Custom CSS, and the span target of Travel-colour can now be used to uniquely identify the element that needs to be styled:

#Travel-colour{font-size: 7rem; color: #e8554e; letter-spacing: .3rem; overflow: hidden;}

n.b. A lot has been said about creating child themes and I can definitely see the benefits i.e. backup. But at this point, I did not have the need for it as I have dummy site where this theme is installed – so if I needed a backup, all I had to do was copy the code from this other site.

3. The Result

Header colour

Adding that extra colour for ‘list’ does it for me.

 


DESIGNING THE LOGO

I designed the logo itself in Sketch, which currently looks like this:

Travellist logo

No serious magic here, just a few paths, typeface and groupings.

1. Adding some animation

There are a few steps in order to add some simple animation to the logo.

First, is selecting some animation for the logo (and searching for the right one can take quite a while). I have selected animate.css for its simplicity in flipping the image around.animate css

 

n.b. If you play around with the effects, you will find a fair few to choose from.

2. Register the file

In order to use a CSS file that is not part of your theme CSS, we need to first register the CSS with WordPress under the functions.php file > wp_enqueue_style like so:

functions

The actual code to add looks like this:

wp_enqueue_style( ‘animate’, get_template_directory_uri() . 'css/animate.css' );

And it is basically saying this: “Name of the file is ‘animate’, get the resource identified within ‘css/animate.css’ folder.

The full explanation for registering CSS is given in the WordPress documentation: https://developer.wordpress.org/reference/functions/wp_enqueue_style/

3. Using the animation

Reading the Github page for the animate.css, reveals that animating the logo is as easy as adding the class ‘animated‘ with the actual effect of choice e.g. ‘flip‘.  

There is also an option to infinitely animate the logo by using the class ‘infinite’ (but I thought it was a bit too much so I left that option out).

Here’s the full code within the header.php file once again:

<!--------------------------------------------
Travellist Logo
 ---------------------------------------------->
 animated flip" src="<?php echo esc_url( $header_logo ); ?>" alt=""></a>

The <a> hyperlink tag in WordPress seems a little bit complicated with the added PHP, but in reality all this bit of code is saying “When you hit the site logo, redirect the user to the Home page.

The explanation for adding the link to the home page is given in the WordPress documentation: https://codex.wordpress.org/Function_Reference/esc_url.

3. The Result

While it is a bit hard to screen capture the result, suffice to say that when you land on the page or when the page is refreshed, the logo does a flip.

We may still change this in future, but for now, it’s in as it is part of our MVP.


TESTING (and just a little bit more design)

Now it’s always good to test across browsers before going back to the client. I try to hit the site with Chrome, Firefox and Safari at a minimum and with the tablet and mobile phones that I own. My resources are limited so I do have a final step to do as much testing as I possibly can before go-live.

n.b. And as an aside, I have found the Responsinator site to be quite handy in simulating what the site might look like across devices. Nothing beats the real thing but this simulator comes close.

As a final design consideration, I quite like playing around with the design in Google Dev console and Firefox Firebug, just to make sure that I have made the right choice with design:

chrome

Styling the ‘list’ in Chrome

firefox

Styling the ‘list’ in Firefox

As you can see, there’s really nothing in it between the 2 browser consoles and they’re both quite comparable. I still find that testing and playing around with the design, before alerting the client to the new change, is an absolute must.


NEXT..

Yet more design and dev work on WordPress – including HTML, CSS, JS, PHP and MVP tracking in Trello.


About this post

PC Blue AvatarOn a final note, I am dying to realise the full power of Slack as a tool having read so much about it. For the moment, I am using it as a backup of files but would like to grow it as a communications tool when the users of The Travellist grows (at the moment, it’s just the editor and myself – and we already use Trello as our main comms tool).

Yes, I use it over Github as file storage as I want to keep the files private between the client and myself. Perhaps one day things will change.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s