Create A Jekyll Theme From Scratch
This is my current live developer journal site:
I really like it, but it's hard to find things in it, or to search through content by category. I also just feel like doing a whole new design, which'll be fun.
Set up dev environment
I created a new folder on my desktop called 'progressjournal'. I initialised that as a git repository with 'git init'.
I then ran bundle init which creates a new Gemfile to list my projects dependencies, of which Jekyll will be one. If you don't have bundler installed before running this command, run gem install jekyll bundler to get it.
To add jekyll as a dependency, I opened the Gemfile and added gem "jekyll" to it.
To check it worked okay, I ran bundle exec jekyll serve in the command line to open my newly created jekyll site, which showed me the directory because we don't have an index page yet.
I then created a .gitignore file and added the jekyll cache to and auto generated jekyll site to it (which came up when I ran git status). The jekyll cache and site files auto generates on every file change, and are used to create the most current snapshot of our jekyll site. We don't need to commit these at all.
vim .gitignore
Inside the gitignore
.jekyll-cache/
_site/
Create an accessible html boilerplate
The next step was to create an index page, which will be my homepage. Inside of that index page, I added an accessible boilerplate, as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A journal for tracking your progress in anything you're learning">
<meta name="keywords" content="Jekyll, Blog, Journal, Diary">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Progress Journal</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
Front Matter
Then, I replaced all of the hard-coded values in my boilerplate with front matter variable values, as shown below:
---
title: Progress Journal
description: Track your progress towar
ds your learning goals with this progress journal.
keywords: Jekyll, Blog, Journal, Diary
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Create A Jekyll Theme From Scratch</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Create A Jekyll Theme From Scratch</h1>
<p></p>
</body>
</html>
Default layout
I created a new folder in root called 'layouts', containing a new file called 'default.html'. In that file, I copied and pasted my boilerplate code from the home page, not including the front matter. I replaced the title and tagline content with 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. 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! 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). 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: 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: Pretty cool! 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. The header page contains the html boilerplate (doctype, metadata, stlysheet links etc), the navigation and page header. Before the closing head tag, you include 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. The footer contains the footer, and the closing tags for both the body and the html. It can also include links to JavaScript files. Here is the markup for including all of the page sections back into the index page: I refreshed my wordpress site on the qachef theme page to see my changes, here is what it looks like now: 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. 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.
A Live Developer Journal
Create A Wordpress Theme From Scratch
Themes
CSS
/*
Theme Name: qachef
Author: Becca Williams (essentialistdev.com)
Description: Software as a Service theme
Version: 0.0.1
Tags: materialdesign
*/
.title { color: blue; }
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>
<link rel="stylesheet" href="<?php echo get_bloginfo('template_directory'); ?>/style.css">
Split index into sections
Header
<?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
<main>
<p>QAChef main content.</p>
</main>
Footer
<footer>
<p>© 2020 - Present, QAChef - All rights reserved.</p>
<?php wp_footer(); ?>
</footer>
</body>
</html>
Index
<?php get_header(); ?>
<?php get_template_part('content', get_post_format()); ?>
<?php get_footer(); ?>
Enable non-techy editing
Change site permalink
Then I added a new variable to the front matter called 'layout: default', which pulls in the boilerplate around all of the content. I deleted the boilerplate from the home page because it's being pulled in automatically now, and just kept the title and tagline content.
Post layout
To create a blog post layout, I added a new file to the layout directory called 'post.html'
Inside the post file, I set the layout variable in the front matter to 'layout: default', so the post layout inherits from it.
I then added the following to the content of the template:
Create A Jekyll Theme From Scratch
03 Jun 2020 -
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:
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:
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.
Every post will then contain a title, the date it was published and the author of the page.