In WordPress you start off with 2 default types of posts you have the standard posts and you also have pages.

For these types of posts WordPress will use different PHP files to display the content, the standard posts will use the single.php file and the pages will use the page.php file.

But the problem with this is that you can only use one file for your pages so you can’t have different page layouts or styles. This is why WordPress created the ability to create custom page templates, which allows developers to create as many different page templates as they want.

Create A Custom Page Template

To create a custom page template all you have to do is add a new blank php file to your theme directory and save this as custom_page_template.php. Within this new file all you have to do is add comments to the top of the file.

[php]
/*
Template Name: Custom Page Template
*/
?>
[/php]

Adding this to the top will automatically add this file to a drop down when adding a new page, from the drop down you will see the default template (page.php) and Custom Page Template.

If you select the new page to use the Custom Page Template then this will override the page.php and your page will use your custom page template.

Examples Of Custom Page Template

Some of the common examples of custom page templates are contact pages, full width pages and archive pages.

Create A Contact Page Template

The contact page will make it easy for your website visitors to send an email to the admin email address of your WordPress blog.

Below is an example to use for a contact us page, you can copy and paste this code into a new PHP file to easily add contact pages to your WordPress theme.

[php]
/*
Template Name: Contact
*/
?>

$nameError = '';
$emailError = '';
$commentError = '';
$sumError = '';

if(isset($_POST['submitted'])) {
if(trim($_POST['contactName']) === '') {
$nameError = 'Please enter your name.';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}

if(trim($_POST['email']) === '') {
$emailError = 'Please enter your email address.';
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$emailError = 'You entered an invalid email address.';
$hasError = true;
} else {
$email = trim($_POST['email']);
}

if(trim($_POST['comments']) === '') {
$commentError = 'Please enter a message.';
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}

if(trim($_POST['sum']) === '' || trim($_POST['sum']) != '11' ){
$sumError = "Please enter what's 7 + 4";
$hasError = true;
}

if(!isset($hasError)) {
$emailTo = get_option('pu_email');
if (!isset($emailTo) || ($emailTo == '') ){
$emailTo = get_option('admin_email');
}
$subject = '[Contact Form] From '.$name;
$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
$headers = 'From: '.$name.' <'.$emailTo.'>‘ . “\r\n” . ‘Reply-To: ‘ . $emailTo;

mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}

} ?>

[/php]

Full Width Page Template

The full width page template is a template I use which the main difference is that the sidebar has been removed and makes the content area stretch across the width of the page.

[php]
/*
Template Name: Fullwidth
*/
?>

[/php]

Create An Archives Page Template

The archive page template will display a list of all your old post. In this template it will list all the posts from the previous 30 days, list the posts by month and list the posts by category.

Copy the following in a new PHP page template.

[php]
/*
Template Name: Archives
*/
?>

[/php]

Which custom page templates do you use?

WordPress has a autosave feature which will automatically save a revision of your post as you are typing. But the problem with this comes when you have a WordPress blog with hundreds of posts. Each one of these posts will have a number of automatically saved post revisions.

This can quickly add thousands of a posts to your wordpress database.

The following WordPress snippet will allow you to pick how many post revisions each post has or if you want to turn off the auto save feature.

To change the post revision to save 3 revisions add the following to your wp-config.php file.

[php]
define(‘WP_POST_REVISIONS’, 3);
[/php]

To turn off the auto save feature add the following to your wp-config.php file.

[php]
define(‘WP_POST_REVISIONS’, false);
[/php]

In WordPress there is a couple of inbuilt functions that allow you to display the amount of SQL queries and the time it took them to run on any page.

Using this display you can then see what affect different changes make to your WordPress database.

Some of the tips mentioned in 11 Steps To Speed Up Your WordPress Site talk about database optimisation and reducing database calls by caching. It is very useful to take note of how long a page takes to load before and after you make these changes to see what affect they have.

