Articles > Snippet

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

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

Using wp_cron to disable commenting on old posts

One of the little known, but incredibly useful functions of WordPress is wp_cron. It allows you to schedule tasks for execution at a later time, the tasks can also be repeatable. It's not perfect and does have one serious problem, in that it is only executed while users are actually navigating the site. But on a popular site this won't make a difference, but it's still worth noting. Something I see regularly been asked for is the ability to disable commenting on or delete/hide older posts, generally for...

Adding a simple authentication using PHP require and includes

Please note that this tutorial has now been superseded by a later, more in-depth tutorial available here Continuing on with our to-do application, in this weeks snippet we're going to be using PHP's require_once function. The require_once function is similar to the require function, in that it will execute and include any php code with the calling file but with one vital difference. It will only execute once. This is important for us in this tutorial as we are going to use it to validate our user. There...

Turning a form element into JSON and submiting it via jQuery

Continuing on with our work on creating a To Do Application, this weeks snippet is on how to submit a form using jQuery. This snippet expands on what was covered in the previous tutorial, so if you've just joined us you might want to read it first. JSON - JavaScript Object Notation ... Last week we saw how to intercept the submit event of a form, this week we're going to complete that method and use jQuery to perform the submit for us. There are several ways to send data back, we're going to focus on JSON. JSON stands...
CSS

A Continuous CSS3 Animation

Introduction ... Static headers with boring backgrounds are everywhere... why don't you try and spice yours up with a simple CSS animation? I'd like you to meet Bob, he's my friendly static image and he'd really like to wave hello to you! Let's give him the chance. First up we'll need to do a quick operation and temporarily remove his arm (Sorry Bob!) Then we're going to rotate his arm (very gently) by 45 degrees. Now we can start re-assemble him using some simple HTML <div class="logo"> <div class="arm"></div>...
CSS

Recreating the Developer Drive logo with just CSS, no Javascript or Images

I quite like the developer drive logo animation. I remember seeing it a when I first found the site and thought it was simple, yet effective. I also wondered if it would be possible to replicate it using just CSS. In this snippet we'll cover CSS3 transitions and using @font-face to import some custom fonts. The first thing we need to do is import out fonts, I wasn't sure what the current 'd' font is so I have a similar font. The best place to go is www.fontsquirrel.com, you can pick from a wide selection of fonts...
Load more
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress