Tutorials With Downloadable Content

Currently 123 tutorials with downloadable content

Add Pagination To VueJS WordPress Theme

In this tutorial we're going to add previous and next pagination buttons to the Homepage and the Category page. When using the WordPress REST API to get post you need...

May 8

Create 404 Page – VueJS WordPress Theme

In this tutorial we're going to create the 404 page for the WordPress theme. The 404 page is a page some companies have some fun with here is a page...

May 6

Create Date Archives Page – VueJS WordPress Theme

In this tutorial, we're going to build a date archives page for your WordPress theme so that you can display a list of your previous posts sorted by date. If...

April 22

Create Search Results Page – VueJS WordPress Theme

In this tutorial we're going to revisit the Creating the Homepage tutorial and create the search form we added to the homepage. In the Homepage tutorial we added a component...

April 15

Create Author Page – VueJS WordPress Theme

If you have a multi-author blog then you will have information about the author of the post on the page so that user's can find out more about the author...

April 11

Create Category Page – VueJS WordPress Theme

The next tutorial in the VueJS WordPress theme series we're going to create the category pages for the theme. So far in the theme, we've created the homepage, the blog...

April 5

Create Static Pages – VueJS WordPress Theme

In the last tutorial we setup routes and components for our blog posts, we did this with dynamic routes. In this tutorial, we're going to create the routes and VueJS...

April 4

Create The Post Page – VueJS WordPress Theme

In the previous tutorial, we created the Homepage for the VueJS theme, with the Homepage showing a list of posts with a link to the post page we can now...

April 3

Creating The Homepage – VueJS WordPress Theme

With the project setup, we can now focus on building the pages we need for the WordPress theme. First we're going to start off with the homepage, throughout this project...

March 27

Building The App.vue Component

The most important component that we need to create is the vue App.vue component, this is the main Vue component that the application will use. This is the file that...

March 26

Making API Requests With Axios

To make requests to the WordPress REST API we need to install another library to help us make these requests. We can use something like jQuery which has helpers for...

March 26

Setup The WordPress Routes

With the styling for the theme setup and ready to go we can set up the routing for the WordPress theme. In a normal WordPress build, this is the section...

March 25

Setup Styling For The Theme

For the styling of this project, we'll simply be going to use a CSS framework like Bulma to speed things up. Bulma is a CSS framework that uses SASS and...

March 23

VueJS Project Structure

In the previous tutorial, we created a new VueJS project using the vue-cli command, in this tutorial we're going to investigate what this has done and look into how we...

March 23

Building A WordPress Theme Using VueJS

In this series, we're going to use VueJS to create a WordPress theme using the WordPress REST API to display your WordPress content. I'll try to go through all the...

March 22

VueJS Slots

VueJS Slots is a way of injecting content into your rendered Vue components. This allows the component to become more flexible and reusable. In this tutorial, we're going to investigate...

March 14

Create Your Own WordPress Rest Endpoints

As the REST API is still relatively new there might be some endpoints that don't currently exist such as getting the post archives where you would normally use the function...

January 25
Free

WordPress Shortcode To Display Logged In Author Posts

In this tutorial we're going to build a WordPress shortcode that will allow us to only show the posts of the logged in user. This is useful if you have...

January 21

Only Allow Access To REST To Logged In Users

The WordPress REST API is a very exciting feature of WordPress, it was introduced into the core in version 4.7 and is getting a lot of attention from the developers...

January 17

Building A Weather App With VueJS

In this tutorial we're going to build a component we can use to display the weather of a location in VueJS. This component will be created with a location search...

January 9

VueJS: Mixins

Mixins are a way of reusing functionality from within your Vue Components. A mixing will use the same properties as a component such as created, methods and when a component...

December 22

VueJS: Transition Effects

VueJS provides an inbuilt way of providing transitions when making changes to the DOM, these can be applied when inserting items, updating items or deleting items from the DOM. Transition...

December 21

VueJS: Vue Router Restricting Routes

In the previous examples of using the Vue Router we learnt how to build routes and how we can navigate around the application to view the previous examples please see...

December 19

VueJS: Vue Router Child Paths

In a real world example you'll be creating an application that has a few nested URLs for example a user account will have URLs such as /account /account/security /account/notifications /account/billing...

December 12

VueJS: Vue Router Dynamic Routes

