HTML5 Geo-location API and Google Maps API

In this weeks tutorial we'll be creating a jQuery plugin that serves as an introduction to the HTML5 Geo-location API to request your current location. Once we have the location, we will then draw a route from there to Dublin, Ireland (or wherever you tell it to) using the Google Maps API. This could be used in a HTML5 web application or on a site to tell your customers how to get to you. Getting Started ... First of all we'll need to create our jQuery plugin wrapper. The $.extend function will allow us to provide...
read more

Adding custom next/previous post buttons to WordPress using Font Awesome

The default WordPress theme (TwentyTwelve) comes with a pretty standard previous/next post function for the theme. I don't particularly like the links as they feel a little forgotten about and they could easily be so much more. This snippet will show you how to create a custom navigation function and we'll be using Font Awesome to add some icons. Adding Font Awesome ... Font Awesome is quite literally awesome. It's a collection of over 360 icons presented as a font. This means you can easily add it to any...
read more

Automatically generating a table of contents with a smooth scroll effect

Ever written a long article worthy of a table of contents and decided not to do it because it's just too much hassle? This week we'll be writing a jQuery plugin that will automatically search for your headings and create a table of contents based on them for your blog post. We'll also be adding a smooth scroll effect, so that when a user clicks on an entry they are brought to the right section. I know a table of contents is a bit of an unusual topic for a tutorial, but if you're writing a help file for your product,...
read more

Using jQuery to add a dynamic “Back To Top” floating button with smooth scroll

Ever read a really long blog post or article and then had to scroll all the way up to the top of the screen to get to the menu? It can be a little frustrating. It's easy to fix, you can have a fixed menu or as you'll see here you can provide a quick and stylish way to get back to the top. Getting Started ... HTML wise all we need to do is add a "back to top" link at the bottom of the blog post <a href="#" class="back-to-top">Back to Top</a> We then need to style and position it. Here I'm setting its position...
read more

Adding a “You might also like” overlay to another WordPress post using scroll events

How do you encourage users to stay on your site and how do you let them know about the rest of the great content you have on your site? If a user has read or is reading and article on your site, they may like to know about similar content. You could have a series of thumbnails or related articles, but why not give a specific post a little more priority? In this tutorial we'll be using jQuery to detect when the user has scrolled to or near the bottom of the article. Once they are near it, we'll display a small overlay...
read more

Customizing the WordPress footer by adding widgets

The footer is often overlooked when it comes to designing a site, but it's a great way to find contact details or other important pieces of information. People have been trained to look there since the days of letter writing. Even today if you look at any correspondence, utility bill or company letterhead you'll find important information. On websites it's an can be an important navigation tool, it can give you quick access to commonly needed pages that are not core to a site. In this quick tutorial we'll...
read more

A WordPress slider template (with CSS3 animations and minimal jQuery)

Almost every site you see these days has an image slider on the front page. They come in all sizes and depending on who you ask, they have limited benefit to a sites traffic or navigation compared to the amount of space they take up. But they look pretty and when used correctly can be fairly effective. This tutorial aims to create a simple WordPress page template with a slider that allows you to include a few posts that have been added to a slider category. To make it more interesting, we're going to make it book-markable,...
read more

CSS3 and the nth-child

How many times have you seen a piece of JavaScript or PHP code that's only purpose is to add a specific class to the first, alternate or last element of a list or row of table? With CSS3 you can easily get rid of all of that logic and replace it clean and simple CSS selectors. This will help tidy up your code and depending on what exactly the code is doing reduce CPU load by removing unnecessary recursions (This is of course a minimal gain, but every little bit counts) What is the nth-child ... The nth-child is a pseudo-class...
read more
Load more