How to Add Social Media Icons to Your Blog

One of the must have blog item is to ease the access to your social media platforms for your reader, e.g., Facebook, Twitter, Pinterest, etc. Which makes it easy for your reader to connect with you.

Some theme may have those facility in widget such that you can enable it and add your information. In case it doesn’t, this tutorial explains how to add social media icons to your WordPress. You can add it to anywhere you like.

Here, we don’t use icon, instead we use Genericons font pack.  Genericons is a set of very clean, vector-based icons embedded in a webfont, which can be scaled to any resolution, or even styled with CSS.  Genericons is an efficient way to display icons on your site without increasing load times. They also allow for quick and simple styling without the use of an image editing program.

  1. As usual, always start off by using a child theme.
  2. Install Genericons.
    In WordPress, you can use the  Genericon’d plugin.
    Or you can download the zip file manually.  Then extract the files and upload the fonts folder to your child themes directory, e.g., /MAMP/myDemo3/wp-content/themes/twentytwelve-child/
  3. Add following into your style.css
    /************************************************/
    /* Using Genericons */
    /************************************************/
    @font-face {
    font-family: 'Genericons';
    src: url('font/genericons-regular-webfont.eot');
    src: url('font/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('font/genericons-regular-webfont.woff') format('woff'),
    url('font/genericons-regular-webfont.ttf') format('truetype'),
    url('font/genericons-regular-webfont.svg#genericonsregular') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    /*SOCIAL ICONS*/
    .social-block a:before {
    font-family: ‘genericons’;
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font: normal 24px/1 ‘Genericons’;
    -webkit-font-smoothing: antialiased;
    }
    .icon-google:before {
    content: “\f206″;
    }
    .icon-facebook:before {
    content: “\f204″;
    }
    .icon-twitter:before {
    content: “\f202″;
    }
    .icon-feed:before {
    content: “\f413″;
    }
    .icon-flux:before {
    content: “\f413″;
    }
    .icon-github:before {
    content: “\f200″;
    }
    .icon-dribbble:before {
    content: “\f201″;
    }
    .icon-pinterest:before {
    content: “\f209″;
    }
    .icon-youtube:before {
    content: “\f213″;
    }
    .icon-linkedin:before {
    content: “\f208″;
    }
    .icon-wordpress:before {
    content: “\f205″;
    }
    .icon-instagram:before {
    content: “\f215″;
    }
  4. Then, put in the related html code into the text area.  For example, I added following into a widget:
    131011m

And the widget will looks like:

131011n

 

References

How To Install & Display Genericons

Customise WordPress: environment

get_template_part

Assuming the theme folder is wp-content/themes, that the parent theme is twentyten, and the child theme is twentytenchild, then the following code –

get_template_part( 'content', get_post_format() );

that will look for files like content-link.php, content-gallery.php and so on.  In fact, it will do a PHP require() for the first file that exists among these, in this priority:

  1. wp-content/themes/twentytenchild/content-link.php
  2. wp-content/themes/twentyten/content-link.php
  3. wp-content/themes/twentytenchild/content.php
  4. wp-content/themes/twentyten/content.php
  5. wp-content/themes/twentyten/index.php

Now, imagine you’re working on a child theme. You created content.php and content-gallery.php. You expect gallery posts to pick up content-gallery.php, which is correct.

You also expect a link post to pick up your content.php file because there is no content-link.php in your child theme, right? This is also correct, unless your parent theme has a content-link.php file, which will be of higher priority to the template loader, despite the child-parent relationship between the two themes.

It does make sense, otherwise a simple index.php file in your child theme would override all of the parent theme’s templates, because index.php is a fallback for everything. That would render child themes useless.

To use this function with subfolders in your theme directory, simply prepend the folder name before the slug.  For example, if you have a folder called “partials” in your theme directory and a template part called “content-page.php” in that sub-folder, you would use get_template_part() like this:

get_template_part( 'partials/content', 'page' );

PHP Basics for WordPress Newbies

It is assume you already know at least one  programming language.

Function

Start with the simplest function possible example, the classic “hello world”.

1
2
3
4
5
function hello_bacon(){
  echo “hello bacon”;
}
hello_bacon(); // prints: hello bacon

Sample function that returns a value.

1
2
3
4
5
function hello_bacon(){
   return “hello bacon”;
}
hello_bacon();

To print it later we’d have to actually echo out the function.

1
echo hello_bacon();

or

1
2
$hello = hello_bacon();
echo $hello; // prints: hello bacon

Getting into Arguments

Example on sending variables into functions as arguments.

1
2
3
4
5
6
function favorite_food($food){
   echo 'My favorite food is ' . $food;
}
favorite_food(); //prints: My favorite food is <--didn't pass an argument so $food is empty, and I'm hungry.
favorite_food('guacamole'); //prints: My favorite food is guacamole

As you can see above, the favorite_food() function accepts 1 argument. Inside of the favorite_food() function, this argument will be referred to by the variable $food.

1
2
favorite_food('guacamole'); //still prints: My favorite food is guacamole
echo $food; //nothing doing

If you need to ensure that you never get an empty value for “My favorite food is ____” then you can give an argument a default. If you don’t pass an argument when calling a function it will simply use the default. Note below that ‘bacon’ is the default value of the $food variable.

1
2
3
4
5
6
function favorite_food($food = 'bacon'){
   echo 'My favorite food is ' . $food;
}
favorite_food(); //prints: My favorite food is bacon
favorite_food('guacamole'); //prints: My favorite food is guacamole

By now you might have noticed that we’ve only been dealing with ‘string’ variable.  You’ve been seeing me combine strings together with a period (.) in what is called string concatenation.

1
2
3
4
5
6
7
function double($x){
   return $x * 2;
}
$a = 10;
$a = double($a);
echo $a; //prints: 20

Variable Scope

Variables usually only exist inside the function where they are defined.  In PHP and WordPress you can declare variables as global in scope, meaning $x has the same value everywhere.  By default, variables are local in scope.

For the above example, the $x in the double() function is not the same as the $a outside of it.  Variables are just placeholders.  In the following line:

1
$a = double($a);

We are passing a value to the double() function. The function then catches the value as its argument.

1
function double($x)

Now the variable has a new name, but the same value. In the example the value was 10, that part isn’t any different. Within the function the variable $a now has a value of 10. Then it performs its multiplication and sends back the doubled value.

1
return $a *2;

And that brings us back to:

1
$a = double($a);

where the variable $a catches the return value, and the variable $a is now equal to 20, which we see when we echo $a.

There is the official PHP manual:

http://php.net/manual/en/language.variables.scope.php

Customise WordPress: hook, filter

First you need to understand how filters and action hooks work, you will see these questions really all follow the same pattern. You just need to learn how to speak WordPress ! Be patient with yourself, because you literally are learning a new language … especially if you aren’t already familiar with PHP.  I will be using examples for working with the  Thematic Theme Framework.

What is an Action Hook

Action hooks look like this:

1
do_action('action_hook_name');

In a plugin such as WooCommerce, if you investigate in the templates folder you will find all sorts of action hooks. The WooCommerce templates are extremely well-documented and tell you right there which functions are hooked into that action hook and in what order. In the theme, Thematic most of these are buried in the library/extensions folder.  In fact, in the actual templates (like index.php, category.php etc) you will see hooks that look more like:

1
2
// action hook for placing content above the index loop
 thematic_above_indexloop();

But if you go searching for the definition of that function you will find that it is in content-extensions.php

1
2
3
4
5
6
7
8
9
/**
 * Register action hook: thematic_above_indexloop
 *
 * Located in index.php
 * Just before the loop
 */
function thematic_above_indexloop() {
 do_action('thematic_above_indexloop');
} // end thematic_above_indexloop

Now an action hook is sort of like a parking spot. Some are empty, some have cars on them. you can move the cars around, but the spots themselves stay put. When wordpress gets to an action hook, it will run all the functions that are attached to that particular hook. If it gets to a parking spot and finds a car, it will run that car. If not, then it will continue on to the next hook.

How to add function to a hook

A completely fictitious example:

1
2
3
4
function function_you_want_to_add(){
echo "I heart bacon!";
}
add_action('destination_hook','function_you_want_to_add', $priority, $args );

The add_action line always takes this “form”, it means: add the function called ‘function_you_want_to_add’ to the hook called ‘destination_hook’ in the order of $priority with optional  arguments $args.

You can read all about add_action in the WordPress Codex.

The $priority is always a number. It is like a traffic cop in the parking lot, or maybe just an orange cone. If more than 1 function wants to be on a particular hook the priority decides which goes first. If 2 cars wanted to be in the same spot, the one with the lower number priority would get ground level parking and the one with the higher priority would be stacked on top.  The default priority is 10, so if you don’t need to change that you don’t even need to define it in your add_action line.

Some hooks pass additional variables to the functions that operate on them.

A practical example:

1
2
3
4
function function_you_want_to_add(){
echo "I heart bacon!";
}
add_action('thematic_above_indexloop','function_you_want_to_add');

If you add the example to your child theme’s functions.php you will see “I heart bacon!” appear on your blog page. Now leave that there and add the following just underneath it in your functions.php.

1
2
3
4
5
function kia_another_function(){
echo "Guacamole makes me happy!
";
}
add_action('thematic_above_indexloop','kia_another_function', 5);

Notice the priority number is 5. This means it has a lower priority number than the first function, which is 10 by default since we didn’t specify anything. When you reload your theme you should now see Guacamole makes me happy! on the blog index above the line about loving bacon. Bacon and guacamole together. It must be code heaven.

Removing a Hook

Removing stuff works a bit differently:

1
2
3
4
function remove_stuff(){
remove_action('hook_location','function_you_want_to_remove',$priority );
}
add_action('init','remove_stuff');

It tells WordPress, when it runs the init hook, please remove the function called “function_you_want_to_remove” that is located on the hook called “hook_location” with a priority of $priority.

init is just a WordPress hook. It is one of the earliest hooks that run when WP starts whirring. You can see most of the hooks that run in the WordPress process again at the Codex: Action Hooks . To remove something that had a specific priority originally, you must remove_action it with the same priority.  A good practical example would be removing the Thematic blog title.

1
2
3
4
function remove_thematic_header(){
remove_action('thematic_header','thematic_blogtitle', 3);
}
add_action('init','remove_thematic_header');

Paste the above into your functions.php, reload your child theme and poof the blog title is gonzo!

Moving the #access menu is another practical example, that combines adding and removing functions.  I’ll include it here because I see this question asked all the time.

1
2
3
4
5
function remove_thematic_header(){
remove_action('thematic_header','thematic_access', 9);
}
add_action('init','remove_thematic_header');
add_action('thematic_aboveheader','thematic_access');

Note that we don’t have to define thematic_access, because it already is defined by thematic. We can simply add_action it to a new parking spot.

Overrides

Thematic has a bunch of functions built in that if you define them, they automagically replace the function thematic was going to add to a specific hook, with your custom function.  In WordPress parlance, this is called a pluggable function.  Many thematic functions can be overridden by copying a thematic function to your functions.php and altering the function’s prefix from thematic_ to childtheme_override_.  The overrides completely change the car that is parked on a particular parking spot but they don’t change its location.

For instance to override the thematic_blog_description you could put the following in your functions.php

1
2
3
function childtheme_override_blogdescription(){
echo "Evil laugh! Now your blog is only about bacon!";
}

Refresh your theme and you will see the blog description has been taken over by bacon, which I think is neat.  Note that with pluggable functions you do notneed to also call add_action.  Doing so will add the function twice.  Most functions in thematic have this override capability, but not all.  You can browse through the extensions folder (look but don’t touch the parent theme!)

If you see something like:

1
if ( function_exists('childtheme_override_blogdescription') )

That’s a sign that you can use the override feature.  The full IF statement means: if you defined a child_theme_override function then Thematic will add your custom function to the appropriate hook instead of its own function.

Overrides are significantly more intuitive than filters, but filters can be more elegant.

Filter

A filter is like a magic function box that takes a value in ( remember I talked about parameters in by Basics tutorial ) do something with it and send it back. So you have a red Porsche on the lot, send it to a filter and it might become a blue Porsche. Or a black pickup truck. Whatever. But it will still be parked in the back, 2 spots from the end.

When browsing WordPress core, themes and plugins, you will be alerted to the availability of a filter by the appearance of the apply_filters() function. In generic terms it will look like so:

1
apply_filters( 'name_of_target_filter', $variable_getting_filtered, #priority, $other_arg );

It might look like:

1
return apply_filters( 'name_of_target_filter', $variable_getting_filtered, #priority, $other_arg );

or:

1
echo apply_filters( 'name_of_target_filter', $variable_getting_filtered, #priority, $other_arg );

or even:

1
$variable_getting_filtered = apply_filters( 'name_of_target_filter', $variable_getting_filtered, #priority, $other_arg );
Parameters for the Filters

The big tip off is the apply_filters() function, it can take an unlimited number of parameters but only the first two are required.

1. The first is the name of the filter. I was very confused early on because the Thematic framework tended to name the filters the same thing as the functions that contained them. And then in the one instance where they were difference, I couldn’t get my filter to work for anything. I swore and through things, cried and shaved a few days off my life from the stress. Turns out their sharing names was a convenience factor that makes a lot more sense to me now. So, just remember that first parameter is the filter’s name.

2. This is an important one, because this parameter is the variable that your function will receive. This is the value we’re going to change.

3. This it the priority. Just like with adding functions to hooks, this controls the order that filter functions will be applied should there be more than one. The default is 10, so if you need your filter to run before that you’d use a lower number. This is rare, and usually you need to run your filters after others, so you’d want to use a higher number. In fact, until you are sure that you are conflicting with another function you can pretty much just leave it at 10.

4+. These are other variables that might give you some useful information for manipulating the variable getting filtered. Remember we talked about scope in the PHP Basics. Instead of declaring these globally and hoping they arrive intact, WordPress will send your filtered variable along with some friends.

A Filter with Training Wheels

In super generic terms let’s take a look at the basic set up for filtering.

1
2
3
4
5
6
7
8
9
function sample_filter_function( $in_from_function, $other_arg ) {
$out_to_function = $in_from_function . " add some bacon here!";
return $out_to_function;
}
add_filter('name_of_target_filter','sample_filter_function', #priority, 2 );

The structure is almost same as add_action(). In reality, we are adding an action, just of a slightly different type: one that modifies a specific variable’s value. One thing to note here, is the number 2. This is the number of parameters that you are passing into the function. You’ll always pass 1 variable ( ie. the variable that you are filtering) and in this case you wouldn’t even need to declare it. That’s the default value, just as 10 is the default value for #priority. However, some filters provide access to other variables (like our fake $other_arg), and if you want to use them in your filter function then you have to name them inside the parentheses and then write the correct number at the end of the add_filter() statement.

If you have 2 parameters in the function, but don’t have the number 2 at the end of add_filter() you will get White Screen of Death. If you have the number 2, but don’t declare two parameters, guess what, you will also get WSOD. So make sure your parameters match up.

And you must return a value. If you do not, that is essentially the same as returning a null string. If you echo something here, it will likely not appear where you expect it, so don’t. RETURN, RETURN, RETURN. Remember in my PHP basics I talked about two functions playing catch. The return statement, is you throwing your modified version of the variable back to the apply_filters() function so that WordPress can continue on its merry way, but using your value now.

I want to end on a real filter that you can drop into your theme’s functions.php and actually see a working result.

1
2
3
4
5
6
7
8
9
function kia_the_title( $title ) {
$title .= " BACON!";
return $title;
}
add_filter('the_title','kia_the_title' );

Not too shockingly I am using Bacon in my testing code. If this bothers you…. well, its just code. WordPress has a filter called the_title() that lets you modify the title of every post! As written above it will literally add BACON everywhere the_title() is called. Following example will only add Bacon to the titles in the main loop, and only on the front-end.

1
2
3
4
5
6
7
8
9
10
11
12
13
function kia_the_title( $title ) {
if ( ! is_admin() && is_main_loop() ) {
$title .= " BACON!";
}
return $title;
}
add_filter('the_title','kia_the_title' );

 

References

A Newbie’s Guide to WordPress Hooks and Functions

Thematic Page Structure

Visualizing Thematic 4 You

http://thematicmondo.com/directory/resources-tutorials/

Customising wooCommerce

The template files of WooCommerce contain the markup and template structure for the front-end of your store. They contain many hooks which allow you to add / move content without having to edit the template files themselves. This method protects even further against any upgrade issues as the template files can be left completely untouched.

Do not edit these files within the core plugin itself as they are overwritten during the upgrade process and any customisations will be lost.  Instead, you should edit these files in an upgrade safe way through overrides. Simply copy it into a directory within your theme named /woocommerce, keeping the same file structure.

Example: To overide the admin order notification, copy:
wp-content/plugins/woocommerce/templates/emails/admin-new-order.php to
wp-content/themes/yourtheme/woocommerce/emails/admin-new-order.php

The copied file will now override the WooCommerce default template file.

See woocommerce plugin, Template Structure + overriding templates via a theme for the  template files which are found within the /woocommerce/templates/ directory.  Alternatively, you can simply navigate to the plugin you have downloaded and check them out.

You can edit and override any file within the woocommerce template directory using that method.  Rearranging some elements around may require actions and hooks within a functions.php file. I have created a file called functions-custom-woocommerce.php to separate my WooCommerce customisations.  In turn, I need to call it from the main functions.php file.  Add following lines to the beginning of the functions.php file:

/*---Include WooCommerce Custom Functions File*/
include_once (get_stylesheet_directory() . '/functions-woocommerce-custom.php');

Customise wooCommerce: remove shipping calculator from cart page is an example of customizing WooCommerce using the method of overriding template files.

One way to learn how customisation is by looking at themes using wooCommerce.  Browse to the theme directory and search for the string “woo”, e.g., in Mac OS X (Unix), you can:

grep -R woo *

Typically, you should find out there are codes in the functions.php which detect and divert the setting in another file for customisation.

if ( class_exists( 'woocommerce' ) ) {
functions.php: require_once( trailingslashit ( THEME_DIR ) . 'includes/functions/theme-woocommerce.php' );

A

How to clone a site under MAMP

Throughout your development, you may want to duplicate a site.  E.g., if you want to try different themes without suffering from the trouble in flipping back and forth.

To copy a site in the same localhost, you need to copy the whole directory, copy the database (via export/import), update the wp-config.php file and some entries in the database.  Here are the detail steps:

  1. Open the start page from MAMP by clicking on the “Open start page”.
    130827o
  2. In the page, click phpMyAdmin -> Databases and create a new database for the new site.
    130827q
    In my example, I am going to clone “myDemo2″ to “myDemo3″, so I will create a new database named myDemo3.  Use whatever name suitable to you.
  3. From Finder, duplicate the whole directory.  For example, I stored the whole site under /Volumes/Public/project/MAMP/myDemo2 , so I need to copy the whole directory and name it as /Volumes/Public/project/MAMP/myDemo3
  4. Edit the wp-config.php file in the new web directory, in this case is the ”/Volumes/Public/project/MAMP/myDemo3/wp-config.php”.
  5. Update the entry about the database name.
    define('DB_NAME', 'myDemo3');
  6. From your MAMP start page, go to phpMyAdmin, select the database you are copying from, for example, in my case, it is myDemo2.  Export it, select custom, save output to a file. Click “Go”, it will generate a .sql file to your local HD.
  7. From your MAMP start page, go to phpMyAdmin, select the database you are copying to, for example, in my case, it is myDemo3.  Import from the .sql file you have just created.
  8. Download search and replace script.  Put it in the same directory where the wp-config.php is stored.
  9. Point your browser to there to execute the script, in my example, point the browser to
    localhost:8888/myDemo3/searchreplacedb.php
    Follow the instructions.  In my case, I will replace
    localhost:8888/myDemo2
    with
    localhost:8888/myDemo3
  10. After moving, the permalinks may be broken, you need to edit the wp-config.php file, add the following line at the end
    define('RELOCATE',true);
  11. Point your browser to the new web site’s login, in my example is http://192.168.1.103:8888/myDemo3/wp-login.php
    Login to the administrator account, use the same password as you original site, and go to Settings -> General, correct the site link to new link, in my example is http://192.168.1.103:8888/myDemo3
    Similarly, you should also update some custom link, e.g., I have custom link set in the menu items, so I need to update them accordingly.
    Go to Settings -> Permalinks. Click the save button.

Then, test your web site to see if everything is correct.

After moving, remove following line from the wp-config.php file

define('RELOCATE',true);

 

How to Add Custom Fonts to your WordPress Site

Sometimes, you or your client may want to use a font which is not in the system.  This is rather common for the menu font.  The simplest way to do this is using the WordPress Font Uploader.  This plugin lets you upload your own font files and apply them to any element of your website without requiring a knowledge of html or css.  All .otf and .ttf font files are supported.

After installation, you will see “Font Uploader” added to the “Appearance” panel.  Upload font from here and set the font accordingly.  E.g., in my case, I want to change the menu font, and I search in my theme directory to discover it is governed by the #topnav in the style.css, so the setting shown in following illustration:

130924m

Other references

How to style WordPress Menus & Dropdowns

How to disable youtube related videos at the end for WordPress widget

To achieve that, typically, you only need to add “?rel=0″ at the end of a youtube embedded code.  But that doesn’t work for me in a widget.  I have used a video widget in a theme where there is no control, and the widget always override the “?rel=0″ parameter.  And I couldn’t find any widget which works with that theme.

Actually, you don’t need specific widget to display youtube in sidebar, footer, etc.  You can code it in a text box:

  1. Add a Text widget.
  2. In the content area, fill in the following text and replace the “http://www.youtube.com/embed/x8skGEboyFY” with your youtube embedded code:

    130919m

  3. Save the widget.

If you want to use it in a post or page instead of sidebar or footer, simply key in the above codes. Outcome: