Open functions.php

You can edit this file from the WordPress dashboard (Appearence –> Editor) or alternatively in your theme’s folder (handcraft-expo), found by default in ‘wp-content’ -> ‘themes’

Find handcraft_expo_fonts_selection

This switch function contains the default fonts.

Just add or edit your fonts by adding/editing a section like this for each of them:


case 'your_font':

echo ‘Your Font;

break;

Note: the echo on the second line must be followed by the actual font CSS name (‘font-family’ value): check the other fonts in the list for reference.

Find the following three controllers:

• handcraft-expo_title_font_type_control
• handcraft-expo_body_font_type_control
• handcraft-expo_previewer_font_type_control

and add/edit the following code in their list for each font:


'your_font' => __('My Font Display Name', 'handcraft-expo'),


Link the font

Good job!

Last thing you need to do is to let WordPress know where the font is by adding the link to the server (or file).

Find handcraft_expo_resources, at the beginning of ‘functions.php’, and if the font is on a CDN (like Google Fonts), add the following code:

$protocol = is_ssl() ? 'https' : 'http';

Then, for each font:

wp_enqueue_style( 'your-font-name', "$protocol://link to your file on server" );

OR, if the font is on your server:


wp_enqueue_style( 'your-font-name', get_template_directory_uri() . 'path to your file' );


Well done! You can now use your font in the three default ‘zones’ (title, pages and previewer) and see live previews in the customizer!

Here‘s a detailed article about using the same technique to add any kind of style/script to your theme.

Open previewer.js

Found by default in the theme’s folder: ‘wp-content’ -> ‘themes’ -> ‘handcraft-expo’ -> ‘js’.

Note: Although the process is quite straight forward, a minimum knowledge of CSS and/or JavaScript might be required.

Find box.animate

This jQuery object defines how the previewer animation behaves on ‘mouse enter’ (when hovering on menu links, found inside the jQuery(‘.side-navbar’).mouseenter function), and on ‘mouse leave’ (found inside jQuery(‘.side-navbar’).mouseleave).

You can here change anything you’d like (default values are for width: ‘100%’, opacity: ‘0.9’), including transitions, as explained here.

Note: CSS properties with multiple words should be ‘camelCased’ and defined as strings (example: textAlign: ‘center’) since, as we said, we are working on a jQuery object.

Open header.php

You can edit this file from the WordPress dashboard (Appearence –> Editor) or alternatively in your theme’s folder (handcraft-expo), found by default in ‘wp-content’ -> ‘themes’.

In this how-to we’ll be using the popular Font Awesome icons from Bootstrap CDN to change the toggle buttons.

You can of course use the same technique to change/add anything you’d like (ie: Bootstrap Glyphicons) with wp_enqueue_style.

Trademarks and brands are the property of their respective owners.

Find handcraft-expo-menu-sidebar-toggle and change the ‘>‘ between tags – yes, it’s a symbol (!) – with the icon you want (here’s how). In our example we’ll go with:

class="fa fa-bars fa-2x"

Open page.php

You can edit this file from the WordPress dashboard (Appearence –> Editor) or alternatively in your theme’s folder (handcraft-expo), found by default in ‘wp-content’ -> ‘themes’.

Find sidebar-toggle-icon and change the ‘>‘ between tags – yes, it’s another symbol (!) – with the icon you want (here’s how). In our example we’ll go with:

class="fa fa-chevron-right fa-2x"

Open mobile-html.php

You can edit this file from the WordPress dashboard (Appearence –> Editor) or alternatively in your theme’s folder (handcraft-expo), found by default in ‘wp-content’ -> ‘themes’.

Find mobile-toggle-icon and change the ‘>‘ between tags – yes, a symbol again (!) – with the icon you want (here’s how). In our example we’ll go with:

class="fa fa-arrow-circle-down"

Link the icons to the theme

Good job!

Last thing we need to do is to let WordPress know where the icons are: in our case, on another server.

Open functions.php

You can edit this file from the WordPress dashboard (Appearence –> Editor) or alternatively in your theme’s folder (handcraft-expo), found by default in ‘wp-content’ -> ‘themes’.

Find handcraft_expo_resources, at the beginning of ‘functions.php’, and add the following code:

$protocol = is_ssl() ? 'https' : 'http';

Then, for each icons-set (just one in our case):

wp_enqueue_style( 'font-awsome-icons', "$protocol://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" );

Congratulations, you now have cool new icons you can use! Here‘s a detailed article about using the same technique to add any kind of style/script to your theme.