Create a wordpress theme fast

Creating a WordPress theme is relatively simple. You can actually only need 3 files to create a theme in wordpress!

To start making your theme, create a new folder in the wp-content/theme folder, for this demonstration, I will be creating a folder with the name ‘my-first-theme’

Create the theme folder

In that folder, create 3 files:

  • style.css
  • functions.php
  • index.php
Create the 3 files

Lets go through these 1 by 1 to explain their functions, and then we can look into the other files that you’ll need when developing your theme.


style.css

As you can probably tell, style.css holds your theme styles, but it also holds some extra information. You can actually get away with not using this, but it is best practice to store your themes meta-data in this file.

There are a many fields that you can fill (these are all listed in the wp-docs here) but we’ll keep it simple and just change these.

  • Theme Name: Name of the theme.
  • Author: The name of the individual or organization who developed the theme. Using the Theme Author’s wordpress.org username is recommended.
  • Description: A short description of the theme.
  • Version: The version of the theme, written in X.X or X.X.X format.

So if we paste this into our style.css

/*
Theme name: My First Custom Theme
Author: Small Giants LTD
Description: This is the first theme that I've ever created. I can't even imagine the amazing things I will make on this journey!
Version: 1.0
*/

body {
  background-color: red;
}

Now we have some theme meta-data! We’ll talk about getting that image space filled later.

Now you can use the rest of the style.css for your css styles.

I’ve added a background color property to the stylesheet, just so we can make sure it’s linked.


functions.php

functions.php unsurprisingly holds your themes functions. What does this mean though?

Well, functions.php acts like a plugin for your site, which tells wordpress what features the theme uses, any adjustments to filters/hookes, configurations specific to the theme, among many other things. I suggest you read this page if you ever need a catch up with anything related to the functions.php file.

As before, we’re going to focus on the absolute basics, so we’re just going to include a function which adds your ‘style.css’ to the front end of your theme.

So paste this code into your functions.php

<?php
wp_enqueue_style( 'my-custom-theme-styles', get_stylesheet_uri() );

index.php

This will be the index page for your site. By default, this will be the homepage of your site.

In this file, we’ll just add some boilerplate and a simple title and paragraph to show that our work is pulling through!

The most important things to note in this boilerplate are the wp_head and wp_footer functions. These will include the enqueued scripts and styles from the functions.php file and the wordpress admin bar respectively as well as some extra functionality.

as always, you read up more about this on the wordpress codex

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
  <meta charset="<?php bloginfo('charset') ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

  <h1>Hello from the index.php file</h1>
  <p>Look at this brand new empty site, so much potential!</p>

  <?php wp_footer(); ?>
</body>
</html>

Now with the theme activated, we can navigate to the home page and see our work!

Now this is pretty much the simplest theme you can create. Join me next time to learn how we can make this theme a lot cleaner, and fit in lines with the wordpress theme guidelines.


Extra: screenshot.png

You can also add a screenshot.png to the folder to fill that image space we talked about earlier


In summary:

  1. Create theme folder in wp-content/themes folder
  2. Create 3 files in the theme folder style.css, functions.php, index.php
  3. Paste the code below into the 3 files
  4. Edit to fit your taste
  5. Check the next article to improve your theme setup!
/* style.css */
/*
Theme name: [ THEME NAME ]
Author: [ YOUR NAME ]
Description: [ DESCRIPTION OF THE THEME AND FEATURES OF THE THEME]
Version: [ VERSION NUMBER OF THE THEME ]
*/

[  YOUR CSS STYLES ]
/* functions.php */
<?php
wp_enqueue_style( 'my-custom-theme-styles', get_stylesheet_uri() );
/* index.php */
<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
  <meta charset="<?php bloginfo('charset') ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

  [Your content]

  <?php wp_footer(); ?>
</body>
</html>