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...
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,...
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...
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...
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...
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,...
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...
There are a few behaviors I normally change when I'm writing a WordPress theme. Some of them are pretty basic, but they can really enhance the theme my making it go that extra mile. Customize The Login Page ... Even though you can't include a custom login page in your theme, it's actually quiet easy to customize the existing one. If it's just changing the logo or giving it a completely different layout, the place to start is the login_enqueue_scripts action. Here you can decide to output a simple piece of...