119 featured tutorials

VueJS: Building A Comments Section

in VueJS

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

Read More


VueJS: Building A Simple Calculator

in VueJS

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

Read More


VueJS: Building A Confirmation Modal

in VueJS

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

Read More


VueJS CRUD: Product Search

in VueJS Crud

With a product list on the page it will be a good idea to be able to search through the products by product name so that you can find the...

Read More


VueJS: Make API Requests With Vue Resource

in VueJS Basics

When developing in JavaScript the majority of the ways you get data to show on the screen is through APIs, these will return JSON format of data and parsed by...

Read More


VueJS CRUD: Form Notifications

in VueJS Crud

The notification component will be used to display an alert to the user either success or error. This component requires data to be passed into it via props, this allows...

Read More


VueJS CRUD: Delete Product Page

in VueJS Crud

The Delete Product Page is a confirmation page used to delete the product from the database. It will simply consist of a button to submit the form, on submitting the...

Read More


VueJS CRUD: Edit Product Page

in VueJS Crud

The Edit Product Page will be used to allow a user to edit a specific product. This needs to work off a URL like /product/edit/:id with :id being the product...

Read More


VueJS: Vue Components

in VueJS Basics

In this tutorial we're going to learn how we can create reuseable templates in VueJS by creating Vue components. For this example we're going to re-visit the todo list loop...

Read More


VueJS CRUD: Create Product Page

in VueJS Crud

The Create Product Page will display a form allowing us to fill out new product data and POST this to the API to store the product data in the JSON...

Read More


VueJS CRUD: All Products Page

in VueJS Crud

The first page we're going to create is the All Products page this in very simple at the moment and will display all the products located in the products data...

Read More


VueJS: Computed Functions

in VueJS Basics

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

Read More


VueJS CRUD: Instantiate Application

in VueJS Crud

The main.js is the import file for webpack so this is the file that we need to bootstrap the application from. First we need to import Vue which is simply...

Read More


VueJS CRUD: Single HTML Page

in VueJS Crud

This CRUD application will run off a single HTML page, this takes advantage of the VueJS router functionality, by allowing us to replace the components in view by switching out...

Read More


VueJS CRUD: Create a Node.js API Using Express

in VueJS Crud

For this project we're going to build an API from Node.js to process the products we can use in the CRUD application. Normally I would use an API using something...

Read More


VueJS CRUD: Install Webpack

in VueJS Crud

What Is Webpack? The image above sums up Webpack perfectly, it takes your project modules like Javascript, CSS, images and bundles them up into static files for the browser to...

Read More


VueJS: Click Counter

in VueJS Basics

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

Read More


VueJS CRUD: NPM To Load Dependencies

in VueJS Crud

What Is NPM? NPM is the Node Package Manager that is used to install, publish and manage your node programs. If you're coming from a PHP background then you can...

Read More


VueJS CRUD: Setup Application

in VueJS Crud

To start off this project we first need to create and setup the structure of our files. At the root of the project we have index.html package.json README.md server.js webpack.config.js...

Read More


CSS Animation Link Underline

in Animation

In this tutorial we're going to investigate how you can use CSS animation using transition to create link effects on the hover event of the visitor. Were going to look...

Read More


Add Font Awesome To WordPress Menu Items

in Navigation Menus

Font awesome is a huge library of icons that uses fonts and CSS pseudo selectors to add these icons to your page. This technique means loading the icons is very...

Read More


Hotlink Protection On Nginx

in Web Development

I recently created a WordPress plugin called Redirection Manager which will keep track of all 404s on your website and log the URL and the referrer of the link. In...

Read More


CSS Bouncing Arrow

in Animation

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

Read More


Fixing Analytics Leverage Browser Caching

in Web Development

If you've read my previous articles you would of seen a post from last month about trying to reach the 100/100 on Google's pagespeed tool. This doesn't necessarily improve your...

Read More


How To Use Page Templates In A Plugin

in Plugin Development

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

Read More


Change WordPress Default Email From Name

in WordPress

If you send emails from your WordPress site using the wp_mail() function you might of noticed that the email address and the email name is not being sent as you...

Read More


How To Reverse jQuery SlideUp And SlideDown

in jQuery

By default jQuery slideDown will obviously slide the element down to display the contents and slideUp will slide the element up to hide the contents. What if you want to...

Read More


Back To Top Pure JavaScript

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

Read More


Build Your Own Responsive Tester Page

in Media Queries

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

Read More


Using Composer With WordPress

in Plugin Development

In this tutorial we're going to investigate using composer as the dependency manager for WordPress. What Is Composer? Composer is a dependency manager for PHP which allows you to easily...

Read More


How To Style Broken Images

in CSS

