Customizer

The Customizer Menu

When you load up customizer with DevDmBootstrap4 this is the menu you will be presented with.

• Site Identity
• DevDmBootstrap4 Options
• Colors
• Header Image
• Background Image
• Menus
• Widgets
• Homepage Settings
• Additional CSS

Site Identity

• Logo: The logo used in the header of the website. This is defined with add_theme_support(‘custom-header’,array()) inside functions.php and specifies a recommend size of 350px wide and 150px tall inside the devdmbootstrap_setup() function. The code for displaying the logo is inside template-parts/head.php. There is a helper function for retrieving the logo URL devdmbootstrap_custom_logo() that is also inside functions.php.
• Site Title: Your website title that is displayed in the header template-parts/head.php.
• Tagline/Description: Your website tagline/description that is display in the header template-parts/head.php.
• Toggle for Site Title and Tagline: If you toggle this option off the Title and Tagline/description inside template-parts/head.php will not be displayed. If you have not uploaded a logo this will render your header empty and your Main Menu navigation will be the first thing rendered on the site. If you HAVE uploaded a logo it will be centered in the header.
• Site Icon: Your standard fav icon that displays in browser tabs and OS task-bars.

DevDmBoostrap4 Options

• Show the Header? This option will toggle the display of the Logo, Site Title and Tagline/description. That entire section will not be rendered and the first thing displayed on the site will be the Main Menu navigation. The code for controlling this functionality is inside template-parts/head.php.
• Right Sidebar Size: The right sidebar is what houses the right sidebar widgets. This size is based of the 12 column standard. What you set here will be subtracted from 12 and set the width of the main site container so that we still have 12 columns. The calculating function devdmbootstrap_column_size() is located in functions.php and is called in the main index, page, and single theme files. There might be others but you’ll recognize the pattern. Set to 0 to hide the sidebar entirely.
• Left Sidebar Size: The left sidebar is set to 0 by default which will hide it. If you give it a size you will effectively give the site a 3 column layout with a left sidebar widget area and a right sidebar widget area. When both sidebars are toggle the helper function devdmbootstrap_column_size() will balance the main container with the width of both sidebars so that it equals 12.
• Load Font Awesome: The theme uses font awesome icons for comments, meta information on posts and some buttons. It is bundled. If you deactivate it they just won’t display.
• Use the Enhanced menu system? The big problem with Bootstrap 3 was hover on desktop and touch on mobile. The enhanced menu system I’ve created solves both of those problems with a special nav walker and custom javascript. This also enables you to add in font awesome icon attributes into the Menu items meta description field when you are managing the menus through the WordPress admin interface. You can see an example of this in the main navigation of devdmbootstrap.com (spoiler alert: You are already here. Scroll up).
• Show Danny some love in the footer? This toggles the “Created By.. me” in the footer. You can find this called inside footer.php if you wish to remove it entirely.

Colors

It controls the background color of the entire site.

Header Image

This is the background image for the header. This is defined with add_theme_support(‘custom-header’, array()) inside functions.php within the devdmbootstrap_setup() function. The default dimensions are 1140px wide and 150px tall.

Background Image

The background image of the site. This is defined with add_theme_support(‘custom-background’) inside functions.php within the devdmbootstrap_setup() function.

Menus

Allows you to manage your Menus from within the WordPress customizer. DevDmBootstrap4 only has two menu locations for you to assign: Main Menu and Footer Menu. These menus are registered inside functions.php inside the devdmbootstrap_setup() function.

       // This theme uses wp_nav_menu() in two locations.
        register_nav_menus(array(
            'main_menu' => esc_html__('Main Menu', 'devdmbootstrap4'),
            'footer_menu' => esc_html__('Footer Menu', 'devdmbootstrap4'),
        ));

Widgets

By default DevDmBootstrap4 only has two widget areas that are in the left and right sidebars. The sidebars must have a width set inside the DevDmBootstrap4 customizer options to show up here for widget assignment. The sidebars are defined in functions.php within the function devdmbootstrap_widgets_init().

Homepage Settings

Your standard specify the static homepage or a latest posts control. If you set a static homepage the theme will use page.php to render it by default. It doesn’t matter what page you choose for the posts page. It will render the index.php file and ignore the content. Standard practice is to make something like a blank page called, “Blog” and assign it here. When you go to the, “Blog” page it will show your latest posts.

Additional CSS

The additional CSS tool here is actually pretty cool and has come along nicely. It renders the CSS you add in real time and outputs it into the wp_head() of the website that is called inside header.php