customizer | BoldGrid

In this article, we will cover the advanced Customizer options. The options within this Customizer tab are, as suggested in the title, geared toward advanced users. From this menu, you can set a static front page, add widget areas to your theme, and even quickly and easily add custom CSS and JavaScript code without editing core files

The ability to add custom CSS and JS code through the WordPress Customizer interface cuts down on development time because you can try out new code quickly in a non-destructive environment (editing code here cannot disable your site), and you can just as quickly remove code that does not achieve your desired effect.

Follow along with the steps below to see how you can access these options. If you have not already logged in to your admin menu, go ahead and log in now.

  1. CustomizeClick the Customize button.
  2. Choose AdvancedSelect Advanced.

Using a Static Front Page

By default, your BoldGrid theme uses the Home page as a static front page. Static, in this sense, means it will not change until you edit it, unlike a Posts page, which will display your latest posts and update automatically when a new post is added.

To change this behavior, you can switch Front page displays from A static page to Your latest posts. This would be ideal if you wanted your front page to be a blog page.

You can use any page for your Front page and/or Posts page.

Header Settings

Here you can add more widget areas to your header. These widget areas will be available under the Widgets menu in your customizer.

Footer Settings

Similar to the above Header Settings, you can use the Footer Settings to add more widget areas to your footer. You can also take more control over other aspects of your footer and even deactivate the footer entirely.

Attribution Control lets you hide the BoldGrid and WordPress attribution links. However, the Special Thanks link will remain.

Custom JS & CSS

Open editor to add codeThis option lets you insert custom code for CSS and JavaScript. All you need to do is click Open Editor for either Custom Theme CSS or Custom Theme JS and a transparent editor window will appear. Add your code in the editor and changes will take effect instantly.

As always, make sure to click Save & Publish when you are done editing. Well done! You now have the tools you need to use the advanced Customizer options.

Widgets are small blocks that perform a specific function, and they are a significant component in web design. For example, if your business has a Twitter feed, various social media accounts, or a calendar of upcoming events, you can add these as widgets to display on all the pages of your site.

This allows your visitors to engage more actively with the content of your site and share your content with others.

You will be able to see a list of widgets and what they do when you are ready to use them. From within the WordPress Customizer, you can easily add and edit widgets. BoldGrid makes these modifications easy to apply.

  1. Click CustomizeClick the Customize button.
  2. Click on the Widgets Tab. 
  3. Hover over a widget area and you will see on the screen where the widgets would be placed if added:
  4. Select a widget area to add more areas to hold widgets.
  5. Click add a widgetClick Add a Widget to choose from a selection of available widgets.

How to Add More Widget Areas to the Header and/or Footer

  1.  Choose Header Widgets or Footer WidgetsWhile  you are in the Customizer, you can also add more widget areas.  Click Header Widgets or Footer Widgets under the widget areas. 
  2. Choose how many widget areas you would like to displayChoose a number for how many widgets areas you would like to display.

When you go back to your Widgets menu, you will see the new Header or Footer widget area available to hold more widgets.

Well done on completing this tutorial about using widgets in the WordPress Customizer. Now you should proceed on to the Advanced section of the Customizer.

In this article, we will walk you through editing menus and adding menus to your BoldGrid theme from the WordPress customizer. You can choose from a variety of menu locations to add drop-down menus to pages, categories, and more.

Menus are the primary navigation method for your site visitors. They will be using the menus to learn more about your site, navigate between pages, and interact with your site offerings. For business owners, menus provide an opportunity to communicate your goals and values to your customer as well as an avenue for them to communicate with you.

It is less likely a visitor will stay on your site long enough to read it if they find difficulty navigating pages. Designers should provide an easy path for visitors to follow, and BoldGrid adds all the functionality you will need to do this right from the WordPress customizer. If you are not already logged into your WordPress admin menu, go ahead and log in now to get started.

  1. Click CustomizeClick the Customize button.
  2. Choose MenusChoose Menus.

You may notice you have some default menus already installed. These menus will have a name and a current location. BoldGrid comes with a series of Menu Locations you can use.

  • Primary Menu
  • Top of Footer
  • Secondary Menu, Above Header
  • Top Right, Above Header
  • Footer Center

If a menu is currently occupying one of those locations, you can see the name of the menu in parentheses.

