Change sizes of header-6 and header-7 in Grid One Theme

Hi Eric-

Thanks for the great question, and thanks for using the BoldGrid WordPress website builder.

You’re right that in Grid One, the widths of the header-6 and header-7 elements are “hard-coded” into the templates/header/header.php file. There are a couple of ways to change it with some custom coding. If you’re interested in getting full control over your header’s design without coding, I’d recommend checking out our newest theme, Crio.

If you’d prefer to stick with Grid One, here are two ways you can accomplish this.

First, in the spirit of “supplementing foundational code,” you can create a Child Theme for Grid One, and use it to selectively override parts of the core theme. Use these instructions to set up your Child Theme, and then create your own custom templates/header/header.php file.

Second, you can use Custom JavaScript to modify the sizes after-the-fact. This is a little easier to accomplish, but it relies on your visitor’s browser to modify the page rather than doing it on the server side. Navigate to Customize > Advanced > Custom JS & CSS and paste these lines into your Custom Theme JS:

jQuery('div.row.header-6 > div.header-6').addClass('col-md-9').removeClass('col-md-6');
jQuery('div.row.header-7 > div.header-7').addClass('col-md-3').removeClass('col-md-6');

Hi Eric-

You’re very nearly correct, and forgive me for forgetting to warn you about that.

The theme modifications you make in the customizer are stored in the wp_options table (although the database prefix can change, I’ll use wp_ just for brevity’s sake).

Every theme that makes use of the Customizer creates an entry in the wp_options table called theme_mods_{theme-slug}, in your case it would be theme_mods_boldgrid-gridone for the parent theme.

Child themes inherit their parents’ styles and files, but not the theme_mods. There is a very good free plugin called Customizer Export/Import that can help you migrate your original modifications to your new child theme.

As an aside, now that you’re using your own child theme, you now also have the option of using your child theme’s style.css file instead of the Custom CSS in the Customizer. This can have benefits if you’re using an optimization plugin like W3 Total Cache, because the style will be loaded as an asset instead of inline with the page’s HTML code, which can be saved in Browser Cache for your visitors.

Hi Eric-

The approach you took where you pasted your Parent Custom CSS into the Child Custom CSS (in the customizer) should have worked.

Right now if I take a look at your site, it doesn’t actually look like the child theme is active, so I can’t say for sure what might be going wrong.

As a first step to make sure that your child theme is working correctly, I’d recommend using the Customizer Export/Import plugin I mentioned to make sure that everything looks right.

Once that’s done, you can start thinking about taking the approach I mentioned above about moving the Customizer Custom CSS to your Child Theme’s style.css file. Keep in mind that once you do actually start using the style.css file, you’ll need to be careful to keep your browser cache clear to refresh the asset. It’s a bit of a pain for development, but it does make your site faster in the long run.