Categories
Posts

Adding Bootstrap’s Responsive Dropdown Menu to Thematic

I recently created a new WordPress starter theme for Thematic, the only problem is I receive questions about dropdown menus a couple of times a week. Most of the questions can be shortened to “Hey, why aren’t the dropdowns working?”. The short answer, Responsive Base Plus theme does not have dropdown functionality built in. Responsive dropdown menus are extremely complex and it depends on the design and needs of the customer to know what is required. Adding a complex menu to the starter theme would be a disservice since you would have to rip it out every time you wanted something different, which is something I tried to avoid on theme that is intended to be a starting point for development.

If you want to dig into why they are complex, I suggest checking out Responsive Navigation Patterns and Complex Responsive Navigation Patterns, both by Brad Frost, which will set you on the path to realizing, “Oh crap, it depends on…” when making the choice of what way you plan on handling important navigational elements.

If possible I try to steer clients away from dropdown menus altogether. Usually from a usability and SEO angle, not every page needs to be accessible from the homepage, ideally the homepage should drill down into main categories and those main categories should obviously drill down to their sub categories. All in all, a less is more (simplicity) approach. Changing their mind doesn’t always work.

Responsive Base Plus with Bootstrap 3 Menu

Demo Bootstrap 3 Responsive Menu

I must have a dropdown menu!

Fine, if you are going to add one I suggest using one with a community behind it. Usually you can hope that most of the accessibility and usability issues have already been hashed out. That is why for this example I went with Bootstrap 3’s Navigation Menu, this example shows what is required to get it to work with the Responsive Base Plus theme, but also provides links to do it with any WordPress Theme. You can also use this as a general idea of what is required to add any other type of menu system, like Foundation from Zurb.

This half-assed mini tutorial is based on removing the current responsive menu (with no dropdowns) from Responsive Base Plus, and replacing it with Bootstrap 3’s. Fair warning, this is pretty gross, the Sass can be heavily trimmed down to just what you need. I have removed all the code that doesn’t pertain to the menu, but there are so many different types of menu options, it is still a large chunk of code.

Modifying the WordPress Menu for Bootstrap

Luckily, someone was kind enough to have the Nav Walker already taken care of. You will need the wp-bootstrap-navwalker, download the file and save it to your child theme in the main directory /childtheme/wp_bootstrap_navwalker.php.

Now you will need to remove the old menu system from the functions.php in the child theme. Locate the current menu override childtheme_override_access and remove this function.


function childtheme_override_access() {
    ?>
    <div id="access" role="navigation">
        <a class="menu-toggle" href="#">Menu</a>
        <?php
        if ( ( function_exists( 'has_nav_menu' ) ) && ( has_nav_menu( apply_filters( 'thematic_primary_menu_id', 'primary-menu' ) ) ) ) {
            echo  wp_nav_menu(thematic_nav_menu_args());
        } else {
            echo  thematic_add_menuclass( wp_page_menu( thematic_page_menu_args () ) );
        }
        ?>
    </div><!-- #access -->
    <?php
}

Now replace that with the code provided below from the wp-bootstrap-navwalker documentation, but using an override provided by the Thematic theme (the parent theme).


