Recreate The Github Search Box

In this tutorial we are going to recreate a slide out search box just like what you will find on Github.

GitHub

What's different about this search box is that it will start with a small width and then when the user clicks into it to write their search it uses CSS transition to change the width of the search box.

The whole process of this is quite simple using basic CSS transitions but I think the effect is done really well.
Continue reading »

Creating A Custom Taxonomy In WordPress

WordPress comes with inbuilt functionality which enables you to group posts or post types together. This functionality is called a taxonomy, by default WordPress comes with two default types, there is categories and tags. The difference between a category and a tag is that categories can be grouped in a hierarchy so you can have parent categories.

Tags give you more freedom then categories you can add new tags easily by typing them in the tags textbox on the post screen. Normally a post will have multiple tags but will only one category.

In a normal blog website having just categories and tags is enough functionality to group your posts, but WordPress is a CMS and can be used to create custom post types. These new post types might not fit into the previous taxonomies you have used, so you might have to create a new taxonomy to allow you to group your new post types.
Continue reading »

Set Minimal Comment Limit In WordPress

The reason for comments being turned on a blog is to add more in-depth discussion to a certain post. But some people comment just to get a link back to their own site, these comments will consist of things like "nice post", "thanks", that add nothing to the discussion of the post.

Most of the time blog owners will use moderation to delete these types of comments from appearing on the site, but if you have a popular site this can take up a lot of time. If you are getting annoyed with having to delete all comments like this then we can place a minimal character count on your comments.

For this you can use the filter preprocess_comment to check the comment before it is saved to the database. Within this filter you can check the character count of the comment by using the strlen() function.
Continue reading »

Creating A Custom Post Type In WordPress

WordPress has the ability to have different types of post types, the main post type you will use in WordPress is the post type called post. But there are other defaults such as Pages and Attachments. All the post types in WordPress are stored in the same table wp_posts there is a column on this table which will decide the type of post, this is defined as post_type.

In version 3.0 of WordPress a function was created to allow you to easily create your own post types.

Default Post Types

The 2 main post types are the post and the page, the main differences between these two post types is how they are used in WordPress to display your content. A post is mainly used for a blog like structure, is will allow you to easily display all your content is a published date order. This means that you can display a list of all your posts in the order of when they were published. You can use this post type for any content that can be ordered by date, it doesn't have to be blog posts.

Another difference of posts over pages is the ability to assign categories and tags to group the posts together, for example in a blog you can create an article category, tutorial category, a news category. Now you can view all the posts in these categories again in a date order, to show all the possible posts.
Continue reading »

Force SSL On Certain WordPress Pages

There are going to be certain pages that you want to force SSL, so that the browser will redirect you to this page using a HTTPS connection so the data that is posted from this page is encrypted and secure.

This might be for any custom login pages you create in your application, or a credit card payment page. Normally you will have to write a script to force this page to be in SSL, but if you are making your application with WordPress you can use WordPress to redirect the browser to HTTPS by using the force_ssl filter.

This filter will run on every page and is used to decide if WordPress should redirect to HTTPS. Returning true from this function will automatically redirect the user to HTTPS and allow you to collect secure data from this page.
Continue reading »

Check A Credit Card Number Passes Luhn Check

When you accept credit card numbers on your website you need to do a number of different validation checks on the credit card numbers the user enters. When the form is submitted you will need to check that the user has filled out the correct credit card number, expiry date and security code number. Before you send this to the bank or payment gateway for them to validate and process you can do a couple of basic checks to make sure your not sending them poor data.

For example you can check if the expiry date is not empty and is in the correct format of mm/yy, you can check that the security code number is 3 digits and check that the credit card number is 16 digits long.
Continue reading »

Add Custom Post Meta Data To Post List Table

One of the best thing about WordPress is that you can customise almost anything. In the admin area you can see a list of all the posts you have added in WordPress. Within this table it shows the basic information for each of the posts, the title, the author, the category, tags, comments and the date the post was published.

WordPress has a number of different filters and actions that allow you to edit the output of the column so you can add your own data to this list. For example if you have custom post meta data which is useful information you want to display on the list of posts you can add new custom columns to the list.

In this article you will learn how to add new columns to the post list, how you can add data to the column and how you can make this column sortable.
Continue reading »

Display Disqus On Click Event

I have recently redesigned Paulund and it was design to concentrate on page loading speeds, I wanted to make Paulund load as fast as possible. There are lots of things you can do to improve the loading speeds of your website, you can compress images, improve your web hosts, make your website code more efficient. But one thing that I choose to do with this redesign was to reduce the amount of HTTP requests each page makes when it first loads.

When looking into the amount of HTTP requests each page was making I noticed a large amount of HTTP calls being made from Disqus. This is a commenting system that you can place on any website, it makes it really easy to add to any site as you just need to include a couple of lines of Javascript to your page. If your site is running WordPress it's even easier to include on your site as you just need to download the WordPress plugin.

Disqus
Continue reading »

Adding A New Color Picker With WordPress 3.5

In version 3.5 WordPress changed a lot of features, they improved the design of many of the existing features. One of the changes was the new color picker, changing from the default color picker farbtastic and now using a new custom color picker.

This new color picker was originally used on WordPress.com, after a couple of months of testing in WordPress.com blogs the color picker was moved over into the WordPress core. Now on the new version of WordPress 3.5 you can now use a new gradient based color picker called Iris.

iris-color-picker

If you have used the new theme customiser then you would of already seen the new color picker. The easiest way of using the new color picker is in the theme customiser which can be added by using the theme customiser custom color.
Continue reading »

Free Premium Files For April 2013

Each month the Envato marketplace brings you free premium standard files.

Envato is a web marketplace where you can get premium files for different areas of your website. My favourite marketplaces is the script marketplace CodeCanyon and the theme marketplace ThemeForest.

Here are the files which you can get for free for April 2013.

Responsive Twitter Timeline

Responsive Twitter Timeline
Continue reading »