Articles > Tutorial

CSS

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,...
CSS

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...
CSS

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,...
CSS

5 Quick and Easy Tricks To Improve Your WordPress Theme

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...
CSS

GitHub Plug-in for WordPress

For the last few years I've run my own Subversion (SVN) server on either a spare box and more recently with a paid for server. This was mainly because my work was private and I was familiar with SVN, and I found that the TortoiseSVN client was excellent and easy to use. My needs have changed and evolved over the years, particularly in the last few months since I started these tutorials. So I have decided to start moving new projects and some of my tutorials to GitHub. I've been watching GitHub progress over the...

OAuth2 and the LinkedIn API – A WordPress CV/Résumé plugin

Continuing on from last weeks introduction to OAuth 2.0 using the Twitter API, this week we're going to focus on an alternate implementation of OAuth 2.0 used in the LinkedIn API. This implementation requires that you manually authorize the application before you can get a token. This implementation is a more complex as it requires you to be re-directed to the authentication server, which then re-directs you back to your own site with the approved token. This allows LinkedIn to add additional permissions...
PHP

Turning a WordPress shortcode in to a Widget

In my last tutorial we created a shortcode for displaying recent Tweets using the Twitter API and OAuth2.0. Having thought about it a bit more, I think that it would be quite handy to have it as a widget as well. It's actually very easy to turn any shortcode in to a widget, and this logic could be used for lots of different shortcodes. Getting Started ... First up, we'll need to grab the source code from the previous tutorial. Underneath our previous class we're going to get the sample class from the WordPress...
CSS

OAuth2 and the Twitter API – A WordPress plugin

Building on the last few WordPress related tutorials, this week we'll being using the Twitter API to display a users most recent tweets using a shortcode. Several of the existing tutorials and code examples out there use the old version of the API or the search API that do not require authentication. This API has been deprecated and been replaced with version 1.1. Although it still works, Twitter can disable it at any time. One of the main changes to the API with the introduction of the 1.1 API was the implementation...
Load more
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress