Dealing with MySQL ERROR 1214 (HY000): The used table type doesn’t support FULLTEXT indexes

Reading Time: 2 minutes

If you’re ever unfortunate to run into the same MySQL error that I’ve just run into, don’t stress. There is an easy solution to resolve this annoying error message.

Ther error I was getting:

In my case, I was trying to import a .sql dump and the error I got looked  like this:

ERROR 1214 (HY000) at line 5913: The used table type doesn't support FULLTEXT indexes

The reason you’re getting this error:

In a nutshell: InnoDB doesn’t support FULLTEXT indexes prior to MySQL version 5.6. You have to use the MyISAM database engine for FULLTEXT indexes for older versions of MySQL/MariaDB.

What was going on for me:

In my case, the .sql dump was coming from AWS, that uses a newer version of MySQL/MariaDB and I was trying to import the .sql file into my MariaDB database that was running an older version. I was on a machine that was using MariaDB 5.5 (MySQL 5.5 equivalent). I needed a way to update the InnoDB engine entry to MyISAM as you have to use the MyISAM database engine for FULLTEXT indexes.

How to fix it:

Linux method: If you’re fortunate enough to be using Linux, then this command will work for you; (make a copy of the file first, just in case anything goes wrong)

sed -i 's/) ENGINE=InnoDB/) ENGINE=MyISAM/g' your_db_dump_180731.sql

On Linux systems, sed is a Unix utility that parses and transforms text.

Windows method: If you’re using Windows, you’ll have to resort to a find and replace method.  This is relatively easy to do; open your .sql file up in something like Notepad++ or Sublime and search for ENGINE=InnoDB and replace it with ENGINE=MyISAM (remember to save).

That’s it!

Hopefully, the above solution will work for you as it did for me. Importing your .sql dump should be a simple straightforward process and you should not run into any more import errors.

WordPress REST API: Pull Through Posts From Another WordPress Site

Reading Time: 2 minutes

I recently needed to pull through 2 or 3 posts (they were recipes in this instance) from another WordPress website into the current WordPress project I was working on. It seemed tricky at first and then I remembered the WordPress Rest API!

As of version 4.7, the REST API is included out of the box and plugins are no longer required. The endpoints are accessible to anyone by appending /wp-json/wp/v2/posts to the end of the website’s URL (provided they are using WordPress 4.7 and higher)

Thankfully, with the help of a little snippet of code I wrote (see below), that was more than enough to get random posts pulling through from another WordPress website along with a like to that post and it’s featured image.

Update 09 July 2018: I’ve improved the code below. Simply throw the below into your functions.php file:

/**
 * Add this to your functions.php file
 * Using the REST API, retrieve posts from another website.
 * Retrieves images and renders the output below called via a [render_recipes] shortcode
 */
function get_recipes()
{
    // Enter The URL to the API here:
    $api_url = 'https://www.website-goes-here.com/wp-json/wp/v2';

    // Retrieve 100 items via the WordPress RestAPI - can be increased
    $response = wp_remote_get(add_query_arg(array(
        'per_page' => 100
    ), $api_url . '/recipes'));

    // Make sure the response is valid before we proceed...
    if (!is_wp_error($response) && $response['response']['code'] == 200) {
        $remote_posts = json_decode($response['body']); // Our posts are stored here

        uksort($remote_posts, function() { return rand() > rand(); }); // Shuffles the results around

        $remote_posts = array_slice($remote_posts, 0, 2); // Limits the array to 2 items for render

        // Loop through each item and render it
        foreach ($remote_posts as $remote_post) {
            echo '<div class="recipe-post col-md-6">
			    <a href="' . $remote_post->link . '" target="_blank" rel="noopener">';

            // Lets go get the corresponding media for each item looped, on the fly
            $medias = json_decode(file_get_contents($api_url . '/media/'. $remote_post->featured_media));

            // Render the image
            echo '<img class="nwc-recipe-img" src="' . $medias->source_url . '" alt="' . $remote_post->title->rendered . '">';

            // Render the title
            echo '<h5 class="nwc-recipe-title">'. $remote_post->title->rendered . '</h5>';

            echo '</a>
            </div>';
        }
    }
}

// Add the [render_recipes] shortcode
add_shortcode('render_recipes', 'get_recipes');

Then, you can call the function via a shortcode on your .php theme pages like so:

<?php
 // Add this to the .php page you need to call it on.
 do_shortcode('[render_recipes]');
