A Live Developer Journal

Create A Wordpress Theme From Scratch

This is a nice article which explains how to get up and running with Wordpress.

I already have my Wordpress site installed locally, and am currently in the wordpress directory inside my site directory. I want to learn how to modify the HTML, CSS and JS for a Wordpress site, so I can implement the redesign for my works site.

There are lots of sub-folders inside the wordpress folder. Apparently, all of the customisations will be taken care of in the wp-content folder. Inside that folder, there is an index.php page, and three folders, plugins, themes and uploads. Pretty straightforward. I'm pretty excited about this.

Themes

Inside the themes folder, there are already three themes listed: twentyseventeen, twentyeighteen and twentynineteen. So we can create our own theme by adding a new theme folder.

I had a quick look in each of the pre-existing theme files, and there is a lot going on in them. Lots of files and folders. I'll keep them around for now so I can dive into them a bit deeper later on.

Apparently, you only need a css file and an index file for your wordpress theme to work fine. That's cool. I can start simple and layer in the good stuff when it's needed, if it's needed. This is fun!

CSS


/*
  Theme Name: qachef
  Author: Becca Williams (essentialistdev.com)
  Description: Software as a Service theme
  Version: 0.0.1
  Tags: materialdesign
*/

.title { color: blue; }

I created a stylesheet (styles.css) and added a comment with a few bits of metadata about the theme and author, as well as a dummy selector to turn the title blue (so I can test the CSS is all linked up).

HTML


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <meta name="author" content="Becca Williams (essentialistdev.com)">
    <meta name="description" content="QAChef | End-to-end Traceability">

    <title>QAChef | End-to-end Traceability</title>

    <link rel="stylesheet" href="<?php echo get_bloginfo('template_directory'); ?>/style.css">
  </head>
  <body>

    <h1 class="title">QAChef</h1>

  </body>
</html>

Then I created an index.php file with just a heading in it (as well as the HTML boilerplate markup).

We need to use PHP to link to files (a Wordpress convention). This is the html link to my stylesheet: <link rel="stylesheet" href="<?php echo get_bloginfo('template_directory'); ?>/style.css">

That's all there is to creating an extremely basic Wordpress theem. To see it live, I went back onto my local Wordpress dashboard, clicked on 'Appearances', then 'Themes', and finally on my theme 'QAChef', where you can activate it or see a live preview of it:

Screenshot of blue heading to test my theme works

Pretty cool!

Split index into sections

The next thing I did was split the index page into seperate sections. I created three new pages, header.php, footer.php and content.php.

Header

The header page contains the html boilerplate (doctype, metadata, stlysheet links etc), the navigation and page header. Before the closing head tag, you include <?php wp_head(); ?> so that wordpress knows it's a header.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <meta name="author" content="Becca Williams (essentialistdev.com)">
    <meta name="description" content="QAChef | End-to-end Traceability">

    <title>QAChef | End-to-end Traceability</title>

    <link rel="stylesheet" href="<?php echo get_bloginfo('template_directory'); ?>/style.css">

    <?php wp_head();?>

  </head>
  <body>

    <nav>
      <a href="#">Home</a>
    </nav>

    <header>
      <h1>QA Chef</h1>
      <p>Tagline</p>
    </header>

Content

The content contains the main content of the page. I put mine inside main tags to make this more clear semantically. You don't need a wordpress function here for it to know it's main content.


<main>
  <p>QAChef main content.</p>
</main>

Footer

The footer contains the footer, and the closing tags for both the body and the html. It can also include links to JavaScript files.


    <footer>
      <p>© 2020 - Present, QAChef - All rights reserved.</p>
      <?php wp_footer(); ?>
    </footer>

  </body>
</html>

Index

Here is the markup for including all of the page sections back into the index page:


<?php get_header(); ?>
  <?php get_template_part('content', get_post_format()); ?>
<?php get_footer(); ?>

I refreshed my wordpress site on the qachef theme page to see my changes, here is what it looks like now:

screenshot of wordpress site once header, footer and content have been split and added back in

Enable non-techy editing

Now, I want to make it so that people can change the title of the site on Wordpress, without having to touch the code at all.

I did this by going onto my sites dashboard, clicking 'settings', then 'General'. This brought me to a page where I can set the site title and tagline. I did this.

Andy doesn't like this way of doing things. He says that it's bad on Wordpress's part that it gets the theme to reach into Wordpress to display the title. Whereas you should be able to create the theme and wordpress injects the relevant content, kind of like how handlebars and mustache templating languages do it.

Change site permalink

By default, wordpress sets the site urls to display the day and name. I changed it so the permalink is just the post name, which looks cleaner. I did this by going to the dashboard, clicking 'general' then 'permalinks' then selecting the 'post name option' before saving.