Below a snippet you can use to display both the amount of queries and the time it took them to run. But you don’t want these stats to be displayed to every visitor to your site so make sure you wrap them in a if statement to check if the user is logged in.

[php]
if(is_user_logged_in()){
echo get_num_queries().' queries in '. timer_stop(1) .' seconds.';
}
?>
[/php]

The Envato marketplace is a set of different websites which are all dedicated to sell premium standard files on all types of files you will need for design and development.

You can get WordPress themes, code scripts, graphics, photos and much more.

In this tutorial we are going to look at how to use the API to get public information and how to turn this into a WordPress plugin to display item information on your Website. We are going to team up the API with your account name to easily earn money from the affiliate account by referring new users to the marketplace.

Envato Marketplace Sites

Currently there are nine sites which make you the Envato marketplace, all providing different things to your design or development projects.

Activeden

At ActiveDen you can buy and sell royalty-free Adobe Flash and Flex files for just a few dollars. Items are priced on the complexity, quality and use of the file. The site is home to a bustling community of Flash designers and developers and is the largest Flash library on the web.

Activeden

AudioJungle

At AudioJungle you can buy and sell royalty-free music and sound effects that are completely Podsafe for just a few dollars. The site is home to a bustling community of audio composers and producers.

Audio Jungle

Themeforest

At ThemeForest you can buy and sell HTML templates as well as themes for popular CMS products like WordPress, Joomla and Drupal with prices ranging from just $5 up to $40. Items are priced on the complexity, quality and use of the file. The site is home to a bustling community of web designers and developers and is the biggest marketplace of its kind.

Themeforest

Videohive

At VideoHive you can buy and sell royalty-free footage and motion graphics as well as After Effects Project files starting at just a few dollars. Items are priced on the complexity, quality and use of the file. The site is home to a bustling community of motion graphics junkies!

Video Hive

Graphic River

At GraphicRiver you can buy and sell royalty-free, layered Photoshop files, vectors, icon packs, Adobe add-ons and design templates for just a few dollars. Items are priced on the complexity, quality and use of the file. The site is home to a bustling community of graphic designers and illustrators.

Graphic River

3D Ocean

At 3DOcean you can buy and sell royalty-free 3D models, textures, concepts, and materials and shaders. Items are priced on the complexity, quality and use of the file.

3D Ocean

Codecanyon

At CodeCanyon, you can purchase and sell scripts and components for a variety of languages and frameworks, currently including JavaScript, PHP, ASP.NET, and Java. Items are priced between $3 and $25; we review complexity, quality, and overall appeal when determining the specific value to assign to an item.

Code Canyon

Tutorials

At the Tuts+ Marketplace you can buy and sell tutorials and eBooks on topics like Design, Web Development and Computer Graphics. Items are priced based on depth and complexity. The site is home to a bustling community of people learning and teaching across all skill levels and is the biggest marketplace of its kind.

Tuts+ Marketplace

Photodune

At PhotoDune you can buy and sell royalty-free photographs and images starting at just $1. Items are priced on the size/megapixels of each file. The site is home to a bustling community of photographers and digital imaging experts.

Photodune

Envato Marketplaces API

All of the websites listed above can be accessed using the Envato API, making it easy for outside applications to use the data stored in the API. An API is a set of routines, data structure and object classes used to access data.

Using the API you can get to data on any of the marketplaces, these are set into 2 sections…public sets and user sets. The public set consists of everything which is publicly available such as new items, popular items, blog posts, users. The user sets consist of everything for a specific user and you need an API key to get to this information.

In this tutorial we are going to look at the public set data and how to create a WordPress plugin to get at this data.

Public Sets API Data

The data which is available for the public via the API is.