?>

Quick break down of how the above function works:

  1. Retrieves the posts list in JSON format from the site’s WordPress Rest API
  2. If the response is a valid one, decode the posts and start looping through the results
  3. Retrieves 100 posts, shuffles it around and then sets a limit to 2 (all I needed in this example).
  4. Chuck the responses in a basic div element (div called recipe-post in this case, but also has a bootstrap class of col-md-6)
  5. While looping through each item, also get the media attached to that post. $remote_post->featured_media returns an id in this instance.
  6. We then spit out the $medias source_url (the full path to the full featured post image)
  7. Then spit out the title and close up the <div>

The above works fairly well in my instance I needed it for. Hopefully, the above snippet of code comes in handy for you too.

Some things to keep in mind using the above:

  • This may potentially slow down your site as it has to make a few more calls. (Set the per_page argument lower if it’s taking too long)
  • This will only work on websites using WordPress 4.7 and higher (relies on the REST API natively added in this version )
  • This also assumes the default endpoints are enabled and not blocked or closed up.

What Is Web Development?

Reading Time: 5 minutes

Over the years, many people have asked me “How did you get started in making websites?”, “I want to get into web development, please help me?” and often it’s followed by a long convoluted explanation. I want to create a basic guide here for people looking for answers and do my best in pointing them in the right direction, assuming they are interested in a career in website development.

The truth is that there is no single correct path one can take in the journey to becoming a website developer – every website developer out there will give you a different story on how he/she did it and offer you advice – listen to them as none of them is wrong. We all got here in different ways.

Technologies that power the web are constantly evolving and new career paths and technologies are forged every day. Here are just some of the web developer careers paths one can venture down:

  • Website Developer
  • Website Designer
  • Front-end Developer
  • Back-end Developer
    • PHP Developer
    • Python Developer
    • .NET Developer
  • UX Designer
  • DevOps

Any web developer worth their salt usually has the same foundational knowledge. It’s likely they would have started learning the same three basic web languages and at the very least know the following technologies well: (This would also be your starting point if you know absolutely nothing about website development)

  • HTML (HTML5 is the current standard)
  • CSS (CSS3 is the current standard)
  • JavaScript (Also known as ECMAScript – 3rd edition at the very least)

From here on out, the roles start to require a person knowing different technology and scripting languages.  Each website developer role knows at least one server scripting language, with the most common ones being; (You would typically pick at least one and try get really good at it)

Once you’ve got the basic foundations down, your next step would be learning at least one library, one framework, one database technology and one web server technology (sounds like a lot, but it’s more cohesive than you think). It’s usually at about this point, a person would be deemed ’employable’ and could start earning a living off of website development.

PHP Syntax
A basic example of PHP. Some PHP syntax has been added to an HTML page.

What is a library?

A web library is best described as a collection of common functions and behaviours. It’s usually one or a collection of files that a developer can include or embed into their code. By including a library, you can add simple or complex features to your website and not have to worry about writing lengthy code to achieve it.

Common libraries found on modern websites: (good to know as many as possible)

  • jQuery (simplifies JavaScript)
  • Font Awesome (adds easy to use icons)
  • Bootstrap (adds an easy to use responsive layout and components)
  • React (JavaScript library for building interfaces)
  • D3.js (manipulating documents based on data)
  • Backbone.js (give your JavaScript code access to Models, Views, Collections, and Events)
  • three.js (create and display animated 3D computer graphics in a web browser)
jQuery example
A basic jQuery example. In this example, the jQuery was included and the simple ability to hide a few paragraphs with the click of a button was added. This would typically take a bit more code if you wrote it with just Javascript

What is a framework?

A web framework is a base set of tools (think of construction scaffolding) that a developer can use to build a website. A framework is usually built to take advantage of web server technology and includes many libraries and building blocks to ease a developers workflow, speeding up development. Probably the most well know and well-used framework in the world is WordPress, a content management system (CMS for short) built with PHP.

Common frameworks: (good to know at least one)

Laravel features
Features the Laravel framework provides a web developer to build with.

What is a database?

Think of a database as a spreadsheet for your website, only on a larger scale. It’s data stored behind the scenes that won’t necessarily be always served to the end-user and it can be manipulated in a vast number of ways before its ever shown to the user. You would store data such as content for blog posts, user information/profiles data and even some basic settings if you’d wish.

Common database technologies: (good to know at least one)