The image has disappeared In this tutorial we're going to look at how you can customise broken images like the above to make them a bit more user friendly to...

Read More


No More Comment Spam

in Customise Comments

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

Read More


Run Code For Multisite On Plugin Activation

in Plugin Development

When you're developing a new plugin you may need to run some code on the activation of the plugin. For example if your plugin requires a database table to be...

Read More


Restrict Access To WordPress Login Page

in WordPress Security

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

Read More


Change WordPress Database Prefix

in WordPress Security

As WordPress is an open source application all the database table names are known to everyone. If someone knows the name of your database table it makes it easier for...

Read More


Get WordPress Image ID By URL

in Media

In a recent project I needed to automatically assign a image to a post from a URL. This situation happened where I had a library of image URLs which on...

Read More


How To Create A Show Password Button

in jQuery

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

Read More


Dequeue Styles and Scripts In WordPress

in Plugin Development

When developing on WordPress one of the first things you need to learn about is how to add Javascript and Stylesheets to your page correctly. If you're new to WordPress...

Read More


Restrict Content Pro Stats WordPress Dashboard Widget

in Plugin Development

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

Read More


Back To Top WordPress Plugin

in Plugin Development

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

Read More


Stop WordPress Automatically Adding br

in Shortcodes

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

Read More


WordPress Recent Posts Shortcode

in Shortcodes

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

Read More


Preserve Variables Between Unit Tests

in Testing

Although not strictly unit testing but more functional testing I've been in the situation where I've had to perform automated tests of database interactions. This could be by using a...

Read More


Set WordPress Posts To Private By Default

in Admin Area

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

Read More


Viewing Localhost Site On A Mobile Device

in Web Development

In modern web development it's very important that your website is functional on mobile devices. There are a few options that you can use when testing how your website works...

Read More


jQuery Build Dropdown From AJAX

in jQuery

In a recent project I had to correct a lot of AJAX requests that will populate a HTML select dropdown, in this post I'm going to show you a quick...

Read More


Colours With Sass Map

in Sass

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

Read More


Add Required Asterisk With CSS

in CSS

A red asterix is a common approach in website UX to show that a form field is required to be filled out by the using before submitting the form. Therefore...

Read More


Add Delete Confirmation Modal To Form With jQuery

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

Read More


Media Query Sass Mixin

in Sass

If you do any front-end development over the past couple of years then you would of heard of CSS pre-processors. The most common CSS pre-processors are SASS, LESS, or Stylus....

Read More


Using Namespacing And Autoloaders In WordPress Plugins

in Plugin Development

One thing I have been experimenting with recently is adding namespacing and autoloaders to new WordPress plugins. What Are PHP Namespaces PHP namespaces was introduced in version 5.3. Namespaces is...

Read More


Sass Mixins To Get You Started On The Next Project

in Sass

If you are unaware of some of the features of Sass that can help speed up your front-end development then I would recommend reading this article on How To Get...

Read More


Change Sortable Columns In WordPress

in Admin Area

In a previous tutorial we saw how you can recreate the All Posts table in the WordPress admin area by using the WP_List class in WordPress. It talks about creating...

Read More


Migrating WordPress Database To A New Server

in WordPress

When you are developing any website you will always have different environments for your website, the number of environments you need will depend on the size of the project and...

Read More


REM Sass Mixin With Pixel Fallback

in Sass

The REM CSS unit is similar to the EM CSS unit except it allows you to size elements relative to the root of the HTML tag, as it stands for...

Read More


Add Scripts To Shortcode Only When Used

in Shortcodes

Since version 2.5 WordPress introduced a new way of developers to provide dynamic content for the content author of the website with the use of Shortcodes. What Is A Shortcode?...

Read More


Get A List Of Registered Actions In WordPress

in Plugin Development

WordPress actions and filters is an event driven architecture that allow you to run specific code at certain times in your application. To do this WordPress uses two functions the...

Read More


Dynamically Create Classes With SASS

in Sass

There are many advantages to using CSS pre-processors like SASS, some of the features allow you to end up writing less CSS code by using inheritance and functions in SASS...

Read More


Load Scripts Dynamically With jQuery

in jQuery

A common tactic to help speed up your website is to use a technique called lazy loading which means that instead of loading everything your page needs at the start...

Read More


Remove Comments From Certain Post Types

in Customise Comments

In WordPress the default posts and pages both come with comments enabled, this will allow WordPress to display your comment form under your content. But with custom post types you...

Read More


Pre-populate Post Type Content

in Custom Post Type

With custom post types you can separate the content into different section, for example you can post types, pages, portfolio pages and products. If you find that you enter the...

Read More


Add Custom Post Types To RSS Feed

in Custom Post Type

By default WordPress comes with an in-built RSS feed allowing your visitors to subscribe to your RSS feeds to be alerted to your new articles. This will normally consist of...

Read More


Force Sub Categories To Use Parent Category Templates

in Theme Development

When doing WordPress theme development the first thing you will learn about is the template hierarchy, this is the order of templates WordPress will use to display the content. WordPress...

Read More


Get Image Src With PHP

in PHP

There are some occasions where you need to get the attribute value in PHP from a HTML element, this can be for migration reasons or perhaps you are writing a...

Read More


File_Exists For Remote URL

in PHP Basics

If you want to make sure that a file exists in PHP you can use the function file_exists(), which takes one parameter of the filename. This function will not only...

Read More


Sticky Posts In WordPress

in Theme Development

As of WordPress version 2.7 you've been able to assign some posts to be sticky, a sticky post will make sure that this post appears at the top of the...

Read More


Redirect Users After Login In WordPress

in WordPress Security

WordPress comes with the ability to create different users for your website. Each of these users can have different roles and different capabilities to perform tasks on your website. You...

Read More


Equal Height Columns

in Flexbox

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

Read More


Add Custom User Profile Fields In WordPress

in Admin Area

When you are working on projects that need a lot of user management then you can get to the point where you need to add additional information to the users...

Read More


Password Protected Pages Excerpt

in Theme Development

When you display list posts in WordPress and want to display a snippet of the post content, there are two ways you can do this. You can either use the...

Read More


Hide Content on Password Protected Pages

in Theme Development

On private websites it can be handy to have password protected pages to stop everyone getting at some pieces of content. In WordPress creating a password protected page is very...

Read More


Add Upload Media To Library On Widgets

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

Read More


Debug WordPress Cron Jobs

in Plugin Development

In WordPress you can setup scheduled tasks that allow you to run a certain action at a scheduled time in the day. As this runs a set action you can...

Read More


Remove Protected: From Post Titles

in Theme Development

In WordPress you can easily password protect a page from the admin area. All you have to do is under the publish block edit visibility and select password protected. A...

Read More


Trim Post Content Outside Of Loop

in Theme Development

The WordPress loop is used in the theme files to display the post content, when you are inside the loop there are two main methods you can use to display...

Read More


Stop WordPress Including jQuery Migrate File

in Theme Development

In WordPress version 3.6 when WordPress loads the built in jQuery file it will also load in the jQuery migrate file. The jQuery migrate file was introduced in version 1.9...

Read More


Restart CSS Animation

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

Read More


Calculate Different Shades Of A Colour

in PHP

There are different ways colours are defined the two most popular values in web are HEX or RGB. Both of these values have a logical formula to working out what...

Read More


Get All Menu Items In WordPress

in Navigation Menus

In previous project I had to display a list of categories in a certain order, to get the categories out from WordPress we have a few options we can use...

Read More


How To Create WordPress Admin Tables Using WP_List_Table

in Admin Area

WordPress it's not only a CMS it can be used as an application Framework, when it's being used as a framework you will find yourself adding custom data to your...

Read More


Create A Clock In CSS

in Animation

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

Read More


How To Get Breadcrumbs In Search Results

in HTML5

If you are ranking well in the search engines but still aren't seeing the amount of traffic you should be from the search results then you need to think about...

Read More


Cache Google Web Fonts Api

in PHP

Google web fonts is a huge library of free web friendly fonts you can easily use on your website. The fonts are loaded in to your website with Javascript and...

Read More


Get Theme Directory In WordPress

in Theme Development

When you doing theme development there are times when you need to reference a file in the same folder of the current theme. You may need to include a file...

Read More


Override Sidebars Per Page In WordPress

in Plugin Development

In WordPress development you define what sidebars can be used on your theme, these sidebars will then appear on the widget dashboard screen where you can assign all the widgets...

Read More


HTML5 Datalist

in Forms

Most people use the jQuery library jQuery UI in their applications, this gives you access to a number of useful elements that you can use, these consist of the colour...

Read More


Disable Auto Updates In WordPress

in WordPress Security

In the past when there is a new WordPress version release the site admin would have to log into the admin area and manually update their website. As of WordPress...

Read More


Maintain Last Keyframe Of CSS Animation

in Animation

When using CSS animation you can set the keyframes of activities you want the animation to do. For example if you want an element to fade-in you would change the...

Read More


Force Browsers To Load Latest CSS And JS

in PHP

In modern browsers they will cache most external aspects of the website, they will cache all images and even stylesheets and javascript files of your website. During a website redesign...

Read More


Create A Animated Download Icon In CSS

in Animation

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

Read More


Remove Blog Prefix For Custom Post Types

in Custom Post Type