• blog-posts – A list of blog posts for a particular site. Requires a site paramater, e.g. blog-posts:activeden
• active-threads – Threads with the most recent messages activity. Requires a site parameter, e.g. active-threads:activeden.
• number-of-files – Shows the number of files in the major categories of a particular site. Requires a site paramater, e.g. number-of-files:activeden
• new-files - New files, recently uploaded to a particular site. Requires site and category paramaters, e.g. new-files:themeforest,site-templates or new-files:graphic-river,graphics
• popular – Returns the popular files for a particular site. Requires a site paramater, e.g. popular:activeden
• new-files-from-user – Shows the newest 10 files a user has uploaded to a particualr site. Requires username and site paramaters, e.g. new-files-from-user:collis,themeforest
• random-new-files – Shows a random list of newly uploaded files from a particular site (i.e. like the homepage). Requires a site paramater, e.g. random-new-files:activeden
• search – Search for items, users or forum messages. Returns only the first 50 results. First parameter is site (e.g. activeden, audiojungle), second parameter is type (e.g. site-templates, music, graphics, for a full list of types, look at the search select box values on the particular marketplace), third paramater is the search term (e.g. xml, preloader, dance, sky). First and second parameters are optional, third is required. Examples: search:themeforest,site-templates,xml.json search:,,collis.json search:audiojungle,,happy.json
• user – Shows username, country, number of sales, location and image for a user. Requires a username, e.g. collis
• releases – Returns Release and Set information for the API (used to generate the documentation)

The above are the parameters you need to send to the API to get the data you want. If you want to get the most popular products on CodeCanyon then use the following URL.

Popular Items On CodeCanyon Return As JSON

http://marketplace.envato.com/api/edge/popular:codecanyon.json

Popular Items On CodeCanyon Return As JSON

Popular Items On CodeCanyon Return As XML

http://marketplace.envato.com/api/edge/popular:codecanyon.xml

Popular Items On CodeCanyon Return As XML

Each of these parameters will return different nodes but if you are working with JSON or XML it is very easy to get at the data that we want.

Creating A WordPress Plugin

We are going to create a WordPress plugin which will create a number of different shortcodes to display the data we want in your WordPress posts.

We start off by defining the WordPress plugin by placing the following comments at the top of the file. This allows us to tell WordPress that this is a plugin and allows us to activate it and deactivate it from the plugin dashboard.

[php]
/*
* Plugin Name: Paulund Envato Shortcodes
* Version: 1
* Plugin URI: http://www.paulund.co.uk
* Description: Create a number of shortcodes to be used in your WordPress themes
* Author: Paul Underwood
* Author URI: http://www.paulund.co.uk
*/
[/php]

Enable Shortcodes

To start with we want to be able to use these shortcodes anywhere on the Website. By default you can’t use shortcodes in widgets so we are going to use the following code to allow us to use shortcodes in widgets.

[php]
// Enable shortcodes in widget areas
add_filter( ‘widget_text’, ‘do_shortcode’ );
[/php]

Envato Wrapper API Class

Below is the class we are going to use to get all the items for a specific set and category. This is take the attributes from the shortcode to display exactly what we want. The benefit of using this class means that the code in the shortcodes is very minimal and the class will do all the work for us.

Copy the following into your PHP file.