Wordpress Database
An example of a very basic database. These 12 tables you see represent the basics of a WordPress database.

What is a web server?

A web server is a technology that serves up all the above to the end-user. It’s responsible for linking all the above together and ensuring the end-user sees a website when they type in a website address and the DNS has sent them to your website. Think of it as the butler who answers the door to a lavish mansion and shows you up the stairs, to your room.

Common web server technologies: (good to know at least one)

Web Server
A very basic example of a user, using the internet to hit your web server that serves your website.

 

Visualising the structure of a WordPress website:

Visualising Web Development Technologies
Visualising Web Development Technologies

Closing Words

I have two tidbits of good news to share with you. Firstly, the path to becoming a web developer has a relatively low barrier to entry, possibly more so than any other IT fields. You can become a successful website developer without ever spending any money as there are TONS of resource with free guides and tutorials out there. The only difference between you and someone who is making a living as a web developer is that they have taken the time to learn the basics and the required technologies.

Secondly, all the technologies I have mentioned in the article above is 100% free to download, use and get your hands dirty with. You can go from learning to building to launching your first website project for next to nothing.

I’ll be following this article up in due time with learning resources and further advice.

When it comes to learning web development; time and a terrible internet connection is your only enemy.

Visual Studio Code YouTube Series

Reading Time: 2 minutes

In some spare time I’ve recently had, I took to YouTube to attempt a video series that looks into the basics of Visual Studio Code. So far I’ve produced three episodes that I’m satisfied with and actually had a bit of fun talking about Microsoft’s newest code editor.

I’ve embedded the three episodes below for your viewing pleasure. Have a watch and if you like what you see, click the Subscribe button or let me know what you think. I’m definitely interested in doing more videos for YouTube in the near future, so let me know what you’d like me to talk about.

Episode 1: What is Visual Studio Code?

What is Visual Studio Code? Today I take a quick look at and comment on Microsoft’s newest code editor.

Breakdown:

0:00 – Welcome to Microsoft Visual Studio Code
0:44 – Visual Studio Code !== Visual Studio
2:02 – Extensions and Theme
2:42 – Updates and Support
3:43 – Performance
4:35 – Popular Extensions & Git
5:34 – Outro

Episode 2: Using VS Code

In the second episode I spend some time explaining and going over the interface.

Breakdown:

00:00 – Intro
00:24 – The interface overview
01:05 – Settings
03:05 – The interface in detail
04:44 – The Command Palette
06:15 – The Output Pane
08:22 – Colour Themes
08:52 – File Icon Themes
09:18 – Keyboard Shortcuts & Keymaps
09:40 – Snippets
10:10 – Emmet
11:18 – Outro

Episode 3: Recommended Extensions for VS Code

In this episode I take a look at my personally recommended top 10 extensions for VS Code and talk a little bit about each one.

Breakdown:

00:00 – Intro
01:00 – vscode-icons
02:30 – Auto Rename Tag
03:36 – highlight-matching-tag
04:27 – Bracket Pair Colorizer
05:26 – Color Highlight
06:01 – Beautify
06:55 – Apache Conf
07:38 – Path Intellisense
08:33 – Project Manager
09:50 – Settings Sync
11:22 – Outro

Enter: Microsoft Visual Studio Code

Reading Time: 2 minutes

Move over Sublime, Brackets and Atom, there’s a new code editor on the scene and this one is worth sitting up for. Enter Microsoft Visual Studio Code, a new source code editor that is making waves on the development scene.

Don’t be put off by the name. Microsoft has done something great here and given us a free open-source code editor that should not be confused with it’s current “Visual Studio”.

I made the switch to VS Code back in April 2016 when version 1.0 was launched and since then, I haven’t looked back. Now sitting at version 1.10, the editor has matured into something noteworthy thanks to it’s monthly updates – it’s definitely on the up and up among the web coders.

Visual Studio Code

Let’s take a look at the features of VS Code and why it’s such a formidable editor:
– Git integration
– Built-in debugger
– Extensions
– Side-by-side editing
– Tab support
– Command Palette
– IntelliSense
– Integrated terminal
– Highly customizable – themes, keymaps, extensions, file icon themes
– Hot Exit support
– Available for macOS, Linux and Windows
– Monthly updates and great support
– 100% free and open source

I personally love the Git and terminal integration. The Git integration highlights code what’s been added/removed since the last commit and the terminal integration makes sure that you never have to leave your code editor to run some cmd/bash commands.