function childtheme_override_access() {
    ?>
    <nav id="access" class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    Menu
                </a>
            </div>
        <?php
            echo  wp_nav_menu(
                array(
                    'menu'              => 'mainNav',
                    'theme_location'    => 'mainNav',
                    'depth'             => 2,
                    'container'         => 'div',
                    'container_class'   => 'collapse navbar-collapse',
                    'container_id'      => 'bs-example-navbar-collapse-1',
                    'menu_class'        => 'nav navbar-nav',
                    'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                    'walker'            => new wp_bootstrap_navwalker())
            );
        ?>
    </nav> <!-- #access .navbar -->
    <?php
}

register_nav_menus( array(
    'mainNav' => __( 'Dropdown Nav Menu', 'Dropdown Nav Menu' ),
) );

// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');

The code above will add the correct structure for Bootstrap, add a new menu option in the WordPress admin called Dropdown Nav Menu and add (register it for use) the wp-bootstrap-navwalker.php file.

A couple of things to note, you will need to setup the menu ‘and’ add the correct menu location in your WordPress Admin. Both the wp-bootstrap-navwalker and Bootstrap 3 only support 1 level of dropdowns, so to do more… it will take some work. I haven’t looked into it yet.

Bootstrap’s JavaScript for Dropdown Menu

Locate the js/custom.js file provided in the child theme. Go ahead and delete the previous toggle for the default menu provided by Responsive Base Plus.


jQuery(document).ready(function($) {
    $('.menu-toggle').click(function(e) {
        $('.menu-toggle').toggleClass('toggled');
        $('.menu').toggleClass('active');
    });
});

Unless you have added custom code to your child theme, there won’t be anything in the file any longer. In that same file, add the code from this Github Gist.

Download Bootsrap JavaScript Code

This is required for the dropdown, it includes the dropdown.js, collapse.js and transition.js files. The files are on a Gist so this post doesn’t look painfully long.

Bootstrap’s CSS for Dropdown Menu

Hopefully you are using Sass, but even if you aren’t, I will provide the compiled CSS. This is the part that gets gross, the problem is the Bootsrap menu is super flexible and is capable of having a lot of different styles and formats. I have trimmed it down to what is just required for the menu, but it is still a lot. If you were using this in production, I would highly suggest removing all the menu features that aren’t being used.

If using Sass

Awesome, you are using Sass, this is fairly easy. Locate the /scss/ folder in the child theme, then open up the _navigation-main-menu.scss file. You can safely delete what is there since you are replacing that default menu. Then just drop in the code from this Github Gist.

Sass for Bootsrap’s Menu

When you see that super gross amount of Sass and are unfamiliar with Bootsrap, you will probably be a little bummed… it does take a bit of messing with things to get a grasp on it. It is doable though.

If using just boring ass CSS

Shame on you, learn Sass sooner than later. Now, to do this with CSS, you will need to find the comment in the style.css that looks like this.


/* navigation main menu
   ========================================================================== */

You are going to want to delete all the previous code that is there for the old menu system, don’t delete anything after the next CSS comment “navigation, buttons and forms”. Now just drop in the code from this Github Gist.

CSS for Bootsrap’s Menu

The CSS isn’t as crazy looking as the Sass, but it is still massive.

Pray it works.

Hopefully everything went smoothly. Remember those few small chunks of code you removed to add these massive Bootsrap chunks? Yeah, that is why I didn’t add dropdown menu functionality. What would be even worse is if I did add it, and you had to remove all that cruft just to put in something simple.

Categories
Posts

Responsive Base Plus

A new version of the Thematic Theme Framework is around the corner, 2.0 is in beta. There are a quite a few changes with the new version, but the major one is the new HTML5 structure.

With the new features of Thematic, there is a overlap of functionality from my older child themes. I opted to make a completely new theme instead of updating the old ones, the way I setup themes has changed a lot from a year ago.

The new Responsive Base Plus is made to work with Thematic 2.0+. Keeping with my previous philosophy, I built the theme as my starting point for rapid development when creating custom themes, but you may also find it very useful.

Responsive Base Plus Demo

Demo Responsive Base Plus

Download Responsive Base Plus

Visually the themes scaled back to keep it minimal, but with a little more styling than before to make it slightly more appealing.

New in Responsive Base Plus

Thematic is now using the Theme Customizer which allows you to easily switch between predefined layouts in the WordPress Admin. By default Thematic adds options for a left sidebar, right sidebar, three column, and single column layout hooks for you to work with. If you are producing a theme for a client just be aware that you will need to either setup the CSS to work with the design, or disable the layout options. For detailed information on layouts check out the Thematic Wiki page.

Sass is now playing a larger role in the theme, if you aren’t using Sass, just delete the /scss/ folder and carry on with editing the style.css file as normal. If you are using Sass, you will need to also include Susy, it is what is currently handling the responsive grid layouts.

Normalize.css which preserves browser defaults (as opposed to a resetting them) has now been built into the theme, so it makes the Sass/CSS look slightly more complicated than before, but this is the way normailize.css is intended to be used.

In the CSS/SCSS I have switched the styling to use the new classes that Thematic 2.0 supplies. There are still a few left over stragglers that do not have classes available, forcing you to use the ID.

I really don’t like using any ID selectors in CSS because they massively increase the specificity. Instead I opted to use an attribute selector, which has the same specificity as a normal CSS class. It is pretty nit-picky on my part, but it feels good still not using ID’s.


// old id selectors
#links-page,
#archives-page {
    overflow: hidden;
}

// new attribute selectors
[id="links-page"],
[id="archives-page"] {
    overflow: hidden;
}

It also seemed like a good time to drop support for Internet Explorer 7 and 8. I removed everything that was added specifically for these browsers since there are multiple ways to handle them, if you even have to. It also makes the theme more future proof.