[php]
/**
* The class wrapper for envato API
*/
class Paulund_Envato{

/**
* Shortcode attributes
*/
private $atts = FALSE;

/**
* The API URL
*/
private $url = FALSE;

/**
* All items
*/
private $items = FALSE;

/**
* Set debug mode
*/
private $debug = FALSE;

/**
* Constructor for wrapper class
*
* @param $atts – Shortcode attributes
*/
public function __construct( $atts ){
// Set default attributes
$this->atts = shortcode_atts(array(
‘marketplace’ => ”,
‘set’ => ”,
‘category’ => ”,
‘limit’ => ”,
‘id’ => ”,
‘user’ => ”,
‘search’ => ”,
‘ref’ => ‘paulund’,
‘buttontext’ => ‘Buy Now’,
‘displaytitle’ => ‘true’,
‘displayimage’ => ‘true’,
‘displaysales’ => ”,
‘displayrating’ => ”,
‘displaycost’ => ‘true’,
‘displaytags’ => ”,
‘displaycategory’ => ”,
‘displaynumberfiles’=> ”,
‘displaybutton’ => ‘true’,
‘debug’ => ‘false’), $atts);

// If debug mode is on set class field to true
if($this->atts["debug"] == ‘true’){
$this->debug = TRUE;
}
}

/**
* Defines which set of files we want
*
* @param $set – Set of files
*/
public function Set( $set ){
$this->atts["set"] = $set;
}

/**
* Defines which category we want from set of files
* Used on searches such as popular which return popular last week, popular last 3 months and popular authors
*
* @param $category – Defines category
*/
public function Set_Category( $category ){
$this->atts["category"] = $category;
}

/**
* Works out the URL to call by the attributes sent
*/
private function Set_Url( $format = “.json”){
$url = “http://marketplace.envato.com/api/edge/”;

if( $this->atts["set"] != “” ){
$url .= $this->atts["set"];
}

if( $this->atts["marketplace"] != “” ){
$url .= “:”.$this->atts["marketplace"];
}

if( $this->atts["id"] != “” ){
$url .= “:”.$this->atts["id"];
}

$url .= $format;

$this->url = $url;
}

/**
* The main method for the class which will set the url, get the items, parse the items and display each items
*/
public function Display_Items(){

// Set the URL
$this->Set_Url();

// Display debug messages
if($this->debug){
echo ‘Start Display Items’;
echo ‘

';
			print_r($this->atts);
			echo '

‘;
}

// Extract the variables from array
extract($this->atts);

// Make sure that at least one of these are set
if( $id == ” && $marketplace == ” && $set == ”){
return;
}

// Get the items
$this->Get_Items();

// Parse the correct category
$this->Parse_Category();

// Displays each item
$this->Display_Each_Item();
}

/**
* Uses the WordPress remote get function to return the json items
*/
public function Get_Items(){
// Get items as json
$json = wp_remote_get( $this->url );

// Display debug messages
if($this->debug){
echo ‘Get Items’;
echo ‘URL – ‘.$this->url;
echo ‘

';
			print_r($json);
			echo '

‘;
}

// Set the items variable with the body of the json
$this->items = json_decode($json["body"], true);
}

/**
* Parse the items to get exactly the data we want
*/
private function Parse_Category(){

// Display debug messages
if($this->debug){
echo ‘Parse Category’;
echo ‘

';
			print_r($this->atts);
			print_r($parsed_items);
			echo '

‘;
}

// Set the items
$items = $this->items;

// Get the set of items we want
if($this->atts["set"] != “”){
$parsed_items = $items[$this->atts["set"]];
}

// Get the category of items we want
if($this->atts["category"] != “”){
$parsed_items = $parsed_items[$this->atts["category"]];
}

// Limit the items to the amount we want back
if($this->atts["limit"] != “”){
$parsed_items = array_slice($parsed_items, 0, $this->atts["limit"]);
}

// Display the parsed items
if($this->debug){
echo ‘End Parse Category Display Items’;
echo ‘

';
			print_r($parsed_items);
			echo '

‘;
}

// Set the items variable to the new parsed items
$this->items = $parsed_items;
}

/**
* Loop through all of the items to display each item
*/
private function Display_Each_Item(){

// Display the debug messages
if($this->debug){
echo ‘Display Each Items’;
echo ‘

';
			print_r($this->items);
			echo '

‘;
}

// Set the attributes variable
$atts = $this->atts;

// Make sure that the items are inside an array
if(!is_array($this->items[0])){
$this->items = array($this->items);
}

// Loop through all items to display on the page
foreach($this->items as $item){
$url = $item["url"].”?ref=”.$atts["ref"];

?>

}
}
}
[/php]

Envato Shortcodes

Now we can use shortcodes in widgets we can add shortcodes anywhere in the theme.

In this plugin we are going to make shortcodes for the following.