In a previous example we learnt how to use the Vue Router. In this example we just used simple links to a single page. But as you know most apps...

December 9

VueJS: Vue Router

An important part of a JavaScript website is the ability to show different content depending on the URL you navigate to. In traditional web development this URL will point to...

December 7

VueJS: Building A Comments Section

To carry on through the learning of VueJS we're going to build a real world example of creating a comments section in your website. We're going to use an API...

December 5

VueJS: Building A Simple Calculator

In previous tutorials of VueJS we've learnt the basics of how to use Vue, but we haven't really learning how to build an application. In this tutorial we're going to...

November 30

VueJS: Building A Confirmation Modal

In this tutorial we're going to learn how you can create a deletion confirmation modal in VueJS. This technique is important when you have a form or a link asking...

November 28

VueJS: Computed Functions

In a previous tutorial we learnt how you can add a message to the page in VueJS by using the handlebars syntax. Along with simply outputting data properties on the...

November 21

VueJS: Click Counter

In this tutorial we're going to build a simple click counter using VueJS. For this we're going to simply have a button on the page and on the click event...

November 16
Free

VueJS: Preventing Default

A common task you have to do when working on JavaScript applications is preventing default browser behaviour, probably the most common situation you find yourself in with this is when...

November 14
Free

VueJS: Managing User Input

In a previous tutorial we looked at how you can bind Vue data points to HTML attributes. In this tutorial we're going to look into how you can bind Vue...

November 9
Free

VueJS: Binding To A Class

In a previous VueJS tutorial we learnt how you can bind to a HTML attribute such as title, in this tutorial we're going to go further with that concept and...

November 7
Free

VueJS: Loop List Elements

Just like other programming languages you'll need to be able to loop through data and perform a common task with each data point. The most common JavaScript data form is...

November 2
Free

VueJS: Conditional Show And Hide

Previously we've seen in Vue how to display data to the page and how to bind data to a HTML attribute. In this tutorial we're going to use conditions to...

October 31
Free

VueJS: Bind To HTML Attribute

In the previous tutorial we saw how we can use the data property to display content on the screen, is this you'll see how you can bind this data to...

October 26
Free

Display Data With VueJS

This is the first post from the learning VueJS series, you can see all the code examples in this series on the following Github repository. Vue Examples The first thing...

October 24
Free

Getting Started With VueJS

In this tutorial we're going to look at the basics of getting started with VueJS. VueJS is a JavaScript framework which is focused on the view layer only, and is...

October 19
Free

Javascript Copy and Paste

In a previous tutorial we saw how you can create a copy and paste button using jQuery and the ZeroClipboard flash extension. The problem with this is that it requires...

October 10

CSS Bouncing Arrow