I now use gulp to automate my workflow a bit, so you will notice a package.json file and gulpfile.js in the theme. If you are not using gulp, just delete these files. Don’t know what gulp is? Watch some YouTube videos and if you are feeling adventurous, I recommend taking the leap.

TL;DR

Responsive Base Plus is much more powerful than its predecessor, it was built for my current workflow. There may be a few things that are new to you, but you can safely bet there is a good reason it’s built that way. I hope you find it useful as a learning tool and starting point for your responsive child themes. Feel free to let me know if you have any questions.

Categories
Posts

2014 Thematic Child Theme

A little late, but I try to change my WordPress theme at least once a year. This is a process I dread, mostly because I am not a designer and just trying to figure out a color scheme can take days only to revert back to what I started with.

I am doing something different this year and throwing the theme up on Github so others can tinker with it. So feel free to use it as is, or whack away at it till you get something you want. Since this is my current theme, expect things to change.

Download WordPress Theme

This theme is a child theme for the Thematic Framework, it allows me to test out the new Thematic 2.0 (still in beta) which incorporates some new features and code to make it a little more modern.

Update: This theme has now been converted to a Responsive Base Theme for Thematic 2.0, which is a much better starting point. It is also available on Github, still need to write docs.

So what is new?

My workflow has completely changed. I am not going to explain anything in detail, just a brief overview of what has changed.

I am now using gulp. Switching to gulp from something like Compass.app to compile my Sass has been by far the biggest boost to productivity. I made the switch because I was having trouble getting Autoprefixer to work and I was hell-bent on incorporating it into my workflow. With gulp, I now have Autoprefixer working with LiveReload, so I don’t have to bother with keeping up with vendor prefixes and when I save the file my browser automatically refreshes. I also set it up to spit out a minified version of the CSS, but I don’t use that so others can view my code to learn (or steal it).

If you’re interested in learning gulp, there are tons of videos out there so you can get an overview of using it and an awesome article I would recommend is “Getting started with gulp” by Mark Goodyear.

I dropped using Compass (Sorry Compass), the only reason I was using it before was for vendor prefixing for things like transitions and gradients. Now Autoprefixer makes all that obsolete. Compass use to also be a required dependency for Susy Grids, but now Susy Grids 2.0 doesn’t need it any longer.

I finally got with the times and have started using FTPloy. I work on the site locally, then push the updated files to Github, FTPloy sees the files have changed and pushes that up to my live site. So no more working on the site live, but this setup allows me to still be lazy (the reason I worked on it live in the first place).

Categories
Posts

Placement of Media Queries

While going through a redesign of my website, I forced myself to place the media queries inside each #id and .class using Sass, instead of at the bottom in a huge clump. The idea of this isn’t something new and if you are using gzip there are no performance drawbacks. I just couldn’t visualize why having media queries spread all through the document would be better than having them in a nice organized block at the bottom of the CSS.

Using Sass and a mixin does make adding media queries easier, I adopted using Chris Coyier’s handy Sass Breakpoint mixin. The one thing I wasn’t crazy about was the mixin was not a mobile first setup, so I modified it because once you start setting up your code to be a mobile first structure, you won’t ever go back.

It wasn’t long before I needed a custom breakpoint and again modified it. The concept of being able to add a custom breakpoint of any value whenever you need one is very refreshing, best summed up by Stephen Hay.

Start with the small screen first, then expand until it looks like shit. Time to insert a breakpoint!

The revelation of not being so bound to predefined media query breakpoints is very powerful and adding them in the class they pertain to ended up being better for organization.

The most important thing is the Sass mixin increased my overall workflow speed, especially when combined with a SublimeText snippet, which is probably the greatest benefit.

Sass Media Query Breakpoint Mixin


@mixin breakpoint($point) {
    @if $point == medium {
        @media (min-width: 30em)  { @content; }
    }
    @else if $point == large {
        @media (min-width: 50em) { @content; }
    }
    @else if $point { // allows custom breakpoints
        @media (min-width: $point) { @content; }
    }
}

Sass Breakpoint Usage


.content {
    // mobile-first styles here
    // the idea is styles here will work for mobile all the way to desktop
    // you then override the styles with the breakpoints below as things get more complex or additional functionality is needed

    @include breakpoint(medium) {
        // medium defined breakpoint styles
        // this is where you put styles that are applied to medium and large
    }
    @include breakpoint(large) {
        // large defined breakpoint styles
        // this is where you put styles that are only applied to large
    }
    @include breakpoint(80em) {
        // custom defined breakpoint styles
        // this is where you can add any value and create any additional media query you need
    }
}