This is a problem I've seen a couple of times and it sometimes tricks people out of using custom post types in WordPress. When people first create a WordPress site...

Read More


Hide WordPress Update Notice To All But Admins

in WordPress Security

When you have built your site on an open source project like WordPress one of the benefits you get is continuous updates and improvements to the core code. WordPress aims...

Read More


Create Custom Tables In WordPress

in Plugin Development

If you are creating your own WordPress plugin you may want to store data inside the WordPress database. There are a few options that you can use for this, you...

Read More


Remove Automatic Paragraphs In Shortcodes

in Shortcodes

This post is an extension to the post I wrote some time ago about displaying code snippets on a WordPress site. This post showed how you can create a WordPress...

Read More


Create Password Strength Indicator With jQuery

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

Read More


Validate Requests In WordPress Using Nonce

in WordPress Security

There are loads requests that you can perform in WordPress from either forms or links that will do things like updating database values or deleting posts. If you are deleting...

Read More


Multi Environment WordPress wp-config.php

in WordPress

When you are developing any website you will always have different environments for your website, the number of environments you need will depend on the size of the project and...

Read More


Always Get A Checkbox $_POST Value

in Forms

The problem with checkboxes is that if they are not checked then they are not posted with your form. If you check a checkbox and post a form you will...

Read More


Add Custom Post Meta Data To Post List Table

in Admin Area

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

Read More


Check If A Sidebar Has Widgets Assigned

in Theme Development

To display a sidebar in your Wordpress site you first need to register the sidebar so that Wordpress can assign widgets to it. When a sidebar is registered it will...

Read More


Dependency Injection With Test Driven Development

in Testing

With unit tests you can check that your code behaviours just as you expect it to. When writing your unit tests you shouldn't need to worry about if any other...

Read More


Create Your Own WordPress Login Page

in Admin Area

In Wordpress you can create your own users and user roles, you can even do this programmatically which means that you can create a register form so that visitors to...

Read More


Test Driven Development With PHP

in Testing

In a previous post I wrote about the benefits of using Test Driven Development in your application development process. This can be used in all types of development from software...

Read More


Test Driven Development

in Testing

In this post we will be investigating what is test driven development and how we can use it to improve our development process. What Is Test Driven Development? Test driven...

Read More


Alert Theme Users To Required Plugins

in Plugin Development

One of things that I've said about premium Wordpress themes before is the amount of features that are included in the theme options panel page. Most of these theme options...

Read More


Restrict Admin Area To Only Admin Users

in WordPress Security

When you create a new user in the Wordpress user manager they will be able to login to your site by going to the default Wordpress login page /wp-login.php. Depending...

Read More


Move Wp-Content Folder To Different Location

in WordPress Security

Ever since Wordpress version 2.6 you can actually move your wp-content directory to a different location. The wp-content directory will store all your theme files, plugin files and images. Why...

Read More


Javascript Full Screen API

in jQuery

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

Read More


Display A WordPress Search Form

in Theme Development

Wordpress has an built in search facility which will allow you to search for keywords within your posts search in either the post title or the post content. In order...

Read More


Add New Menu Items To WordPress Admin

in Admin Area

If you are a plugin or theme developer then you will get to the stage where you need to add a link to your plugin or theme settings page in...

Read More


Create WordPress Post Custom Meta Boxes

in Theme Development

At the bottom of my posts you will sometimes see a couple of embedded tweets near the comments section. Many people have asked me how this appears on the site...

Read More


Add Stylesheets To WordPress Correctly

in Theme Development

When you are developing Wordpress plugin or theme then you will always get to a point where you want to add a stylesheet to the page so you can use...

Read More


Customizing WordPress Comments

in Customise Comments

Post comments are an important part of any blog, they give your readers a way of engaging with the author of the article. Comments are the main thing that makes...

Read More


Create A CSS 3D Push Button

in CSS

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

Read More


How To Register Menus In WordPress

in Navigation Menus

In a previous snippet we learnt How To Register A Sidebar In WordPress in this snippet we are going to learn how we can easily create custom menus and add...

Read More


Show Urgent Messages In WordPress Dashboard

in WordPress

If you use Wordpress dashboard then I'm sure you would of noticed the error messages that are displayed at the top. These will normally be messages from Wordpress to let...

Read More


How To Use HTML5 GeoLocation API With Google Maps

in HTML5

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

Read More


Replace jQuery With CDN In WordPress

in Theme Development

Here is a snippet which allows you to load jQuery from the Google CDN in Wordpress. jQuery is a very popular Javascript framework which can do some very powerful things...

Read More


Remove WordPress Version Number

in WordPress Security

If you have been looking into Wordpress security then you will notice that one of the most common solutions to help improve Wordpress security is is remove the version number...

Read More