The community support around it is growing quickly and the list of ever-growing great extensions is alone, worth checking out. I plan to do a top 10 VS Code extensions blog post in the near future highlighting some of my most used extensions.

The only thing I can critique about the editor is the name. I think a lot of people are either put off, uninterested or confused about the title and I can see why. But just remember; Microsoft Visual Studio Code != Microsoft Visual Studio

If you’re looking to try something new or even just interested in using something other than what you’re used to, I highly recommend trying out VS Code, you won’t be sorry.

New Year, New Website, New Look!

Reading Time: 2 minutes

A belated but happy new year. Yeah, I know we’re half-way through February already, but I felt obliged to state the obvious. Speaking of such, welcome to my new website, sporting a brand new look.

I realized towards the end of 2016 that a website redo was much needed, but finding time between the end of year madness, starting at and adjusting to a new job, I had to find time in between everything to get this new look launched.

Whilst looking at my old website I knew an overhaul was long overdue – the old website was coded in 2015 and it was outdated. Badly. That used Bootstrap and a few Javascript libraries and to be honest that old look wore out it’s welcome very quickly.

The problem was that I wasn’t exactly sure of what I wanted. Then after browsing other websites of developers, doing some research and finding inspiration, I finally found something I liked. Something that spoke to me and said, “this is it!”. I managed to code the basic structure and look in two nights and over the course of the new few weeks, I hacked away at it, molding it to how I wanted it.

I’ve opted for a much cleaner look with a modern Material look and feel. I wanted to keep it looking almost like a professional CV (or Resume as some of you might call it) so that I can let my experience, projects and skills speak for themselves. I still wanted to keep my blogs and writing going, so instead of scrapping that (it did cross my mind), I converted what I had already coded into a WordPress theme.

There are a few minor things I will be correcting over the weeks to come, but I’m much happier with this iteration of my website. I really hope you like the look and feel.

WordPress.com vs WordPress.org

Reading Time: 3 minutes

WordPress.com vs WordPress.org: What’s the difference?

If you’re new to the world of WordPress or website development, you may be wondering what the difference between WordPress.com vs WordPress.org is?

The short answer is; WordPress.com is a service and WordPress.org is software.

Both do the exact same thing and they do it exceptionally well, however they each deliver the same set of tools in significantly different way.

The official WordPress website sums it up pretty well and uses a comparison table when talking about the two versions:

WordPress.com
Focus on your beautiful content, and let us handle the rest.
WordPress.org
Get your hands dirty, and host your website yourself.
Premium hosting, security, and backups are included. You can even upgrade to a custom domain, like YourGroovyDomain.com. You’ll need to find a host, and perform backups and maintenance yourself. We offer VaultPress for security and backups.
Choose from hundreds of beautiful themes. Make it your own with Custom Design. Install custom themes. Build your own with PHP and CSS.
Integrate your site with Facebook, Twitter, Tumblr, and other social networks. Install a plugin, like Jetpack, to enable sharing functionality on your site.
Popular features like sharing, stats, comments, and polls are included. There’s no need to install plugins. Install plugins to extend your site’s functionality.
Personal support and the WordPress.com forums are always available. Visit the WordPress.org support forums for assistance.
You must register for an account on WordPress.com and abide by our Terms of Service. No registration with WordPress.org is required.

Source: WordPress.com

The above table is useful, but it doesn’t help a user’s laymen understanding of WordPress.com vs WordPress.org. Using the above table, I’ve somewhat modified the information into something a little bit more relatable and user specific.

WordPress.com
“I just want to post and blog about cool stuff. I don’t care how it looks.”
WordPress.org
“I want a cool website and I want control over every aspect.”
Aimed at a less-tech savvy user who want to hit the floor running with content. Aimed at more skilled users who probably know a few things or two about creating a website.
I don’t want to pay a cent and I want somebody to host the website for me. I will host my own website which I don’t mind paying a monthly fee for.
I just want to choose a pretty layout and not make one. I want to code my own style, with maximum customizability.
I don’t care much for plugins. Mostly because I don’t know what they do. I want to tweak my website with fancy or niche features and the way I want it.
If I get stuck, I want to have it fixed quickly with minimal effort. I am probably going to get stuck while working out my website and don’t mind spending some time fixing it.
I don’t mind registering with WordPress. Thanks for the software WordPress, but you won’t know a thing about me!
Target Audience:
Soccer moms, Dads who want to blog about parenthood or your little brother who loves anime.
Target Audience:
Web developers, geeks or tech enthusiasts looking to create something impressive.
Coolness factor:
3 / 10
Coolness factor:
8 / 10