• Popular Files
• Featured Files
• New Files
• New Files by certain Author
• Random Files
• Specific Files
• All files from a specific user

[php]
add_shortcode( ‘paulund_envato_popular’, ‘paulund_envato_popular_function’ );
add_shortcode( ‘paulund_envato_features’, ‘paulund_envato_features_function’ );
add_shortcode( ‘paulund_envato_new_files’, ‘paulund_envato_new_files_function’ );
add_shortcode( ‘paulund_envato_new_files_from_user’, ‘paulund_envato_new_files_from_user_function’ );
add_shortcode( ‘paulund_envato_random_new_files’, ‘paulund_envato_random_new_files_function’ );
add_shortcode( ‘paulund_envato_item’, ‘paulund_envato_item_function’ );
add_shortcode( ‘paulund_envato_user’, ‘paulund_envato_user_function’ );
[/php]

Each of these shortcodes will run a PHP function, from this function we can call the above class to get exactly the items we want.

Copy the following into your PHP file outside of the Envato Wrapper Class.

[php]
/**
* Get popular envato files
*
* @param $atts – Attributes in the shortcode
* @param $content – Content in shortcode can be null
*/
function paulund_envato_popular_function( $atts, $content = null ){
$envato = new Paulund_Envato($atts);

$envato->Set(“popular”);
$envato->Set_Category($atts["category"]);
$envato->Display_Items();
}

/**
* Get featured envato files
*
* @param $atts – Attributes in the shortcode
* @param $content – Content in shortcode can be null
*/
function paulund_envato_features_function( $atts, $content = null ){
$envato = new Paulund_Envato($atts);

$envato->Set(“features”);
$envato->Set_Category($atts["category"]);
$envato->Display_Items();
}

/**
* Get new envato files
*
* @param $atts – Attributes in the shortcode
* @param $content – Content in shortcode can be null
*/
function paulund_envato_new_files_function( $atts, $content = null ){
$envato = new Paulund_Envato($atts);

$envato->Set(“new-files”);
$envato->Display_Items();
}

/**
* Get new envato files for user
*
* @param $atts – Attributes in the shortcode
* @param $content – Content in shortcode can be null
*/
function paulund_envato_new_files_from_user_function( $atts, $content = null ){
$envato = new Paulund_Envato($atts);

$envato->Set(“new-files-from-user”);
$envato->Display_Items();
}

/**
* Get random new envato files
*
* @param $atts – Attributes in the shortcode
* @param $content – Content in shortcode can be null
*/
function paulund_envato_random_new_files_function( $atts, $content = null ){
$envato = new Paulund_Envato($atts);

$envato->Set(“random-new-files”);
$envato->Display_Items();
}

/**
* Get specific envato file item
*
* @param $atts – Attributes in the shortcode
* @param $content – Content in shortcode can be null
*/
function paulund_envato_item_function ( $atts, $content = null ){
$envato = new Paulund_Envato($atts);

$envato->Set(“item”);
$envato->Display_Items();
}

/**
* Get envato files for specific user
*
* @param $atts – Attributes in the shortcode
* @param $content – Content in shortcode can be null
*/
function paulund_envato_user_function( $atts, $content = null ){
$envato = new Paulund_Envato($atts);

$envato->Set(“user”);
$envato->Display_Items();
}
[/php]

Using The Shortcodes

With all the code for your WordPress plugin finished we can discover how to use these shortcodes.

Popular Files

The envato popular files API return 3 types popular files.

• Popular items last week
• Popular items of the last three months
• Popular Author of last month

Because for these three categories we need to use both the set and category attributes in the shortcode

Popular items last week shortcode

[html]
[ paulund_envato_popular marketplace="codecanyon" category="items_last_week" displaysales="true" displayrating="true" displaytags="true" buttontext="Buy Now" limit="5" ]
[/html]

Popular items of the last three months shortcode

