How to Customize the Fluid Baseline Grid WordPress Theme

Thanks for using my first WordPress Theme: Fluid Baseline Grid. I’m not offended that you want to change how it looks. I’m no designer.

Before you go breaking this theme apart, however, I’d recommend you review the original Fluid Baseline Grid framework.  There is a lot of thinking behind why things look the way they do. I know just building this framework into WordPress has taught me a lot about typography, grid systems, the rule of thirds, responsive design, and much more. In fact, I’d highly recommend you all the resources Josh Hopkins used to create this framework- it’s a very complete education into web design.

Changes you can make without code

Using the Appearance (from the Admin) or from the login toolbar, you can change the following:

• Change the background image. The lines that appear in the theme are there to help you see that the text lines up neatly and consistently. Having the text setup like this makes for easy reading. The lines are unnecessary for this benefit. It’s easy to remove them.
• Change the background color. If you’re not using an image, I’d suggest white (or a very light gray)- but that’s me.
• Navigation and menu (will be added to the top, if you want). It should produce a different kind of menu for small screens (such as phones) but all your elements will be in there.
• Widgets
  • Sitewide Footer- I recommend you use multiples of three, since that’s what this theme is based upon.
  • Homepage Header- Put anything you want on your homepage. I’d recommend you use this to generate some unique text that only appears on your homepage. Tell us a little about your website, for instance.
  • Sidebar for Post- If you want a sidebar on your pages/posts, this will be where you can place them. If you don’t want a sidebar, your page/post will be centered in the screen, with width that makes it easy to read your text.

Using the Settings > Reading (from the Admin) you can:

• You can display your posts or a static page, for your homepage. If you choose a static homepage, you can designate a page for blog posts.
• You can choose how many posts appear on your archive pages. I’d recommend multiples of 3, since that’s how the site was setup.

While you’re in there, here are some recommended WordPress settings for optimal SEO.

Changes you can make with CSS

To preserve these typographic enhancements, I’d recommend you only change colors and fonts. If you change margins and padding, the typography will not appear as clean and consistent. If you want to change the colors, etc., I recommend you start by creating a Child Theme. This has a couple of advantages:

1. It prevents you from breaking the original theme. Please note: I released this under the MIT License. That means I offer no warranties. If you break it- that’s your problem.
2. It will run a little faster. In the current web environment- especially with the rise of mobile- speed is everything.

Before you create a child theme, I recommend you review WordPress’s documentation on Child Themes. From there you’ll learn you only need two files to create a child: your own style.css file and a custom functions.php file. The key thing to remember: these files will run before any of the parent scripts.

Create a Directory for your Child Theme

You can call this whatever you want. WordPress Recommends you call it, in this case, fluid-baseline-grid-child (since that’s the name of the parent theme).

Make sure you place this in the themes directory, under the wp-content directory. It should be within the same directory that holds the parent theme- but not within the parent theme directory.

Custom CSS File (style.css)

This is where the magic starts to happen.

The best way to do this it to copy the style.css file from the parent theme and make a few modifications. Place this copied CSS file in the directory you’ve created for your child theme. If you’re following my directions, it would be the /fluid-baseline-grid-child/ directory.

First of all, you need some information (/*within remarks*/) at the top of your style.css file to tell WordPress that this is a child theme. At the minimum you need a Theme Name and designate a Template. The Theme Name can be anything, but WordPress recommends you use the parent theme’s name with “Child” on the end. For the Template you HAVE TO use the parent theme’s official name- in this case fluid-baseline-grid (with the hyphens). So, the top of your style.css file will look like:

/*

Theme Name: Fluid Baseline Grid Child

Template: fluid-baseline-grid

*/

If you’re using the parent theme’s CSS file, just replace the information at the top of the parent’s CSS file with the code, above.

From there, you can modify the CSS file in any fashion you would like, to change the colors and fonts of your new daughter theme.

Custom functions.php File

This file might sound intimidating, but it’s very simple. From here you need to call your new CSS file by enqueue-ing it. Just create a new functions.php file and place it in the same directory as your new CSS file:

<?php
function dizzysoft_enqueue_styles() {
 wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'dizzysoft_enqueue_styles' );

There are a trick here. The handle I’m using (‘style’) is the same name as the default stylesteet’s handle in the parent theme. If we don’t do this, the child’s theme will execute first, and be superseded by the parent’s theme. That means our child’s stylesheet will be basically ignored. By naming it with the same handle, the parent’s CSS file will not be loaded and our child theme will appear as we want.

More Advanced CSS Changes

In order to keep the theme thin, and loading quickly, I’ve minified many of the CSS and JS files. If you wanted to, you could crack-into those files (I’ve provided the non-minified versions for you) and customize those, as well. For instance, you might:

• Format the site based upon 4 columns, rather than 3.
• Move the sidebar to the left-side of the screen

There’s probably a lot more you can do with the Fluid Baseline Grid. In fact, if you customize this theme, share it with us in the comments below- we’d all like to see what you’ve done!