Why Medium and Large?

Someone might wonder why I chose to use medium and large as breakpoints instead of only custom variations. It has to do with I like to have multiple things happen at the same time and felt safer to have things like the layout and fonts in media queries change at specific width, doing a custom width for everything is overkill, but having the option is awesome.

Yes, you can convert these to pixels if you haven’t made the leap into using em units for media queries.

Simple Breakpoint Example

This is a very simple example of changing the font size for the whole site as it scales up from mobile to desktop.


body {
    background: $background;
    font-family: $body-font;
    font-size: 100%;
    line-height: 1.625;
    color: $body-color;

    @include breakpoint(medium) {
        font-size: 112.5%;
    }
    @include breakpoint(large) {
        font-size: 125%;
    }
}

Update: Added Codepen demo to show an example.

SublimeText Breakpoint Snippet

Hopefully you are using SublimeText as a text editor, if so Chris Coyier posted a video showing usage of a Sublime Snippet by James Nowland so you can output the breakpoint by just typing “mq + Tab” (or “mq + Enter” if you use Enter instead of the Tab trigger like I do to avoid conflicts with Emmet).

This snippet has been modfied to use my version of the Sass Breakpoint Mixin above, which I prefer. Josh Hibbert mentioned in comments on the video that you can insert a tab trigger after the snippet to get the cursor to tab to a new line, small optimization but very handy.


<snippet>
    <content><![CDATA[
    @include breakpoint($1) {
        $2
    }
    $3
    ]]></content>
    
    <tabTrigger>mq</tabTrigger>
    <scope>source.css, source.scss</scope>
</snippet>
Categories
Posts

Thematic and Grid Systems

So you are wanting to add a grid system to the Thematic Theme Framework for WordPress. Grid systems make theme development super easy right? Not necessarily.

Occasionally a question will pop up on the forum involving incorporating a gird into Thematic. Most of the questions involve adding classes like grid_6, span-5 to the HTML Thematic outputs to add the styling for their framework of choice. You can do that by adding functions and filters to your functions.php file, but this is the wrong way to do it and causes a lot of code bloat.

Grids are suppose to make things easy, once you step into the realm of having to add classes to the existing markup to match whatever syntax the grid system is using, you are already making things harder than they need to be.

zen-grids-example

View Demo

This example is going to be a little complicated for some and super easy for others already familiar with Sass and Compass. If you don’t know what Sass and Compass are, watch this first for a little bit of a background. This post isn’t really a tutorial, but more of a visualization of how easy it can be to work with a grid system in Thematic. You will obviously need Sass and Compass for this to work.

The code is specifically set up for using the Responsive Base Theme I have created for Thematic and the grid system style I will be aiming for is the default Thematic layout.

Zen Grids and Thematic

Zen Grids is a responsive grid system built to work with Sass and Compass, in my opinion it is one of the easier ones out there to understand. You will have to most likely visit the Zen Grids site and follow the simple setup tutorials, once setup though, it is a breeze.

The first thing we need to do is import Zen Grids in the top of the style.scss file. If you are on PC and using Scout, there is no real setup, Zen Grids is built in, you need to change the import to just @import "zen";.


@import "zen-grids";

Next we need to set a couple Sass variables so the grid system knows how many columns we are using and the width of the gutters.


$zen-column-count: 12; // grid columns
$zen-gutter-width: 2em; // gutter width

Since the responsive base theme I have created is a “mobile-first” structure, all the base CSS is already set and only things that need to be changed are in the media queries. So we need to swap out the previous media queries at the bottom of the style.scss file with the new Zen Grids setup.


