This theme is a custom-built Genesis and Fulcrum powered child theme for my personal blogs including Hello WordPress blog, Level Up blog, and Hello Life blog. It's built in a DRY, modular, clean, purposeful fashion. Check it out. Use it in your own projects.
Psst....it is also the starting point for any of my projects.
Remember that a child theme's intents are
I want you to resist the temptation of putting everything into the theme. Don't do it. Features like custom post types, taxonomies, shortcodes, widgets, etc. do not belong in a theme. Nope, put those into a plugin.
These child theme has some cool features and encompasses what I teach on Know the Code.
CHILD_THEME_VERSION
for easy use. Fulcrum takes care of this for you. And when you are in development mode, i.e. as specified in the wp-config.php
file with a define( 'FULCRUM_ENV', true );
, the child theme's version is set to the stylesheet's file date and time.lib/functions/autoload.php
file. If you add more files or change what I have loaded, go to this file and make your changes.Yup there are dependencies that you will need to have on your local development machine and in your project. Let's walk through them.
Here is a list of optional dependencies:
This theme requires a few thingies to be installed and setup before you can rock this custom child theme. Ready? Let's get going....
themes
folder.git clone https://github.com/hellofromtonya/hello-child-theme.git
hello
.npm install --save-dev
. In doing so, node creates a new folder called node_modules
and loads in all the dependencies.This entire theme is written in a modular, clean fashion. You might not be used to this sort of structure. With any theme, the launching point is the functions.php
file. Open up that file now and you'll see that there is very few lines of code. It truly serves as the launching point. Then it serves up the setup file, which handles setting up the theme.
The file structure follows the Genesis architecture to keep things the same and for easily finding what you are looking for in the child theme. Structures are in structure
for example. But unlike Genesis, HTML is separated from the business logic and is found in the views
.
Functionality and features are not contained in the theme itself. Nope, themes are for styling and presentation only, as they are skins. All functionality and features are add-on plugins, which extend off of Fulcrum. Any custom post types, taxonomies, settings, options, and whatever are separated from the theme itself. This architecture allows us to switch themes without affecting functionality or having to copy the code from one theme into another.
You might have noticed that the functions.php
is very skinny. Yup, this theme uses configuration over code. So instead of having a bunch of add_theme_support
or add_image_size
, instead you configure what you want in the config/theme.php
. Just follow the instructions in that file. Fulcrum then handles all of the setup for you. Whew, that saves you so much code and work from project-to-project.
To make styling changes, navigate to assets/sass
. There you will find each of the partial files which contain the CSS styling. Everything is broken up into small modular partial files. Within each folder is an index.scss
file. This file serves to gather up all of the partials within the folder. Then you import the index
files into your main stylesheet.
To change the color scheme, you go to utilities\variables\_colors.scss
. You can adjust the colors there. Notice that the hex color codes are assigned to a variable. The variable is then used within the partials. So if you want a different variable, you'll need to do a search and replace.
To change the fonts, you go to utilities\variables\_typography.scss
. You can load in whatever fonts you want. You'll also need to go into the assets loader and
The variables are setup for our color scheme. Therefore, you want to use the variables found in the _variables.scss
file. For example, let's say that you want the background-color to be our branding green color. You would use $green
as the color. This variable holds the hex color.
When you are actively making styling changes, you need to convert the Sass files into a compressed CSS file. To do this, in terminal, type gulp watch
at the root of the theme folder. Let it run as you make styling changes. Refresh your browser to see the live changes on your local sandbox site.