Monthly Archives: December 2016

Tips To Easily Add Google Web fonts To Your WordPress

Having a cool website with amazing content is just part of the many ingredients which will determine how well it is received by your readers and how nice the user experience is.

Another crucial aspect of your website is its typography.

Typography is a term which relates to your site’s fonts and the overall arrangement of the type, or letters and other symbols which make up the words on your web pages.

This includes things like font-family, font size, line height and many other things which determine how the text on your site appears to visitors of your site.

Typography is a skill and art on its own, but every web site owner should at least be aware of what it is and how they can apply it to their own websites.

When you look at a random selection of websites, you will notice that not all share the same type of typography. In particular, different sites use different font families to display their content.

The selection of font family is usually based on the style which the administrator wants to convey for their site but also on the readability of the font too.

One free and handy way to increase your choice of fonts you can apply to your site is to use the vast array of font families available in the Google Web Fonts directory.

In this article I will show you an easy way to add any selection of Google fonts to your WordPress theme via the use of a child theme. The Google fonts you choose to select and how you decide to display them is up to you.

In my example I will be using the WordPress native twentyeleven theme.

Step 1: On your computer, create a new folder for your child theme.

We’ll call it twentyeleven-plus for our example.

This will be the name of our child theme.

Step 2: Inside this folder create a file using a code editor and call it style.css.

This file will represent our child theme.

In the style.css file enter the following code:

/*
Theme Name: twentyeleven-plus
Theme URI: http://yoursitename.com/
Description: Child theme for the Twenty Eleven theme
Author: Your Name
Author URI: http://yoursitename.com/
Template: twentyeleven
Version: 1.0
*/
@import url(“../twentyeleven/style.css”);
.entry-content {
font-family: “Dosis”;
font-size: 16px;
line-height: 25px;
}

The comments representing the first 7 lines and the line with the “@import” statement are the minimum things you need to create a child theme. Therefore in this case we are simply giving the child theme a name, description, version number etc.

The import statement basically allows us to inherit all of the styling from the parent theme’s style.css file.

Now the beauty of child themes is that we can choose to overwrite some of that styling with our own modifications. This brings us to the next 5 lines.

The CSS code you see there for the “.entry-content” class is where we are applying our own customisations for the font of the text in posts and pages.

(Note: We used firebug to determine what the classname is for the text in our post body and in your case if you are using a different theme the classname may also be different. Therefore you are encouraged to do your own investigations with firebug.)

In this code we are instructing our child theme to use the Google font family called “Dosis” for our post body text and in addition we are setting the size of the font and the line-height.

(Note: We just chose this font as an example. You can change this to another font family name if you wish. Just go to the Google Web Fonts directory and copy the name of font but beware to get the exact spelling and case correct.)

Step 3: Create a new file in your child theme folder called functions.php

In order to be able to use the “Dosis” font from the Google font directory on our site we will need to reference this font family in our page’s head section.
There are a few ways to include a Google font family on your web page and one of them is to paste the following line in between your <head> tags:
<link rel=’stylesheet’ href=’http://fonts.googleapis.com/css?family=Dosis’ type=’text/css’ />

But since we have the luxury of using a child theme, we will avoid hacking our theme header.php file and we will use the new file which we created in our child theme folder called functions.php.

Inside the functions.php file, write the following code:

