Tutorials With Downloadable Content

Currently 124 tutorials with downloadable content

VueJS Markdown Editor

July 3

Markdown editors for writing are becoming a lot more popular these days, they make writing very easy you don't have to worry and styling you just write. You can quickly...

Add Pagination To VueJS WordPress Theme

May 8

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

Create 404 Page – VueJS WordPress Theme

May 6

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

Create Date Archives Page – VueJS WordPress Theme

April 22

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

Create Search Results Page – VueJS WordPress Theme

April 15

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

Create Author Page – VueJS WordPress Theme

April 11

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

Create Category Page – VueJS WordPress Theme

April 5

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

Create Static Pages – VueJS WordPress Theme

April 4

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

Create The Post Page – VueJS WordPress Theme

April 3

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

Creating The Homepage – VueJS WordPress Theme

March 27

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

Building The App.vue Component

March 26

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

Making API Requests With Axios

March 26

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

Setup The WordPress Routes

March 25

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

Setup Styling For The Theme

March 23

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

VueJS Project Structure

March 23

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

Building A WordPress Theme Using VueJS

March 22

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

VueJS Slots

March 14

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

Create Your Own WordPress Rest Endpoints

January 25

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


WordPress Shortcode To Display Logged In Author Posts

January 21

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

Only Allow Access To REST To Logged In Users

January 17

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

Building A Weather App With VueJS

January 9

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

VueJS: Mixins

December 22

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

VueJS: Transition Effects

December 21

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

VueJS: Vue Router Restricting Routes

December 19

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

VueJS: Vue Router Child Paths

December 12

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

VueJS: Vue Router Dynamic Routes

December 9

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

VueJS: Vue Router

December 7

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

VueJS: Building A Comments Section

December 5

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

VueJS: Building A Simple Calculator

November 30

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

VueJS: Building A Confirmation Modal

November 28

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

VueJS: Computed Functions

November 21

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

VueJS: Click Counter

November 16

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


VueJS: Preventing Default

November 14

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


VueJS: Managing User Input

November 9

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


VueJS: Binding To A Class

November 7

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


VueJS: Loop List Elements

November 2

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


VueJS: Conditional Show And Hide

October 31

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


VueJS: Bind To HTML Attribute

October 26

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


Display Data With VueJS

October 24

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


Getting Started With VueJS

October 19

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


Javascript Copy and Paste

October 10

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

CSS Bouncing Arrow

September 28

In this tutorial we're going to learn how you can create an animated bouncing arrow by using CSS, like the example above. You'll see this type of animation on sites...

How To Use Page Templates In A Plugin

September 20

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

Back To Top Pure JavaScript

August 29

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

Build Your Own Responsive Tester Page

May 30

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

No More Comment Spam

May 15

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

Restrict Access To WordPress Login Page

April 29

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


Get Keyword Frequency In PHP

March 31

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

How To Create A Show Password Button

March 21

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


How To Create A Custom Geotag Field On Formidable

March 11

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

Restrict Content Pro Stats WordPress Dashboard Widget

February 16

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

Back To Top WordPress Plugin

February 7

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

Stop WordPress Automatically Adding br

December 11

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

WordPress Recent Posts Shortcode

December 10

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

Set WordPress Posts To Private By Default

December 8

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

Colours With Sass Map

June 2

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


Disable Emojicons Introduced In WordPress 4.2

May 18

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


Fixed Width Sortable Tables Row With jQueryUI

April 15

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

Add Delete Confirmation Modal To Form With jQuery

April 13

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


Login To WordPress With Email Address

November 25

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

Equal Height Columns

April 7

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

Add Upload Media To Library On Widgets

February 26

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


Adaptive Backgrounds jQuery Plugin

February 21

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


CSS Loading Spinners

January 21

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


Create A Typing Effect In CSS

January 14

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

Restart CSS Animation

January 13

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


Changing The Element Size With jQuery

December 18

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

Create A Clock In CSS

December 10

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

Create A Animated Download Icon In CSS

October 16

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


How To Create Flat Checkboxes

September 9

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

Create Password Strength Indicator With jQuery

July 22

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


Lazy Load Social Media Buttons

May 27

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


Create An Animated CSS Box Menu

May 22

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


CSS Flip Boards

May 15

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


How To Style A Checkbox With CSS

March 27

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


Create An Interactive Metro Style Grid Dashboard

March 11

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


Create Post Tags With CSS

January 22

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


Create Polaroid Image With CSS

December 17

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


Create Google Maps With gmaps.js

December 12

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


Create Your Own Share Buttons With Sharrre

December 10

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


Learning CSS Filters With Images

December 5

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


Handle Keyboard Shortcuts With Mousetrap.js

November 5

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


Using CSS3 Columns

October 31

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


How To Create A CSS Animated Share Button

October 29

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

Javascript Full Screen API

October 22

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


Manipulate The Favicon With Tinycon

August 20

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


Display Code Snippets In WordPress

June 29

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

Create A CSS 3D Push Button

June 4

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


How To Create Shiny CSS Buttons

May 30

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


Create Always On Page HTML Elements

May 24

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


CSS Animate Effects We Can Learn From Animate.css

May 21

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


Create A Real E-Book With Turn.js

May 5

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


Controlling The WordPress Toolbar

April 30

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


Add a WordPress Menu To Your WordPress Toolbar

April 15

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


Using Social Media Hovercard jQuery Plugin

April 4

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


CSS Animated Media Queries

April 2

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


How To Add Text Gradients With CSS

March 26

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


Learn How To Create Different CSS Box Shadow Effects

February 27

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

How To Use HTML5 GeoLocation API With Google Maps

February 24

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


How To Create A CSS Slide Out Fixed Navigation

February 20

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


How To Create Pretty Search Forms

February 15

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


How To Build A Simple Tabbed Menu

February 13

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


HTML5 Details Tag

February 6

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


Smooth Scrolling To Internal Links With jQuery

January 23

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


CSS Image Reflection With Webkit

January 8

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


Learn How To Create Drop Cap Letters In CSS

January 7

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


How To Work Out Distance Between Mouse And Element

January 6

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


How To Create Stitched Look in CSS

January 3

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


Create Pulse Effect With CSS3 Animation

December 21

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


How To Create An Animated Scroll To Top Button With jQuery

December 20

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


Build A jQuery Image Gallery

November 28

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


How To Build A Pricing Table With CSS3 Animation

November 23

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


Link Indenting With CSS3 Animation

November 21

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


Pure CSS Tooltips

November 16

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


Switch Stylesheets With jQuery

November 14

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


Change Browser Highlight Colour With CSS

November 11

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


Get Any Website Alexa Rank Using PHP

November 9

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


How To Use HTML5 Form Features

November 8

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


CSS3 Spinning Social Media Icons

November 7

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


How To Create A Simple Modal Box With JQuery

September 24

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


CSS Buttons With Icons But No Images

September 22

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


Create Sticky Notes To-Do List In CSS And JQuery

September 9

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


How To Create Fixed Position Share Box

September 2

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


Creating CSS Only Horizontal Navigation

May 23

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