At the end of the day, if content is your primary focus, which it should be, both iterations of WordPress are going to serve you well. One is just going to give you more control over the one than the other in terms of flexibility, but at the cost of technical know how.

Personal advice: Go with WordPress.org. Download the source code, setup XAMPP on your machine and go the more technical route. It may be a bit more tricky to grasp, especially if you’re still starting out in the world of website development, but it’s so much more rewarding.

So You Want To Make A Website

Reading Time: 4 minutes

Over the course of my career as a website developer, I have had many people interested in wanting to learn the basics of making a website. I always advise them to getting to learn two basic entry-level skills necessary to understand and build the foundation of any website – HTML and CSS.

The world of website development is both exciting and fast paced, however in this fast-paced industry, one thing remains true and tested – two skills every aspiring website developer should know – a basic understanding of both HTML and CSS.

This easy guide serves as a basic introduction to getting you started with learning the basics. It serves to point you in the right direction to making your own basic website using both HTML and CSS.

What is HTML?

HTML is a 23 year old (at the time of writing) scripting language developed in 1993 by Tim Berners-Lee. It stands for HyperText Markup Language and is the standard markup language used to create web pages all across the internet.

What is CSS?

Cascading Style Sheets is a 19 year old style sheet language released in 1996. It is widely-used for describing the presentation of a document written in a markup language such as HTML.

Step 1: understanding The fundamentals

Being able to make a basic website doesn’t require fancy tools or software – in fact, everything you need to create a fancy website is already on your computer.

All you need is a text-editor (such as Notepad) and a web browser (such as Microsoft Edge or Google Chrome) – that’s it!

Scripting (or coding, if you wish) your website is done in your text-editor (saved as a .html file) and previewed in your web browser.

Step 2: Learning the Basics

All HTML follows a basic structure – a skeleton if you will. This is pretty much standard across every website that exists; a <head> and a <body> – all enclosed within <html> tags.

<!DOCTYPE html>

 <html>
 <head>
 <title>Page Title</title>
 </head>

 <body>
<h1>This is a Heading</h1>
 <p>This is a paragraph.</p>
</body>
 </html>

The basic structure above serves as a basis for every website you’ve ever visited. Copy it, manipulate it and try it out for yourself. Just be sure to call your file index.html

It should display something like this in your web browser:

An example of a basic HTML document
An example of a basic HTML document

Fortunately HTML is an extremely easy scripting language to understand and use. It works on the principles of wrapping what you want to display in a starting tag and a closing tag. ie, <body> </body>,  <title>  </title> – just remember this rule of thumb; whatever is opened, must be closed.

STEP 3: Introducing CSS (Cascading style sheets)

Learning CSS is a necessity when it comes to styling and changing the look of your website. CSS has the ability to pretty much change everything you see while still keeping itself separate as the code itself looks quite different from HTML.

Below is a basic CSS example of how we could manipulate the look of the HTML above:

body {
 background-color: #d0e4fe;
}

h1 {
 color: orange;
 text-align: center;
}

p {
 font-family: "Times New Roman";
 font-size: 20px;
}

You will see that with CSS, you can reference a HTML tag and give it a few properties to manipulate such as the font colour or it’s alignment.

CSS has a long list of predefined properties that would require you to look up and play with. But once you get the hang of it, the knowledge of these properties will come naturally.

STEP 4: GETTING COMFORTABLE WITH HTML & CSS

HTML and CSS naturally play together quite nicely. You can include them in one single .html file or separate them keeping the CSS code separate in a .css document and just referencing it. This is referred to as an internal stylesheet and external stylesheet respectively.

Here is an example of a more complete HTML document (using the code of both the examples above) with the CSS included internally:

<!DOCTYPE html>

 <html>
 <head>
 <title>Page Title</title>
 
 <style>
body {
 background-color: #d0e4fe;
}

h1 {
 color: orange;
 text-align: center;
}

p {
 font-family: "Times New Roman";
 font-size: 20px;
}
</style>

 </head>

 <body>
<h1>This is a Heading</h1>
 <p>This is a paragraph.</p>
</body>
 </html>

The above code should output something like this:

An example of a basic HTML + CSS document
An example of a basic HTML + CSS document

