Adding a custom stylesheet or skin

This tutorial walks you through adding a new stylesheet (.css) file to your setup. You may wish to do this if you are adding significant amounts of CSS. You can also write a completely custom skin and register that for use with the plugin.

Note that this is for users familiar with PHP and CSS, and this guide gets you pointed in the right direction to create your own customizations, outside the scope of what the plugin itself does.

If you don’t understand how to set up your custom stylesheet with the instructions below, that’s okay, you can just add your custom CSS in the CSS Tweaks setting instead.

Adding a custom stylesheet

First, create your new stylesheet (.css file). You might call it bellows-custom.css if it is going to be bellows-specific. Add it to your child theme’s directory, for example, wp-content/themes/{my-child-theme}/css/bellows-custom.css. The PHP below will assume this structure, so if you use a different directory or file name, adapt the $stylesheet_url accordingly.

Next, add this PHP (commonly in a child theme’s functions.php):

function my_custom_bellows_style() {
	$stylesheet_url = get_stylesheet_directory_uri() . '/css/bellows-custom.css'; // Make sure this matches your stylesheet's URL
	wp_enqueue_style( 'custom-bellows-css', $stylesheet_url, array( 'bellows' ), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_custom_bellows_style' );

Where do I put this code?

The most common place to put custom code is in a child theme. The stylesheet itself could be placed anywhere in the child theme (usually, in a /css directory. The PHP to load the stylesheet would be placed in the child theme’s functions.php.

However, you can also create a custom plugin to house your customizations if you prefer.

Tip: You might prefer to place your code in the child theme’s style.css. However, there are two good reasons to create a separate stylesheet. (1) Separating your styles keeps things organized and makes it easier to maintain your CSS customizations. (2) Enqueueing a separate stylesheet allows you to declare the main Bellows stylesheet as a dependency (as above), meaning your custom stylesheet will be enqueued after bellows.css, making it easier to override styles. Of course, you don’t want to be loading lots of small stylesheets, so using a minifier like Autoptimize will allow you to automatically minify and concatenate your stylesheets, giving you the best of both worlds – multiple stylesheets for organizational purposes which are automatically served a single stylesheet for efficiency.

Registering a custom skin

If you would like to register a custom skin for use within the Bellows plugin, you can do so with the bellows_register_skin() function.

Registering your custom skin stylesheet

The example below is for a skin placed in a child theme’s /css directory, with the filename my-bellows-skin.css.

function register_custom_bellows_skins(){
	$base_url_path = get_stylesheet_directory_uri() . '/css/';
	bellows_register_skin( 'my-custom-skin' , 'My Bellows Skin' , $base_url_path.'my-bellows-skin.css' );
}
add_action( 'init' , 'register_custom_bellows_skins' , 10 );

The My Bellows Skin skin will then be displayed as an option in the Control Panel.

Selecting this skin will automatically load that stylesheet, so there is no need to manually enqueue the skin.

Creating the custom skin

It’s recommended that if you create a custom skin, you copy over one of the existing skins (for example, vanilla.css is a good starter) as a base.

The first step will be to replace all of the instances of .bellows-skin-{skin-name} with your custom skin name. So for example, copying over vanilla.css, you’ll see

.bellows.bellows-skin-vanilla {
  background: #f9f9f9;
  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.17);
}

So the first thing you’ll do is replace all the instances of .bellows-skin-vanilla with your custom skin’s ID, .bellows-skin-{my-skin-id}. Continuing with the above example, that would give you .bellows-skin-my-custom-skin. Or if your skin had the ID “aqua”, you would use .bellows-skin-aqua

.bellows.bellows-skin-my-custom-skin {
  background: #f9f9f9;
  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.17);
}

This is important so that your styles will only apply to instances of the menu using this skin.

If you are familiar with LESS, you can also use the included LESS files (in Bellows Pro) to generate custom skins.

Bellows