@media only screen and (min-width: 45em) {
    #wrapper {
        @include zen-grid-container;
        max-width: 1140px;
        margin: 0 auto;
    }
    #branding {
        @include zen-grid-item(12, 1);
        width: 100%;
    }
    #access .menu {
        @include zen-grid-item(12, 1);
        @include zen-clear(both);
        width: 100%;
    }
    #container { @include zen-grid-item(8, 1); }
    #main {
        @include pie-clearfix;
        width: 100%;
    }
    .main-aside { @include zen-grid-item(4, 1, right); }
    #secondary { @include zen-clear(right); }
    #subsidiary {
        @include pie-clearfix;
        width: 100%;
    }
    #first { @include zen-grid-item(4, 1); }
    #second { @include zen-grid-item(4, 5); }
    #third { @include zen-grid-item(4, 9); }
    #footer-widget { @include zen-grid-item(12, 1); }
    #siteinfo {
        @include zen-grid-item(12, 1);
        width: 100%;
    }
    blockquote {
        &.left {
            float: left;
            width: 33%;
            margin-left: 0;
            margin-right: 1.5em;
            text-align: right;
        }
        &.right {
            float: right;
            width: 33%;
            margin-left: 1.5em;
            margin-right: 0;
            text-align: left;
        }
    }
    .sf-menu li { float: left; }
    .content-column {
        float: left;
        width: 45%;
        margin: 0 0 1.625em;
    }
    .navigation {
        margin: 0 0 1.625em;
        overflow: hidden;
    }
    .nav-previous {
        float: left;
        width: 50%;
    }
    .nav-next {
        float: right;
        width: 50%;
        text-align: right;
    }
    .page-template-template-page-fullwidth-php #comments { @include zen-grid-flow-item( 8, 12); }
}

That is it, there is a little bit of extra markup in there for additional elements, but only because I wanted to recreate the exact same layout as the Responsive Base theme, but with the added benefit of Zen Grids.

If you need help understanding the code, I would recommend checking the Zen Grids help page which is well documented.

This is by no means the “optimized” way to add Zen Grids, there a a few things that can be done to cut the code down a bit and make things “DRY“, but the idea is to see a simple example of the power Sass and Compass can add to your projects. Keep in mind that a grid system is not always required, but if you are creating sites over and over it may be beneficial to your workflow.

With all that said, personally I have dropped playing with Zen Grids and focused my attention on another grid system that seems to be the best I have found so far, it is called Susy and if you are going to go the grid route, I highly suggest looking into it.

Update: This site is now built using Susy Grids, so far they are awesome.

Categories
Posts

Thematic and Icon Fonts

There are plenty of tutorials and oodles of information floating around about icon fonts, they are all the rage right now. There are awesome things achievable with icon fonts and they can provide a lot of flexibility in your development workflow. It seems some people get the impression that using fonts as icons is overly complicated, so my goal is to provide a few simple examples of using icon fonts with the Thematic Theme Framework for WordPress.

I am going to show you how to use fonts for icons the easiest way possible, then explain a even better way afterwards, but currently the goal is just to get you setup using icon fonts with your Thematic child themes. We are going to be using a handy little API from We Love Icon Fonts.

We Love Icon Fonts with WordPress

We are going to be using the Entypo set of icons for now, but you can swap these out later for a different set. The We Love Icon Fonts sites example uses an @import, while easier, I usually avoid using @import in stylehseets for performance reasons. So lets load that instead in the header as is best practice with any stylesheets when using WordPress.

Enqueue Icon Fonts Styles

This snippet will register and enqueue the weloveiconfonts.com API styes for use in the theme, this will work for any WordPress theme, not just Thematic. Just drop this into the functions.php of your child theme, or theme if you aren’t using a child.


// enqueue font icons
function childtheme_icon_fonts() {
    // registers weloveiconfonts.com icon font api styles
    wp_register_style('icon-fonts-css', 'http://weloveiconfonts.com/api/?family=entypo');
    // enqueue the scripts for use in theme
    wp_enqueue_style ('icon-fonts-css');
}
add_action('wp_enqueue_scripts', 'childtheme_icon_fonts');

Required CSS to call Icon Fonts

Just drop this CSS in your style sheet.


[class*="entypo-"]:before { font-family: 'entypo', sans-serif; }

That’s it. Now all that is needed is to add a specific class with a name on the element to call the icon, for example .icon-home.

The CSS included in the demos is very basic, they are styled with just enough structure to get you started on making them your own. The demos were set up in Sass, so if you prefer that you can grab it off the SCSS section tab in the demo.

Social Icon Font Example

Check out this Pen!

One of the most popular uses is social icons, sure you can use images, but icon fonts are cooler. This is a basic setup using Thematic’s existing structure for providing a few links to your social networks in the sidebar. :)

Social Icon Font PHP

This snippet will go in the functions.php of the child theme. We are using some existing CSS classes to keep the same structure from Thematic to keep things uniform in the sidebar, hooking the function on to the thematic_belowmainasides hook.