[html]
[ paulund_envato_popular marketplace="codecanyon" category="items_last_three_months" displaysales="true" displayrating="true" displaytags="true" buttontext="Buy Now" limit="5" ]
[/html]

Popular Author of last month shortcode

[html]
[ paulund_envato_popular marketplace="codecanyon" category="authors_last_month" displaysales="true" displayrating="true" displaytags="true" buttontext="Buy Now" limit="5" ]
[/html]

Featured Files

The featured call will return the current featured files on the marketplace.

• Featured File
• Featured Authors
• Free File

Featured File shortcode

[html]
[ paulund_envato_features marketplace="codecanyon" category="featured_file" displaysales="true" displayrating="true" displaytags="true" buttontext="Buy Now" ]
[/html]

Featured Authors shortcode

[html]
[ paulund_envato_features marketplace="codecanyon" category="featured_author" displaysales="true" displayrating="true" displaytags="true" buttontext="Buy Now" ]
[/html]

Free File shortcode

[html]
[ paulund_envato_features marketplace="codecanyon" category="free_file" displaysales="true" displayrating="true" displaytags="true" buttontext="Get Your Free File" ]
[/html]

New Files

To get the new files for a marketplace you also need to pass the category you want to get the new files from.

To do this use the following shortcode.

[html]
[ paulund_envato_new_files marketplace="themeforest,site-templates" displaysales="true" displayrating="true" displaytags="true" buttontext="Buy Now" ]
[/html]

New Files by certain Author

Get the new files for a certain user.

[html]
[ paulund_envato_new_files_from_user marketplace="collis,themeforest" displaysales="true" displayrating="true" displaytags="true" buttontext="Buy Now" ]
[/html]

Random Files

Get random new files for a marketplace.
[html]
[ paulund_envato_random_new_files marketplace="themeforest" displaysales="true" displayrating="true" displaytags="true" buttontext="Buy Now" ]
[/html]

Specific Files

Get specific files by the item ID.

[html]
[ paulund_envato_item id="372656" displaysales="true" displayrating="true" displaytags="true" buttontext="Buy Now" ]
[/html]

All files from a specific user

Get all the files from a specific user.

[html]
[ paulund_envato_user id="collis" displaysales="true" displayrating="" displaytags="" displaycost="" buttontext="Buy Now" ]
[/html]

Download

I’ve add this plugin to the WordPress.org so you can download this and use the shortcodes on your WordPress site.

Download Envato API Shortcodes

WordPress comes with the functionality to create menus in the dashboard area, from here you can select pages or custom custom menu items to make up your menu.

Menus are normally going to be display at the top of the page to give the visitor easy access to your main pages. But this top navigation bar is also a good place to have your search box so if people can’t find what they are looking for then they can use your search box.

With the default behaviour of the WordPress menus you can only add pages to the menu and not a search box.

Below is a WordPress snippet you can use to add a search form to a certain menu, just add the following to your WordPress functions.php file.

[php]
add_filter(‘wp_nav_menu_items’, ‘add_search_form’, 10, 2);

function add_search_form($items, $args) {
if( $args->theme_location == ‘CHANGE-THIS-TO-YOUR-MENU-NAME’ )
$items .= ‘

‘;
return $items;
}
[/php]

There may be times when you have a little rant of make a mistake in a post and want to exclude this from the in-built WordPress search functionality.

There is a way you can intercept the WordPress search functionality and exclude certain posts from being displayed. All you have to do is find out the post ID and add it to the following function in your functions.php file.

[php]
function exclude_posts($query) {
if ($query->is_search) {
$query->set(‘cat’,’110, 201, 254, 302′); //Change the numbers to your post IDs
}
return $query;
}