@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } .arrow { cursor: pointer; position: relative; bottom:...

September 28

How To Use Page Templates In A Plugin

In this tutorial we're going to investigate how you can override a theme template files from your WordPress plugins. For this we're going to be using two filters: theme_page_templates template_include...

September 20

Back To Top Pure JavaScript

A popular trend you see on many websites is the back to top button, where the user will click this button to automatically scroll back to the top of the...

August 29

Build Your Own Responsive Tester Page

Today with all the different devices we can use on the internet it is very important that your website is responsive and can be viewed in any browser on any...

May 30

No More Comment Spam

Since moving my comments from Disqus back to native WordPress comments I was getting a lot of spam comments a couple every minute. I had the suggested plugins installed like...

May 15

Restrict Access To WordPress Login Page

In this tutorial we're going to create a WordPress plugin that can be used to help improve the security of your site by restricting access to the login page by...

April 29
Free

Get Keyword Frequency In PHP

In this tutorial we're going to find out how we can get the keyword frequency from a string or even a webpage in PHP. This information is useful when you're...

March 31

How To Create A Show Password Button

In this tutorial we're going to have a quick look at how you can create a show password button on your register or login forms. When you're creating a register...

March 21
Free

How To Create A Custom Geotag Field On Formidable

In this tutorial we're going to use the Formidable plugin and create a new field type that will use HTML5 geolocation to get the current user location, once we get...

March 11

Restrict Content Pro Stats WordPress Dashboard Widget

If you use Restrict Content Pro on your WordPress membership site then you most likely find yourself logging in regularly to check the stats on your site. One of the...

February 16

Back To Top WordPress Plugin

In a previous tutorial I wrote about how you can use jQuery to create a Scroll back to top button. jQuery Back To Top In this tutorial we are going...

February 7

Stop WordPress Automatically Adding br

WordPress uses a function called wpautop to automatically add paragraphs and line breaks to your content from the content editor. This will change double line breaks and convert them into...

December 11

WordPress Recent Posts Shortcode

On WordPress.com you automatically get are a large number of shortcodes that you can use on your blog. Here you can view all the default shortcodes on WordPress.com. One of...

December 10

Set WordPress Posts To Private By Default

The following code snippet will allow you to set all your posts to private as default. We do this by using the action post_submitbox_misc_actions and inserting jQuery into the page...

December 8

Colours With Sass Map

Here is a quick CSS snippet on how you can use Sass maps to create a colour list for your project. Sass maps are a nice way of creating lists,...

June 2
Free

Disable Emojicons Introduced In WordPress 4.2

As of WordPress version 4.2 WordPress enabled the use of Emojicons in your posts, but in order to do this it will automatically add some javascript to your page. But...

May 18
Free

Fixed Width Sortable Tables Row With jQueryUI

When you use jQuery UI sortable function on a table I've noticed that it will collapse the width of the row you're dragging which can lead to a strange user...

April 15

Add Delete Confirmation Modal To Form With jQuery

In this tutorial we are going to learn how you will add a confirmation modal box to your forms for things like deleting. Most tutorials I've seen on this only...

April 13
Free

Login To WordPress With Email Address

By default WordPress will assign unique usernames to all users registered on the website. As they are unique there could be a possibility that the username the user wants to...

November 25

Equal Height Columns

If you are displaying a number of columns on your web page then would of probably reached the problem where you need these columns to be the same height as...

April 7

Add Upload Media To Library On Widgets

The WordPress media library is one of my favourite features in using WordPress over other CMS's, when you upload a new image into WordPress it will convert it to a...

February 26
Free

Adaptive Backgrounds jQuery Plugin

I recently found a good resource for changing the background colour of a containing div. This is a jQuery plugin that will search for the most dominating colour in an...

February 21
Free

CSS Loading Spinners

We all know that CSS3 brings a lot of features which allows you to do a lot of cool stuff that we used to need Javascript for. One of the...

January 21
Free

Create A Typing Effect In CSS

I recently found this jQuery plugin that allowed you to easily create a typing effect on your website. This plugin is an open source plugin available on Github called typed.js....

January 14

Restart CSS Animation

Since CSS3 we have been able to add CSS animation to our elements, these are relatively easy to setup. An example of a simple CSS animation example is to fade...

January 13
Free

Changing The Element Size With jQuery

When you are changing the size of an element using jQuery there are two methods that you can use to change the size. First you can use the .css() method...

December 18

Create A Clock In CSS

In this tutorial we are going to walk through the process of creating a ticking clock in CSS, using CSS3 features animation and transform. The animation will start when you...

December 10

Create A Animated Download Icon In CSS

When you place a call to action on a webpage you normally want the visitors to down something like sign up to your newsletter or download some of your content....

October 16
Free

How To Create Flat Checkboxes

With the trend of flat design I've decided to extend a previous tutorial of How To Style A Checkbox With CSS with two extra code snippets of styling checkboxes with...

September 9

Create Password Strength Indicator With jQuery

With security being the biggest problem for most websites it's important to make websites as secure as possible. But after all the precautions a developer can do with their code...

July 22
Free

Lazy Load Social Media Buttons

With the page loading speed being so important to a websites success you need to try to speed up all areas of your website as much as possible. One of...

May 27
Free

Create An Animated CSS Box Menu

In this tutorial were going to play with CSS transitions to create a new style navigation menu. The effect we are aiming for is having a number of navigation boxes,...

May 22
Free

CSS Flip Boards

In this tutorial we are going to create a flip board effect by using CSS, there are 2 effects we can create one the hover event we are going to...

May 15
Free

How To Style A Checkbox With CSS

Checkboxes is a HTML element that is possibly used on every website, but most people don't style them so they look the same as on every other site. Why not...

March 27
Free

Create An Interactive Metro Style Grid Dashboard

Since Windows 8 released it's first pictures of the new design, people have been going crazy over the metro style. People love it, it's modern, it's clean, it's simple and...

March 11
Free

Create Post Tags With CSS

In this tutorial we are going to create post tags using CSS, we will also create a WordPress widget that will allow you to display these post tags in the...

January 22
Free

Create Polaroid Image With CSS

A polaroid picture is an iconic image of how pictures used to be. It is strange to see them on a computer but they are also a great way to...

December 17
Free

Create Google Maps With gmaps.js

How To Use GMaps.js GMaps is a javascript plugin that makes it really easy to use Google Maps to display a map to your user. There are multiple options that...

December 12
Free

Create Your Own Share Buttons With Sharrre

People are now members of multiple social networks be it Facebook, Twitter, Google Plus, Linkedin etc. All of these social networks have created their own button which makes it really...

December 10
Free

Learning CSS Filters With Images

I'm a big fan of some of the experimental CSS properties that the browsers vendors are developing. In previous tutorials I have looked at some of the new features which...

December 5
Free

Handle Keyboard Shortcuts With Mousetrap.js

Mousetrap.js is a javascript plugin that makes it easy to setup keyboard shortcuts for your web applications. It allows you to define functions to run on certain key pushes, you...

November 5
Free

Using CSS3 Columns

When it comes to designing a website it's really handy to use a grid system to help. Using a grid system allows you to easily space out and line up...

October 31
Free

How To Create A CSS Animated Share Button

Every website now has social network share buttons on their site, if you don't have them then you really should do. They're a great way to give your visitors easy...

October 29

Javascript Full Screen API

The full screen API is an easy way to get the full web content to be displayed on the page. It's very similar to pressing F11 on your keyboard but...

October 22
Free

Manipulate The Favicon With Tinycon

When you get alerts and notifications from Facebook, twitter or your email client depending on the browser you will be alerted of new activity. An example of this is if...

August 20
Free

Display Code Snippets In WordPress

If you want to talk about programming or development in your WordPress post then there will be times when you want to write about code but make sure that the...

June 29

Create A CSS 3D Push Button

In this tutorial we are going to look at how we can use CSS transitions to make it look like a button is 3D when you push it. For this...

June 4
Free

How To Create Shiny CSS Buttons

With buttons playing a major part in the call to actions of your website it is important for them to make an impact on your visitors. This can be done...

May 30
Free

Create Always On Page HTML Elements

A common trend in web design now is to make sure important content is always on screen by making the content move as you scroll down the page. Many websites...

May 24
Free

CSS Animate Effects We Can Learn From Animate.css

In this tutorial we going to look into the open source project which has become very popular lately...Animate.css. This is a project which is currently hosted on Github where you...

May 21
Free

Create A Real E-Book With Turn.js

In today's tutorial we are going to see how we can create a "real" ebook by using the jQuery plugin turn.js. Using this jQuery plugin you can create a real...

May 5
Free

Controlling The WordPress Toolbar

The WordPress Toolbar was introduced in WordPress 3.3 and replaces the WordPress admin bar which was introduced in 3.1. The purpose of the toolbar was to give logged in users...

April 30
Free

Add a WordPress Menu To Your WordPress Toolbar

This WordPress snippet will add a WordPress Menu on the WordPress Toolbar. This uses the admin_bar_menu which will run when the admin bar is created. This action calls the function...

April 15
Free

Using Social Media Hovercard jQuery Plugin

Displaying your social media account on your website gives them great exposure to your accounts and allows your readers to easily follow you on the different social networks. There is...

April 4
Free

CSS Animated Media Queries

A new trend in website design is the use of media queries, this is because of the amount of devices that can now access the internet all the websites need...

April 2
Free

How To Add Text Gradients With CSS

In this tutorial we are going to look at some of the new CSS3 features for dealing with text colours. If you have used CSS background gradients before then you...

March 26
Free

Learn How To Create Different CSS Box Shadow Effects

In this tutorial we are going to learn how to use the CSS box shadow property to create different effects with just CSS. Below is an image created in photoshop...

February 27

How To Use HTML5 GeoLocation API With Google Maps

In this tutorial we are going to learn how to use the Geolocation API to get your current latitude and longitude, from these results we can then connect to the...

February 24
Free

How To Create A CSS Slide Out Fixed Navigation

In today's tutorial we are going to learn how we can make it easy for your visitors to always have access to the main links on your site by creating...

February 20
Free

How To Create Pretty Search Forms

In this tutorial we are going to style text boxes and buttons to create pretty search forms. We are going to create three forms which will match the image above....

February 15
Free

How To Build A Simple Tabbed Menu

In this tutorial we are going to take a PSD and turn them into HTML and CSS. I previously done this with other tutorials such as building a CSS pricing...

February 13
Free

HTML5 Details Tag

In past articles I have wrote about some of the new features which have come with HTML5. We have gone over some of new features with HTML5 forms and HTML5...

February 6
Free

Smooth Scrolling To Internal Links With jQuery

jQuery allows you change the way you interact with your website with very little code. jQuery has an animate function which allows you to animate anything that jQuery does, including...

January 23
Free

CSS Image Reflection With Webkit

Image reflection is a great new feature from CSS which allows you to spice up your web image by adding a reflection underneath. Before CSS this had to be done...

January 8
Free

Learn How To Create Drop Cap Letters In CSS

In the tutorial today we are going to learn how we can use just CSS to create an old newspaper technique of making the first letter of a paragraph capital...

January 7
Free

How To Work Out Distance Between Mouse And Element

In the tutorial today you will learn how you can use jQuery to get the distance of the mouse from a certain element on the page. This bit of code...

January 6
Free

How To Create Stitched Look in CSS

The current trend in web design is textures with vintage design. One of the main aspects of this design is the use of stitches in your design, this used to...

January 3
Free

Create Pulse Effect With CSS3 Animation

In this tutorial you will learn how you can create a heartbeat pulse effect with CSS3. CSS3 gives us some added ability to CSS animation, with animation you can set...

December 21
Free

How To Create An Animated Scroll To Top Button With jQuery

Creating a good user experience on your website is very important to keep people on the page. The best way to create a good user experience is to make it...

December 20
Free

Build A jQuery Image Gallery

Displaying images galleries on your web pages can be very complicated, much like the jQuery modal boxes, today you will learn a very simple way to create a nice looking...

November 28
Free

How To Build A Pricing Table With CSS3 Animation

Quite often I'm given a PSD and asked to convert this into HTML/CSS for the graphic designer. I was given a PSD which was a pricing table and realised that...

November 23
Free

Link Indenting With CSS3 Animation

In website design there is something that your website must always do this is styling your links so that they stand out from normal text on your page. This will...

November 21
Free

Pure CSS Tooltips

Demo In all browsers you can get the basic tooltips on HTML elements by using the title attribute like the below example.

November 16
Free

Switch Stylesheets With jQuery

Jquery makes it very easy to manipulate the the DOM, this makes it so easy to change any element on your webpage. One of those elements is the reference to...

November 14
Free

Change Browser Highlight Colour With CSS

In this tutorial today you will learn how you can change the default browser highlight colour by using CSS. If you take your mouse, click and drag your mouse on...

November 11
Free

Get Any Website Alexa Rank Using PHP

In past tutorials here you have learned how to get your Twitter followers and your Feedburner subscriber numbers. They are both useful information to use to judge how popular your...

November 9
Free

How To Use HTML5 Form Features

In HTML5 there are a few more features which allow you to do some cool things with forms such as validation without writing any Javascript which makes it easier for...

November 8
Free

CSS3 Spinning Social Media Icons

We all want more attention on social media, it's all just one big popularity contest and were all fighting for more followers and friends. If you have managed to get...

November 7
Free

How To Create A Simple Modal Box With JQuery

There are loads of plugins out there to use for a modal box but some of over complicated for this simple task of showing a message on the screen in...

September 24
Free

CSS Buttons With Icons But No Images

Since reading the article Just some other awesome CSS3 buttons I become interested about how you can use this effect to get icons on buttons without using any images. As...

September 22
Free

Create Sticky Notes To-Do List In CSS And JQuery

In this tutorial you will learn how you can create your own simple To-Do list using CSS and JQuery. First you will design the To-Do list, this is going to...

September 9
Free

How To Create Fixed Position Share Box

Do you want your social media buttons to always be on the screen for your visitors to click on? If yes then you want to have a fixed position share...

September 2
Free

Creating CSS Only Horizontal Navigation

It’s best to provide these links as a HTML list and style the list items to create the look for your menu. In terms of SEO having a pure CSS...

May 23