function childtheme_social_icon_fonts() { ?>
    <div id="tertiary" class="aside main-aside">
        <ul class="xoxo social-icons">
          <li><a class="entypo-twitter" href="#" title="Twitter"><span>Twitter</span></a></li>
          <li><a class="entypo-facebook" href="#" title="Facebook"><span>Facebook</span></a></li>
          <li><a class="entypo-github" href="#" title="Github"><span>Github</span></a></li>
          <li><a class="entypo-rss" href="#" title="RSS"><span>RSS</span></a></li>
        </ul>
    </div>
<?php }
add_action('thematic_belowmainasides', 'childtheme_social_icon_fonts');

Social Icon Font CSS


#tertiary { clear: right; }
.social-icons { list-style: none; }
.social-icons li { float: left; }
.social-icons li a {
    padding: 0 0.5em;
    font-size: 2em;
    text-decoration: none;
    text-shadow: 
        1px 1px 0 rgba(0, 0, 0, 0.4), 
        1px 1px 2px rgba(0, 0, 0, 0.4);
}
.social-icons li a:hover {
    text-shadow: 
        1px 1px 0 rgba(0, 0, 0, 0.6), 
        1px 1px 4px rgba(0, 0, 0, 0.4);
}
.social-icons span { display: none; }

This example uses Twitter, Facebook, Github and RSS, the actual text will be hidden, using the icons only, but it is good practice to include it anyway.

WordPress Menu Font Icons

Check out this Pen!

Inserting font icons in the WordPress menu is pretty easy, the way to do it is to add a class through the WordPress Admin built in Custom Menu functionality. There is a section “CSS Classes” where you can add the icon class you want, if you don’t see this option in the menus, check the “Screen Options” in the right top and check that option to show. Since the classes are added through WP itself, there is no additional PHP needed.

WordPress Menu Font Icons CSS


.sf-menu [class*="entypo-"]:before {
    z-index: 3;
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 24px;
    color: #666666;
    text-shadow: 
        1px 1px 0 rgba(0, 0, 0, 0.4), 
        1px 1px 2px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
.sf-menu [class*="entypo-"]:hover:before {
    color: #FF4B33;
    text-shadow: 
        1px 1px 0 rgba(0, 0, 0, 0.6), 
        1px 1px 4px rgba(0, 0, 0, 0.4);
}
.sf-menu [class*="entypo-"] a { padding: 9px 13px 9px 38px; }
.sf-menu [class*="entypo-"] li a { padding: 9px 13px; }

Just don’t forget you need to add the classes through the WP Admin Menu.

Navigational Font Icons

Check out this Pen!

Thematic by default has two separate navigation structures, one is for navigating the Older/Newer posts and the other is on single post pages that show the title of the previous and next post. Most sites I work on do not include the navigation on the single posts. This example removes the single post page navigation and instead replaces the standard Older/Newer navigation in WordPress with some font icons to replace the default text.

Navigational Font Icons PHP

The first function completely removes the upper navigation (personal preference), instead we are only going to be using the lower navigation. The second function removes the navigation on single pages and changes the structure to give some better hooks for adding some font icons arrows instead. I also added a title in since there is no text, at least the title “Older posts” or “Newer posts” will show on hover, which is helpful.


// override nav_below functionality - remove it completely
function childtheme_override_nav_above() {
    // silence
}

// override nav_below functionality
function childtheme_override_nav_below() {
    if ( !is_single() ) { ?>
        <div id="nav-below" class="navigation">
            <div class="nav-previous"><?php next_posts_link('<i title="Older posts" class="entypo-left"></i> <span>Older posts</span>') ?></div>
            <div class="nav-next"><?php previous_posts_link('<span>Newer posts</span> <i title="Newer posts" class="entypo-right"></i>') ?></div>
        </div> <?php
    }
}

Navigational Font Icons CSS


.navigation {
    margin: 0 0 1.625em;
    overflow: hidden;
}
.navigation a {
    display: block;
    height: 5em;
    width: 5em;
    line-height: 5em;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}
.navigation i {
    font-size: 5em;
    color: #666666;
    font-style: normal;
}
.navigation .nav-previous {
    float: left;
    width: auto;
}
.navigation .nav-next {
    float: right;
    width: auto;
}
.navigation span { display: none; }

Now the kicker.

While this is a viable way to achieve font icons and is usable, there is a better way to do this if you are trying to keep everything optimized (as fast as possible). The idea is instead of letting We Love Icon Fonts handle the loading of the fonts, you instead use a service to trim down the fonts to exactly what you need, so you load 4 icons in the font instead of 40 and handle the serving of the font files yourself. There are some great services out there like IcoMoon and Fontello which make it a breeze. So hopefully this gives you a leg up on using font icons with Thematic.

A few complex examples.