add_filter(‘pre_get_posts’,'exclude_posts’);
[/php]

Your wp-config.php file stores all of your config variables for your WordPress site. If someone has access to this file they will be able to see your database username and password.

When you first install WordPress there is a default wp-config-sample.php file which you need to rename and modify.

To keep this secure you can move this file outside of the WordPress root folder, WordPress is able to find this file one level up from the root.

Another way to secure the wp-config.php file is to use htaccess to deny access for everyone trying to access it. To use htaccess to deny access, add the following snippet in your htaccess file.

[php]

Order Allow,Deny
Deny from all

[/php]

Meta description tags are still very much used by search engines, they provide the default text to be displayed in the search results.

The Meta description tags should have relevant keywords to the article to attract visitors to your site.

In WordPress it can be done by using SEO plugins, but if you don’t have these plugins installed or forgot to add the meta description to this plugin then here is the WordPress snippet for you.

This snippet will automatically take the first 125 characters of your content and add this into the meta description tag for the page.

[php]
function create_meta_desc() {
global $post;
if (!is_single()) { return; }
$meta = strip_tags($post->post_content);
$meta = strip_shortcodes($post->post_content);
$meta = str_replace(array(“\n”, “\r”, “\t”), ‘ ‘, $meta);
$meta = substr($meta, 0, 125);
echo ““;
}
add_action(‘wp_head’, ‘create_meta_desc’);

[/php]

This is a really useful feature for websites which have a large scrolling page or infinite scrolling. The types of websites that will need this feature are content heavy website for example blogs. There are loads of blogs with massive pages because of all the great content on there. It would be so useful to have a scroll to top button on them…as most blogs are on WordPress I’ve decided to take the previous scroll to top tutorial and turn this into a WordPress plugin.

Why Pinterest?

Currently the big website in social media is pinterest, who has a scroll to top button appear in the bottom right corner of the website. This scroll to top button is not just a simple button on a website you need to scroll down before it will appear on the page, the button also has some CSS animation to slide into view and once you are at the top of the page the button will slide back off the page.

With the added complexity of this button I’ve decided to recreate this scroll to top button but as a WordPress plugin and in this tutorial and I’m going to show you how you can do it too.

Define The WordPress Plugin

First we are going to start off by creating the WordPress plugin this way all the HTML elements are on the page and the jQuery is included on the page.

Create a php file and add the following in the top of the file.

[php]
/*
Plugin Name: Paulund Scroll To Top
Plugin URI: http://www.paulund.co.uk
Description: Adds a jQuery scroll to top button at the bottom of the page.
Author: Paul Underwood
Version: 1.0
Author URI: http://www.paulund.co.uk/
*/
[/php]

When the plugin is defined the following script will run when you activate the plugin. I prefer working with PHP classes this way I know that the code will not conflict with anything else defined on WordPress.

For this plugin we are going to create a PHP class inside the plugin file to create the scroll to top button. All this class has to do is add some HTML on the page which we will use as the button, add a CSS file to the page so we can style the button and add jQuery to page to scroll back to the top.

Below is the basic structure of the PHP class.

[php]
/**
* The Paulund scroll to top plugin
*/
class Paulund_Scroll_To_Top{

public function __construct(){

}

public function Scripts_Method() {

}

public function Add_Html(){

}
}
[/php]

Constructor Function

The constructor function needs to add the jQuery and CSS to the page for this we are going to add an action to the wp_enqueue_scripts action which will run the function scripts method.

We are also going to use the constructor to add the HTML which will be the button, we are going to add this HTML to the bottom of the page, this means we are going to add a function to be ran on the wp_footer action.

[php]
public function __construct(){
add_action( ‘wp_enqueue_scripts’, array(&$this, ‘scripts_method’) );
add_action( ‘wp_footer’, array(&$this, ‘Add_Html’) );
}
[/php]

Scripts Method Function

This script methods function is used to add both the jQuery and the CSS to the page. For this to work we need to include jQuery on the page, we can then create our custom Javascript file which we are going to add a custom function to scroll the page to the top.

We are also going to include a CSS file so we are style the button to look the same as the Pinterest button.

[php]
public function Scripts_Method() {
wp_deregister_script( ‘jquery’ );
wp_register_script( ‘jquery’, ( ‘http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’ ), false, null, true );
wp_enqueue_script( ‘jquery’ );

// Register styles and js
wp_register_style( ‘toolbar_settings_css’, plugins_url( ‘/paulund-scroll-to-top/css/style.css’ ) );
wp_register_script( ‘toolbar_settings_js’, plugins_url( ‘/paulund-scroll-to-top/js/script.js’ ), false, null, true );

wp_enqueue_style( ‘toolbar_settings_css’ );
wp_enqueue_script( ‘toolbar_settings_js’ );
}
[/php]

Add HTML

The final function in the plugin is going to add the HTML to the page in the wp_footer action. The HTML for the button is very simple it’s just going to be a div with some text.

[php]
public function Add_Html(){
?>

}
[/php]

The Javascript

Below is the Javascript which is added to the page, this is what we are going to include on the page using the wp_enqueue_script.

Here we going to add all the Javascript inside a $(document).ready() function.

We are going to start off by adding an event to the window scroll event, this function will run when the visitor scrolls down the page. We need to do a check on the current position of the scroll bar as we only want the button to appear when you scrolled down the page. For this we are saying if the scroll position is over 200 pixels then display the button.

The way we are displaying the button is to change the position of the button up to -10px and to hide it we are going to move the button out of view by placing the bottom position to -100px. We are wrapping the change of pixel position around the jQuery animate function, this way the button will slide in and out of view.

[javascript]
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 200) {
$(‘.scrollToTop’).animate({‘bottom’:'-10px’}, 350);
} else {
$(‘.scrollToTop’).animate({‘bottom’:'-100px’}, 350);
}
});
[/javascript]

Next we can setup the button click event, this will set the scroll back to the top of the page. For this it’s very simple we just add a click event on the .scrollToTop class, on this click event we are going to animate the scrollTop back to the top of the page.

[javascript]
//Click event to scroll to top
$(‘.scrollToTop’).click(function(){
$(‘html, body’).animate({scrollTop : 0},800);
return false;
});
[/javascript]

Below is the full javascript we are going to use for the plugin.

[javascript]
/**
* @author Paulund
*/
if (jQuery) {
$(document).ready(function(){

//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 200) {
$(‘.scrollToTop’).animate({‘bottom’:'-10px’}, 350);
} else {
$(‘.scrollToTop’).animate({‘bottom’:'-100px’}, 350);
}
});

//Click event to scroll to top
$(‘.scrollToTop’).click(function(){
$(‘html, body’).animate({scrollTop : 0},800);
return false;
});
});
}
[/javascript]

Style Like Pinterest

As mentioned above this is a button to act like the pinterest button, to do this we need it to look like the pinterest button.

Below is the CSS we are using to style the button just like Pinterest.
[css]
.scrollToTop{
right: 15px;
bottom: -100px;
width: 50px;
padding: 20px 10px 25px;
text-align:center;
font-family: ‘helvetica neue’, arial, sans-serif;
font-weight: normal;
color: #666060;
text-decoration: none;
position:fixed;
cursor: pointer;
font-size: 15px;
border-radius: .3em;
border:1px solid #BBB;
background-color: #f0eded;
background:-moz-linear-gradient(center top, #fdfafb, #f9f7f7 50%, #f6f3f4 50%, #f0eded);
background: -o-linear-gradient(top left, #fdfafb, #f9f7f7 50%, #f6f3f4 50%, #f0eded);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fdfafb), to(#f0eded), color-stop(.5,#f9f7f7),color-stop(.5,#f6f3f4));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fdfafb’, endColorstr=’#f0eded’);
}
.scrollToTop:hover{
text-decoration:none;
}
[/css]

Download The Plugin

That’s all you need to create a Pinterest scroll to top plugin.

I’ve made this plugin available to download from the WordPress Repo. If you want to download this plugin please use the link below.

Download Pinterest Scroll To Top