Adding Menus

  1. Add a menuClick Add a Menu.
  2. Name the new menuGive your menu a name.
  3. Create menuClick Create Menu.
  4. Assign menu locationSelect a location for your menu.

Adding New Pages to Your Menu

After choosing a menu location for your new menu, you will notice the Menu Options below. If you would like a new menu item to appear for new pages, check the box labeled Automatically add new top-level pages to this menu. Continuing along in this WordPress Customizer series, you are going to learn more about using Widgets in your site.

If you are a new visitor and have not started using BoldGrid, you can download the free plugin now to start building a beautiful WordPress theme.

These days, image is everything. A website in need of a strong, impressive visual presence will not hold a visitor’s interest long. Recent trends in web design favor immense high-resolution background images.

BoldGrid makes it easy to integrate this kind of style into your WordPress site with virtually no effort at all. This is an easy goal to accomplish for business people and an effective time-saver for WordPress-savvy developers.

This is important because your BoldGrid theme will have a default theme background image after you have gone through the inspirations process. You may want to replace that image or use a pattern with a background color. This article tells you how to make those changes.

Now you can quickly and easily swap and customize background images, patterns, and colors for your theme right from the WordPress customizer.

Changing the Background Image

Follow along with the steps below to switch your background image and set scale, scrolling, and position options.

  1. Log into BoldGridLog into BoldGrid.
  2. Click Customize buttonClick the Customize button.
  3. Select Background.


  4. Change imageClick Change Image to select a different background image from your media library.
  5. Once you have selected an image, use the scroll, scale, and position options to further customize how your image will react on the page.

Using a Background Pattern with Color

As an alternative to a background image, you can use colors and patterns:

  1. Pattern and colorClick Pattern & Color.
  2. Try out different patternsClick through different patterns to see how they appear in the preview window.
  3. Select background colorClick the Background Color button to add color to your pattern.
  4. Click to Remove Selected PatternIf you would like to use a solid color with no pattern, choose Remove Selected Pattern.

Save & PublishMake sure to click Save & Publish when you are done editing.

Well done completing this tutorial! You now know how to customize your theme background through the WordPress customizer. You should now proceed to customizing typography.

Customizing colors with the WordPress Customizer has never been easier or faster.Choosing a color palette can have a far-reaching effect on the success of your site. Finding a balance between the color and content of your site can encourage your visitors to stay on your site for longer sessions. Changing colors can ultimately improve the authority of your business, or, for designers, make your site construction more attractive to new customers.

The BoldGrid plugin supplements the WordPress Customizer with extended functionality for color selections in your theme. You are now able to click, drag, and rearrange colors manually or choose from automatically generated color palettes.

The advantage of changing colors with color palettes instead of single colors means that if your logo or other branding materials change then you can quickly adjust all the colors of your site to match instead of editing each color separately.

If you are a casual visitor and are interested in getting started using BoldGrid, download the plugin today to start building a beautiful WordPress site.

Follow along with steps below to see how easy it is to customize colors in your BoldGrid theme. If you have not already logged into BoldGrid, go ahead and log in now. 

  1. CustomizeClick the Customize button.
  2. Choose colorsChoose Colors.
  3. Click and drag to re-arrange colorsClick and drag colors in the Active Palette.
  4. Click to change individual colorClick on an individual color to change it.
  5. Use the hexadecimal value for complete accuracy, or choose from the color picker for an approximate value.

Colors in your theme will change live in the preview window on the right.

Using Color Palettes

Click suggest palettesAs mentioned, you can re-arrange the colors in the active palette and assign different color values, but you can easily get a whole different palette automatically by choosing Suggest Palettes. Click through the different palettes and notice how the colors on your site change.

Save a favorite paletteIf you like a certain palette, but you would like to try other ones, click the pin button to save your current palette.

List saved palettes belowYou will see a list of your saved palettes at the bottom of the color menu.

How Color Locking Works

Click the lock to lock colorWith suggested color palettes, you get four complimentary colors at a time. If you like one or more of those colors more than the others, you can lock the colors you like and click the Suggest Palettes button. You will then receive suggestions based on the colors you locked.

Save & PublishMake sure to click Save & Publish when you are done editing.

Now you are familiar with changing colors in the WordPress Customizer. In the next article you will learn about editing the background of theme through the WordPress customizer.