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,...
A few weeks ago in my Google Maps Shortcode for WordPress tutorial I covered how to create a basic shortcode. All of the settings required for the Google Maps API where included as configurable attributes for the shortcode. It was discussed in the comments that perhaps it would be better to set some of those options globally. One option discussed was modifying the wp-config.php file, this I don't think is a great idea. It would mean that it could be potentially overwritten by upgrades and is not easily...
When I first started playing around with websites in the late nineties (wow, I feel old now) there wasn't much in the way of choice for development IDE's, there was really only Microsoft FrontPage and Macromedia (now Adobe) Dreamweaver. Being honest they weren't great, Dreamweaver's big claim to fame was that it generated cleaner html than FrontPage. Both where poor by today's standards, this was mainly because they where WYSIWYG editors, allowing even novices to create simple pages. When I went...
This week, we'll be creating a simple jQuery gallery that uses the Flickr API to retrieve a list of images from a photo set and display them. We'll also be using the API to get some additional information about the images and storing it using the HTML5 data-* attributes The Flickr API ... To use the API you need to register for an API key, it doesn't take long and you can start here There are 2 methods that we will be using for this tutorial, first we'll need to get name and description of the specified photo set....
This week we'll be extending WordPress by adding a custom shortcode. This shortcode will allow us to add a Google Map to a post using a simple piece of text in a post or page. Shortcodes are a quick and easy way to add functionality to a post in WordPress. They look something like this: [ gallery ids="1,2,3,4"] We'll also using PHP based Object Orientated Programming (OOP) to create our shortcode. We'll create a basic class, that has some static functions with in. We'll be using static methods because we...
Plugins play a great part in the success of jQuery. There are hundreds of them out there, and having the ability to create your own is a great skill to have. With all of the interest in Pinterest (no pun intended), I thought it would be a good idea to do up a quick and simple Pinterest sharing plugin for jQuery. Getting started ... First we need to grab the jQuery plugin boilerplate (function( $ ) { $.fn.pinterest = function(options) { var settings = $.extend( { }, options); return this.each(function() { });...
Continuing on from last weeks tutorial (Creating a simple to-do application – Part 1) and the short snippet (Turning a form element into JSON and submiting it via jQuery ), this week we'll be writing a PHP page to accept and process the form submit and return a JSON response. Installing PHP on your web server ... There are several ways to install PHP to your web server, but each is dependent on what web server you are running. The two main ones I will deal with are Microsoft's Internet Information Services...
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...