Once again, this is another reminder of just how basic the above example is. You would naturally need to manipulate the content and the CSS to make it just the way you would like it.

Essential Further Reading

I have only covered a ridiculously tiny fragment of website development, but hopefully the above article did at least one of three things; 1) give you a basic understanding of what HTML and CSS is, 2) Intrigue or interest you enough to actually want to learn more or 3) Point you in the right direction for further intermediate HTML and CSS learning.

Below are some valuable learning resources to get you quickly started into learning and finding out more about the wonderful world of creating websites with HTML and CSS:

 

How To Install A Local Web Server

Reading Time: 2 minutes

xampp-welcome

Ever wanted to set up a local copy / version of WordPress, Magento, Joomla, Drupal or any other PHP / MySQL Content Management Framework on you own PC?

In this guide, I will show you how to install a local web server on your own machine.

Any decent web server requires at least 3 minimum components, Apache (the web server), MySQL (for databases) and/or PHP (for interpreting PHP scripts).

You can manually install all these components on Windows, Mac or Linux (respectively known as a WAMP, MAMP or LAMP stack), which requires a bit of manual tweaking or you can just simply download and install XAMPP.

XAMPP

What is XAMPP?

Straight from the website:

XAMPP is an easy to install Apache distribution containing MariaDB, PHP, and Perl. Just download and start the installer. It’s that easy.

XAMPP Includes:

  • Apache
  • MariaDB (a MySQL replacement)
  • PHP
  • phpMyAdmin
  • XAMPP Control Panel (screenshot above)
  • OpenSSL
  • Webalizer
  • Mercury Mail Transport System
  • FileZilla FTP Server
  • Tomcat
  • Strawberry Perl Portable

Requirements

  • Windows: Windows 2008, 2012, Vista, 7, 8 (XP or 2003 not supported)
  • Linux: Most all distributions of Linux are supported, including Debian, RedHat, CentOS, Ubuntu, Fedora, Gentoo, Arch, SUSE.
  • Mac: Mac OS X 10.6 or later.

Once you had downloaded and installed the package, your webserver will be ready to rock and roll on your local machine.

How To Access Your Local Web Server?

Open up your web browser and type in the following address in the address bar:

http://localhost

Your localhost address is what your web server is interpreting and spitting back at you as the user. It looks to your webserver’s local files and database.

Where Are My WebsERVER’s Local Files Stored?

This primarily depends on where you installed XAMPP on your machine, but usually it can be found here:

C:\xampp\htdocs

For starters, place your new website’s files in a new folder and update the address, ie.

Your HTML and PHP files go under (file system): C:\xampp\htdocs\mytestwebsite

Your localhost URL (browser): http://localhost/mytestwebsite

That’s it! Now get playing with those PHP scripts and MySQL databases!

Add Custom CSS To a WordPress Theme

Reading Time: 2 minutes

Using themes in WordPress is fantastic for getting your website up quickly, but what if you want to add custom CSS to a WordPress theme and override the styling?

One way to change the default behaviors of WordPress is using a file named functions.php. It goes in your Theme’s folder. – WordPress.org Codex

There is the quick and dirty way to do it, but you risk having your code overridden when the theme eventually updates. This is not wise. Below I will show you the right way to do it via referencing a custom css file in your theme’s function file using the wp_enqueue_scripts hook.

Step 1: Reference the custom.css

Most WordPress themes, if not every theme has a functions.php file nested in it’s root folder. (eg. http://www.example-website.com/wp-content/themes/twentysixteen/functions.php)

Open the functions.php file, head to the very bottom of the file and paste the following code below:

function custom_css() { // The custom name of your function
wp_enqueue_style( '', get_template_directory_uri() . '/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_css' ); // Activating the function

Save it and proceed to Step 2.

Step 2: the custom.css file

Now that you have your theme looking for a custom.css file, it’s time to actually add one / create a file.

Create a custom.css file with your custom CSS code in it and upload it to your theme’s root folder. You will obviously want to throw in any custom or overriding code into there.

Save it and place it in the root of your current theme. (eg. http://www.example-website.com/wp-content/themes/twentysixteen/custom.css)

Voila! You’ve done it. Now you don’t need to worry about your theme overriding your custom CSS code when you do a theme update.

You can check that your theme is calling the custom.css file by checking the source code of your website (CTRL + U in Google Chrome) and searching for custom.css. You should see the file referenced at least once.