<?php
function load_google_fonts() {
wp_register_style(‘googleWebFonts’, ‘http://fonts.googleapis.com/css?family=Dosis’);
wp_enqueue_style(‘googleWebFonts’);
}
add_action(‘wp_print_styles’, ‘load_google_fonts’);
?>

With the above code we are elegantly using the WordPress “wp_print_styles” hook to register and enqueue the google web font family we need. The end result of this code means that our web page’s <head> tags will all include the reference to the Google font family called “Dosis”.

Handy tip: If you wanted to use more than one Google font then you can easily specify multiple font names by using a pipe character (|) to separate the font names. For example, if we wanted to add “Orienta” and “BenchNine” in addition to “Dosis” we would change the line of code which registers the fonts to the following:

wp_register_style(‘googleWebFonts’, ‘http://fonts.googleapis.com/css?family=Dosis|Orienta|BenchNine’);

Step 4: FTP the child theme folder to the “wp-content/themes/” folder of your WordPress installation.

Step 5: Log into the WP administrator panel and go to the “Appearance->Themes” menu.

You will now be able to see your new twenty-eleven child theme which in our case is called twentyeleven-plus.

Click on the “Activate” link to activate your new child theme as shown below:

And you’re done!

Now when you view your site’s posts or pages you will see that the new “Dosis” font is being used instead of the default theme font which was “Helvetica Neue”.

See the following figures for a before and after comparison.

Tips To Effectively Use the Color Red

This article is a continuation of the color, theme and design tips article series that I have been covering on this site. You may want to read the following two articles first (if you haven’t done so already)

Color psychology and how it affects your site
Color theory tips
In this article I talk about designing with the color RED and how to effectively use it on your site. I will cover the following topics.

What the color red means and how it affects the viewer both positively and negatively
Why you should use the color red
Examples on how to use the color red effectively
Best site to use the color red for.
Red is a very bold and powerful color. You can use red to evoke an array of emotions depending on the context the color is used in. Red represents the most physical color in the color spectrum.

First I will start with a little information on how color is perceived and recognized.

Color Recognition and Perception
Color recognition and perception is based on learned information from a multitude of sources:

Individual
Experienced
Social
Cultural traditions
Environmental surroundings
Formal teaching
Each person perceives color differently and this perception depends on the associations the brain has made for that color. Each individual holds in memory a personal “picture” of the meaning of each color name.

Most perception occurs unconsciously and at a high speed so they seem simultaneous with sensation.

What the color red means and the effects it has on the viewer
Red is the most dominant color and will always draw your attention when it is present.

The color red physically activates the adrenaline gland to fire up the body and senses. Red has been deeply integrated in the human brain as a signal to act, re-act or flee.

It can also command us to stop and encourage movement.

Here are some effects red can have on your viewers:

Positive effects of red

Powerful
Attention Getting
Love
Excitement
Sexy
Enthusiasm
Motivating
Impulsive
Negative effects of red

Aggressive
Anger
Immorality
Violent
Antagonistic
Temperamental
Danger
Using a color does not mean that the positive or negative effects will be evoked in the viewer, this all depends on the context the color is used in and how the viewer processes the color.

Why use the color red
You should use the color red because it is an attention getter, sensual and sexy. The saying SEX SELLS is one of the best ways to explain why you should use the color red. Red is seen as the most sexual and sensual color. Red can muscle through all the other colors to grab the viewer’s attention.

How to effectively use the color red
Red is a bold strong color and the most effective way to use this color is in small amounts.

Here are some effective ways to use the color red.

Website Design:

A red button to draw your viewers attention so they are more likely to click that button
A red arrow pointing out a button or other object you want the viewer to see
A note, warning or instruction you need the viewer to read
To make something important stand out
Special offers
Sale prices
To create passion or strong emotional reactions to a subject
Graphic/Interior Design:

To draw the eye away from a flaw you can not change in the design
To make something standout like a logo or statement piece
To warm up a project or room
To add a sexy or sensual mood to a project
To create passion or strong emotional reactions to a project or design element
Other Ways to Use the Color Red:

To stimulate the appetite this is great for restaurants or food sites. If you think about it, how many restaurants do you know that have red in their logo or design? You will find most of them do, this is because it stimulates your appetite when you see the color red in relation to food.
Best Types of Sites to Use the Color Red
There are certain types of sites that you can use larger amounts of RED to get a positive and effective reaction from a viewer.

Dating and relationship sites – Reds (especially deep reds) and pinks are great for these types of sites. They evoke the emotion of love, passion and romance.
Fitness and exercise sites – Red gets your heart rate up and can encourage and motivate you.
Food site – As I explained above, red stimulates your appetite. This has a good change to increase your food product sales or restaurant bookings. It is proven that if you shop for groceries while hungry you will buy more food than you intended to.
Sites selling make-up or beauty products – Red is a very dominant color in make-up and beauty products as it is synonymous with sexy.
Red is a very powerful color especially when it is used properly. Remember too much red can be over stimulating and cause strong feelings either positive or negative. Pink is a great substitute for red and still has many of the same affects on the viewer.

Create an Attractive Subscribe & Follow Box

Your WordPress blog isn’t the only place that you should be adding fresh content to. It’s important these days to also add new content to social networks as well.

Most of the time, webmasters create profiles and pages on social sites that are specific to just one web site (or niche that they are in). Each social site may have a specific content type that is to be shared. For example Flickr, Instagram and Pinterest profiles are loaded with images, and YouTube channels contain videos.

Or other times, webmasters may just be sharing the content from their site. Either way, as mentioned, it’s important to have a presence in many or all of the top social sites. More than just a presence, it’s also important to stay engaged on these sites. But that’s not what this article is about. In this article I want to provide the way in which I add links to all social profiles from my site, and supply all the code (and icon sources) for doing so, so that you can do the same.

subscribe and follow box example

Depending on your niche or what your web site is about, I’d say the main social sites to look at are: Pinterest, YouTube, Twitter, Facebook, Google+, and LinkedIn. There are probably others that make sense to your site and niche. I also add icons that link to my RSS feed and email subscription pages.

Subscribe and Follow Box Creation Video Tutorial
Subscribe and Follow Box Creation Steps
1. Let’s Start By Downloading Free Icons To Use To Represent The Profiles
It’s boring to just use plain text links, so I’m going to show you how to create a nice strip of icons to represent your social circles that we can fit nicely within a standard Text and HTML widget in the sidebar of your WordPress blog.

There are web sites that have free icon sets that can be used for your site. Designers have been busy getting creative with new looks for the logos and icons for these social sites. I use an icon search engine site called IconFinder.com. Unless you want to pay, be sure to turn the “free” filter on when doing your search.

Be sure to get icons ready for all the sites that you want to link out to. Try and match the look and feel if you are concerned about aesthetics. Plus, getting them to be the same size (especially the same height) is important. The ones that I use are 32 pixels by 32 pixels which are a standard size and look great on my site.

Visit this link to do your icon search.
Choose the “free” filter and optionally select the “For commercial use (no backlink)” choice.
Click the “look” that you like, then download the set to your computer.
Upload the images to a folder on your server. I chose “/images/social/” to upload mine to. Make note of the path to each one because we will be using it in the code later on.

2. Place The CSS For The Subscription Icons
Check for an “Edit CSS” link under “Appearance” in your WordPress dashboard. If it’s there, you have a cool theme like me. If not, your theme is probably still cool but we have to do it a different way. I just like the CSS editor (under “Edit CSS”) because it points out errors and tidies up the code.

If you don’t have it, click “Appearance” and then “Editor.” You will be on the main stylesheet by default. You may need to modify that file to add the following CSS. If you scroll down and look at the bottom right, you may see a “custom stylesheet.” If so, use that instead.

Now, place the following CSS wherever appropriate based on what was discussed above.

.side-sub-follow {
margin: 0;
padding: 5px;
}

.side-sub-follow .fb {
float: left;
margin: 0 3px 0 0;
background: url(http://website-example.com/images/social/facebook2.png) no-repeat 0 0;
width: 32px;
height: 32px;
}

.side-sub-follow .yt {
float: left;
margin: 0 3px 0 0;
background: url(http://website-example.com/images/social/youtube33x33.png) no-repeat 0 0;
width: 32px;
height: 32px;
}

.side-sub-follow .gp {
float: left;
margin: 0 3px 0 0;
background: url(http://website-example.com/images/social/googleplus1.png) no-repeat 0 0;
width: 32px;
height: 32px;
}

.side-sub-follow .tw {
float: left;
margin: 0 3px 0 0;
background: url(http://website-example.com/images/social/twitter33x33.png) no-repeat 0 0;
width: 32px;
height: 32px;
}

.side-sub-follow .em {
float: left;
margin: 0 3px 0 0;
background: url(http://website-example.com/images/social/email_open.png) no-repeat 0 0;
width: 32px;
height: 32px;
}

.side-sub-follow .rss {
float: left;
margin: 0 3px 0 0;
background: url(http://website-example.com/images/social/rss33x33.png) no-repeat 0 0;
width: 32px;
height: 32px;
}

.ss-clearer {
clear: both;
line-height: 0!important;
font-size: 0!important;
height: 0!important;
}
In the code above you will see many similar “chunks” of CSS. There is one for each social profile that we want to link to. It should be obvious by the name of the CSS class and the name of the image what social site (or icon type) it is defining. You can name the classes whatever you like, just as long as they match up with the HTML code that we place in the text widget later.

Of course, you may need to add or remove some classes to represent the list of profiles you plan to link out to. And naturally you will have to modify the path to the icons, plus modify the width and height values for each if necessary.

The “ss-clearer” class is just used to maintain proper whitespace around the set of icons.

3. Adding The HTML Into A Sidebar Widget Is The Next Step In The Process
Once you have the CSS code in place and saved, we can now move on to adding the HTML into a text widget.

Head over to “Appearance” and then “Widgets.” Drag and drop a text widget into place. In my theme I have a section called “Primary Sidebar” where I placed mine. Your theme will likely differ in what it is called. If you aren’t sure where the text widget appears on your site, then just place it, add some dummy text, click the “Save” button, and then visit (or refresh) the site to see.

Add a title. I use “Subscribe & Follow.” Then place the HTML below, making sure to modify it for your needs. Note that just because it is called a “text” widget, HTML will also work. You’ll see that you can include “Arbitrary text or HTML” within the widget.

<div class=”side-social”>
<p><a href=”https://www.facebook.com/page-name” target=”_blank” class=”fb”></a></p>
<p><a href=”http://www.youtube.com/user/account-name” target=”_blank” class=”yt”></a></p>
<p><a href=”https://plus.google.com/u/0/1111111111111111111/posts” target=”_blank” class=”gp”></a></p>
<p><a href=”https://twitter.com/twit-name” target=”_blank” class=”tw”></a></p>
<p><a href=”http://www.website-example.com/subscribe/” target=”_blank” class=”em”></a></p>
<p><a href=”http://www.website-example.com/feed/” target=”_blank” class=”rss”></a></p>
<p><br class=”ss-clearer”></p>
</div>

As you can see, I used class names that match exactly with the ones used in the CSS code in the previous step. This makes it so the browser knows the path to the images that are to be used and how they are to be displayed, etc.

You also want to be sure to modify the URLs to match those for your profiles and pages on the social sites. Plus of course you want to add and remove “code chunks” to reflect the social sites that you want to link out to.

It’s common to place these in the sidebar and widgets are a very easy way to make that happen, but you can also place them in other widget locations. On one of my sites, I include them in the footer widget area for example.

Troubleshooting The Subcribe And Follow Box
I find it easiest just adding one icon at a time. I will first place the CSS and then add the HTML. After testing and everything looks correct, I will move onto another icon. This makes it so that there is less code to “break.” Forgetting to close just one HTML tag can make the entire page look messed up, especially when using “div” tags. Therefore working with just one chunk of code at a time can make troubleshooting easier.

If you find that things just aren’t showing up regardless of what modifications you are making, it might have to do with caching or storing “static” files on a content delivery network.

For the most part, CSS files aren’t modified. They certainly aren’t modified regularly so they are cached often. Caching means that the assumed version of the file will be used to prevent reloading it for every page request. Until a certain event occurs, like manually clearing the cache, or a certain time frame is reached, the “old” CSS file will be used. If you are using a caching plugin, you can either wait it out or clear the cache. Pressing Ctrl+F5 might also force a hard refresh of the web page.

Another thing that might be going on is the CSS file is spread across a content delivery network. What this means is that an old version of the file is being used and is being loaded from a server close to your geographic location. You may already know this because you set it up. At any rate, it might take a few minutes for the CDN to get the updated version. This can be aggravating when making multiple changes. You might be able to login to your CDN and force an update of specific files with the click of a button. Check to see. It’s one extra step but when you get in the rythm it should be fine.

When all is said and done, you should have a nice strip of icons in your WordPress sidebar allowing people to subscribe and follow you on the web.