Index
- Theme Installation
- Site Layout & Backgrounds
- Site Menu
- Topbar
- Setup Custom Homepage (using Widgetized Template)
- Widgetized Template Content & Layout
- Setup Blog Page
- Category and Blog Descriptions
- Installing Demo Content (Free Version)
- Upgrading from Free to Premium Version
- Premium Licenses and Theme Updation
- Customizations (Child Themes)
- Installing Demo Content
- Lightbox - Images and Galleries
- Shortcodes
- Sliders and Carousals
- Custom 404 Page Content
- Adding Google Analytics (and other custom javascript)
- Recommended Image Dimensions
- Code Snippets
Theme Installation
TopInstalling your theme is pretty easy! After downloading you should have the responsive-brix.zip
or responsive-brix-premium.zip
file depending upon your version. This is your main theme file which contains all of the required templates and images required for the theme to function properly.
Premium users: Click here to download your premium theme zip file.
Upload the theme
- Go to Appearance > Themes in the WordPress Dashboard
- Click on the Add New button
- Click on the Upload link
- Select the
responsive-brix.zip
orresponsive-brix-premium.zip
file you downloaded above - Click Install Now
Activate the theme
- Go to Appearance > Themes in the WordPress menu
- Hover over the theme thumbnail and press the Activate button
Troubleshooting:
If you are getting a 'Broken Theme' or 'Stylesheet Missing' error, this simply means that you haven't uploaded the correct zip files. Double check and make sure you upload the exact files as mentioned above.
Troubleshooting:
If you are getting a 'Exceeds the maximum upload size' error, this means that your hosting company has a restriction on size of uploaded files (sometimes this limit can be as set as small as 2MB). Open a support ticket with your hosting company asking them to increase the PHP upload size to atleast 8MB. Most hostings will do it for you within a couple of minutes.
Alternately you can upload the theme using your hostng cpanel or using FTP.
Additional information: WordPress Codex – Using Themes
Alternative Method - Using FTP
Some servers place a restriction on the file size you can upload via web interface. If you are getting an error uploading the theme via WordPress Admin, you can upload it using a FTP program like Filezilla. It's pretty simple really.
- Unzip
responsive-brix.zip
orresponsive-brix-premium.zip
on your computer. - Start FileZilla and login to your server using FTP details provided by your Hosting Company (hostname, FTP Username, FTP Password).
- In left panel, browse to your local folder where you unzipped responsive-brix
- In right panel, browse to your wp-content/themes folder. Most servers have it in the www folder
- Right click your local folder and click upload. It will take a few minutes to upload the theme.
- Once upload finishes activate your theme following the steps mentioned above
Site Layout & Backgrounds
Top- In your wp-admin, go to Appearance > Customizer.
- Click on the Setup & Layout panel.
- Select Boxed or Stretched layout for your site under Site Layout option.

- In your wp-admin, go to Appearance > Customizer.
- Click on the Backgrounds section
- Set your Site Background and Content Box Backgrounds here.
Content Box Background is only used if you selected Boxed layout in the steps above.
Topbar
Top- Go to Appearance > Widgets in your wp-admin
- Add Widgets to Topbar Left and Topbar Right Widget Areas.
- Once you Save Widgets, Topbar will be displayed automatically on the website.
Topbar will be automatically hidden if both Left and Right areas are empty.
If only one of these areas has content, then the Topbar content will be centrally aligned.
Setup Custom Homepage (using Widgetized Template)
TopCreating a custom homepage like the demo site is quite easy using the Widgetized Template that comes bundled with Responsive Brix.
Create a Page using Widgetized Template
- In your wp-admin area, click Pages > Add New to create a new page.
- In the Page Attributes option box, choose the Widgetized Template in the Template drop-down option.
- Publish the page.
Set this page as the Homepage
- In your wp-admin, go to Settings > Reading.
- Check on the Static Page option.
- Select the page you created during the above steps in the Front Page drop-down.
- Save the Changes.
Next, to add content to your frontpage, follow the steps in the next section.
Widgetized Template Content & Layout
TopWidgetized Template is very flexible and lets you add content easily using widgets. It is included in the theme for new users to quickly get started by creating a customizable Homepage. It is made up of several areas which can be arranged in any order.
We will use the demo homepage (which uses Widgetized Template) as an example for this tutorial. Take a look at the image below to understand how the homepage layout has been set up. Click on the image below to open a bigger view.
Setting Up The Layout
- In your wp-admin, go to Appearance > Customizer.
- In the Widgetized Template - Modules section, you will find the options to manage the layout.
- You will notice that for the demo blog, we have not used all the modules. (You can disable modules by clicking the eye icon.)The Page Content module shows the content of the page which is using this template. In this example, its the 'My Home Page' page that we created in one of the previous instructions.
- Click the dropdown icon next to each module for more options.
- Save the Changes.
Adding Content
- Adding slider content
- In your wp-admin, click Appearance > Customizer.
- FREE version: Goto the Widgetized Template - HTML Slider or Widgetized Template - Image Slider section to add slides.
- Premium Version Premium themes display Slider A and Slider B sections instead of HTML/Image Slider. Premium theme users can select any slider they created in wp-admin area under Sliders > Add New.
- Select your slider layout and content here. If you are using a stretched layout, you may want to use the full width slider, just like the demo site.
- Save the Changes.
- Adding Widget Area content
- In your wp-admin, click Appearance > Widgets.
- Add Widgets to the Widgetized Template Areas.Note that the Hoot > Content Blocks widget available on this screen is a great and powerful way of adding content to the above Areas.
Setup Blog Page
TopIf you are using a custom homepage (like in the instructions above), you would most likely want to have a separate Blog Page which lists your blog posts.
Create a Blog Archive Page
- In the wp-admin area, click Pages > Add New to create a new page.
- Give this page a Title.
You can enter page content as well. This will be displayed as description in the header on the Blog Page.
- Publish the page.
- In the wp-admin area, go to Settings > Reading.
- If you followed the instructions in the previous section, the Static Page option would already be selected.
- Select the page you created in the step2 above in the Posts Page drop-down.
- Save the Changes.
You may want to add a link to this new blog page in you menu. In your wp-admin, click Appearance > Menu, and add the blog page you created in step2 above to your primary menu.
Blog Archive Layouts Premium Version
- In your wp-admin, click Appearance > Customizer.
- Goto the Archives section.
- Select the layout you want under the Archive (Blog) Layout option.
- Save the Changes.
This layout will be used throughout your site including the blog page, category page, tag page, and any other archive list page.
Category and Blog Descriptions
TopResponsive Brix displays archive descriptions (optional) in the header while viewing the archive index

Category / Tag Description
- In your wp-admin area, click Posts > Categories.
- Click the Category name to edit the category.
- Enter the description in the Description textbox.
- Save the Changes.
Blogpage Description
For entering Blog descripion, please refer to the Setup Blog Page section above.
Installing Demo Content (Free Version)
TopInstalling demo content is the easiest way to setup your theme and make it look exactly like the Demo Site.
New users often find it more helpful to quickly edit content instead of creating site from scratch.
- Your existing content (posts, pages, categories, images etc) will NOT be deleted or modified.
- Demo Posts, Pages, Images, Widgets, Menus and other theme settings will get imported and installed. This action cannot be undone.
- If you already have existing posts/pages, the extra content may lead to confusion.
Hence it is recommended to install demo content only on a fresh new site
- Right click and save these files on your computer:Responsive Brix Import Files (Free version):
WordPress Data (.xml) (Posts, Pages, Menus, Images)
Customizer Settings (.dat)
Widgets (.wie)
Reference Files: Widgets Screenshot (You can take a look at this screenshot to understand how each widget was setup on the demo blog.) - Install the One Click Demo Import plugin
- In your wp-admin, go to Plugins > Add New
- Search for One Click Demo Import in the search field on top right.
- Click Install Now next to the plugin in search results.
- Click the Activate button which appears once the install finishes.
- Upload files and import content
- In your wp-admin, go to Appearance > Import Demo Data
- Upload the 3 files you downloaded in Step 1 above.
- Click Import Demo Data button only once.
- This process will take some time. Please do not navigate away or close the window till the Import process finished.
Premium Version
Customizations (Child Themes) Premium Version
TopDownload Sample Responsive Brix Child Theme
Sample Responsive Brix Child Theme for Premium VersionSample Responsive Brix Child Theme for Free Version
Usage of child themes is highly recommended whenever you make heavy CSS customizations, or make changes to any template files (PHP code). Child themes are mini themes which act on top of the main parent theme.
The biggest advantage of using child themes is that you can make changes (css or php) in them instead of the main parent theme. This will allows you to easily update the main parent theme without losing the customizations you make in the child theme.
Read Next:
• How to add Custom CSS to your Theme
• How to add Custom PHP to your Theme
Related Articles:
• WordPress Child Themes (external link)
Child Theme Stylesheet (style.css)
Developers Note: Responsive Brix framework automatically detects a child theme and adds its stylesheet along with the main parent's style.css using proper priority. This ensures compatibility with certain plugins and dynamic css.
Hence developers do not need to enqueue parent or child theme's stylesheet again in child themes functions file.
How to install Child Theme
- Download the sample Responsive Brix child theme from above link to your computer.
- Upload and activate the child theme. (See Theme Installation section if you need help installing a theme.)
Switching between Parent and Child Theme
Even though the child theme uses the parent theme as its base, WordPress treats them separately in some respects. One of them is your Customize Settings.
These settings are stored separately for the parent and child theme. This way you can have different Customize settings (colors, backgrounds, fonts etc) for the main theme and child theme
Note: You can have any number of child themes for a main parent theme. This is useful if, for example, you want to use a different color scheme for the holidays, but don't want to lose original settings for the rest of the year.
Since WordPress stores customizer settings separately for child and parent theme, you may want to port Customizer settings when you first switch from parent to child theme (or vica versa). Fortunately our premium version comes with a simple Import/Export feature.
- Install and activate your child theme.
- In your wp-admin area, go to Appearance > Hoot Theme Manager
- Under Export Customizer Settings copy your parent theme's customizer settings
- Paste this code in the Import Customizer Settings
- Click Import Settings button.
Installing Demo Content Premium Version
TopInstalling demo content is the easiest way to setup your theme and make it look exactly like the Demo Site.
New users often find it more helpful to quickly edit content instead of creating site from scratch.
- Your existing content (posts, pages, categories, images etc) will NOT be deleted or modified.
- Demo Posts, Pages, Images, Widgets, Menus and other theme settings will get imported and installed. This action cannot be undone.
- If you already have existing posts/pages, the extra content may lead to confusion.
Hence it is recommended to install demo content only on a fresh new site
Automatic One Click Demo Install (Recommended)
- Install the One Click Demo Import plugin
- In your wp-admin, go to Plugins > Add New
- Search for One Click Demo Import in the search field on top right.
- Click Install Now next to the plugin in search results.
- Click the Activate button which appears once the install finishes.
- In your wp-admin, go to Appearance > Import Demo Data
- Click Import Demo Data button only once.
- This process will take some time. Please do not navigate away or close the window till the Import process finished.
Manual Install - Method 1
- Right click and save these files on your computer:Responsive Brix Import Files (Premium version):
WordPress Data (.xml) (Posts, Pages, Menus, Images)
Customizer Settings (.dat)
Widgets (.wie)
Reference Files: Widgets Screenshot (You can take a look at this screenshot to understand how each widget was setup on the demo blog.)
Customizer Settings (.txt) (This can optionally be used to import Customizer Settings via Appearance > Hoot Theme Manager screen.) - Install the One Click Demo Import plugin
- In your wp-admin, go to Plugins > Add New
- Search for One Click Demo Import in the search field on top right.
- Click Install Now next to the plugin in search results.
- Click the Activate button which appears once the install finishes.
- Upload files and import content
- In your wp-admin, go to Appearance > Import Demo Data
- Click the Switch to Manual import link on this screen
- Upload the 3 files you downloaded in Step 1 above.
- Click Import Demo Data button only once.
- This process will take some time. Please do not navigate away or close the window till the Import process finished.
Manual Install - Method 2
If for some reason the One Click Demo Plugin does not work as expected on your site, you can install the demo content manually using these original plugins:
- Right click and save these files on your computer:Responsive Brix Import Files (Premium version):
WordPress Data (.xml) (Posts, Pages, Menus, Images)
Customizer Settings (.dat)
Widgets (.wie)
Reference Files: Widgets Screenshot (You can take a look at this screenshot to understand how each widget was setup on the demo blog.)
Customizer Settings (.txt) (This can optionally be used to import Customizer Settings via Appearance > Hoot Theme Manager screen.) - XML File: Install the WordPress content
- In your wp-admin, go to Tools > Import
- Click Run Importer under WordPress option. (If instead of 'Run Importer', you see 'Install Now' option under WordPress, click it to install the plugin. Once this finishes, you will see the 'Run Importer' link)
- Upload the .XML file you downloaded in Step 1 above. Click Upload file and Import.
- In the next step, select the Download and import file attachments checkbox and click Submit
- WIE File: Install and run the Widget Importer & Exporter plugin
- In your wp-admin, go to Plugins > Add New
- Search for One Click Demo ImportWidget Importer & Exporter in the search field on top right.
- Click Install Now next to the plugin in search results.
- Click the Activate button which appears once the install finishes.
- Go to Tools > Widget Importer & Exporter
- Upload the .WIE file you downloaded in Step 1 above.
- Click Import Widgets
- DAT File: Install and run the Customizer Export/Import plugin
- In your wp-admin, go to Plugins > Add New
- Search for Customizer Export/Import in the search field on top right.
- Click Install Now next to the plugin in search results.
- Click the Activate button which appears once the install finishes.
- Go to Appearance > Customize > Export/Import > Export/Import
- Upload the .DAT file you downloaded in Step 1 above. Select the Download and import image files checkbox.
- Click Import Widgets
Lightbox - Images and Galleries Premium Version
TopImages (jpg, jpeg, gif, png) in Lightbox
Lightbox gets activated automatically on installing Responsive Brix Premium. By default it opens all links pointing to images (.jpg
.jpeg
.gif
and .png
) in a standalone lightbox.
WordPress Gallery in Lightbox
When you create WordPress Galleries, Responsive Brix's Lightbox automatically converts the links to a lightbox gallery. Just make sure your gallery images link to Media File in the dropdown.


Disable Lightbox for specific images
You can disable a link pointing to an image simply by adding the no-lightbox
class to the link.
Example: The original link added by WordPress (opens in lightbox)
<a href="http://my-site.com/image.jpg">Click Here to open Image</a>
Same link with the no-lightbox class added (opens normally in browser window)
<a href="http://my-site.com/image.jpg" class="no-lightbox">Click Here to open Image</a>
Disable Lightbox throughout Website
- In your wp-admin, go to Appearance > Customizer
- Click the Setup & Layout section. Check the Disable Lightbox checkbox.
- Save Settings
Shortcodes Premium Version
TopShortcodes are powerful shortcuts used in WordPress to help users insert special kinds of content. Responsive Brix Premium comes with a set of powerful shortcodes which can be inserted anywhere in Posts / Pages editor and even Widgets.
Shortcode Generator
- In your wp-admin, go to Appearance > Shortcode Generator
- Select your shortcode in the left panel. In right panel select the options for shortcode.
- Click Create Shortcode
- Copy Paste this code to your widget, or add it to your Editor using Shortcode block.
Sliders and Carousals Premium Version
TopResponsive Brix Premium adds a new Sliders Post Type to your WordPress Admin. Go to Sliders > Add New Slider to create Sliders and Caousals.
Inserting a Slider/Carousal to your Home Page
- In your wp-admin, go to Sliders > Add New Slider and create the Slider you want to add to your HomePage.
- If you haven't done it already, follow the steps in Setup Homepage section above to set up your homepage using Widgetized Page Template
- In your wp-admin, go to Appearance > Customizer.
- Under Widgetized Template - Slider A or Widgetized Template - Slider B section, select the sliders you want to display on your Homepage.
- Save your settings.
Inserting a Slider/Carousal to your Content
- Insert a slider to your Post/Page by going to Post/Page > Add New.
- Click Add Block button (the + button on top left)
- Click the Shortcode block to add it to your Page. The Shortcode block can be found under the 'Widgets' section
- Copy Paste the Slider Shortcode into the Shortcode block
Displaying a Slider/Carousel using Widgets
You can display slider in Widget Areas (Appearance > Widgets) by adding a Text Widget. Copy Paste the Slider Shortcode into the Text Widget and Save
[hoot_slider id="123"]
where 123 is the Slider ID.You can also find the slider shortcode on the Sliders screen

Custom 404 Page Content Premium Version
TopResponsive Brix Premium lets you display a custom page for the default 404 Not Found page.
- In your wp-admin area, go to Appearance > Customizer
- Click the 404 Page section.
- Select Custom 404 Page option.
- In the dropdown, select the Page you want to use as your 404 page.
- Save Settings
Once you have Saved the Settings, head over to Pages > All Pages to edit the content of this page.
Adding Google Analytics (and other custom javascript) Premium Version
Top- Setup your Google Analytics account and get your tracking code.
- In your wp-admin, click Appearance > Customizer.
- Click the Custom Code section.
- Copy and paste the Google Analytics tracking code to the Custom Javascript text box.
- Check the Include Custom Javascript in Header checkbox
- Save Settings
Recommended Image Dimensions Premium Version
TopLogo Image
The logo image is automatically reduced to the maximum available width which is 457 pixel (40% of the 1200px grid - 13px padding)
The logo height is also limited to a maximum of 120 pixel. Unlike the width, this however can be removed. To remove the height restriction, follow the steps in this code snippet.
Blog (Featured Images)
- Blog (Style 1 - Big)
- with Regular Sidebar - 840 x 385 pixel
- with Narrow / No Sidebar - 945 x 385 pixel
- Blog (Style 2 - Medium) Premium Version
- with Regular / Narrow / No Sidebar - 420 pixel width (no height limit)
- Blog (Style 3 - Small) Premium Version
- with Regular / Narrow / No Sidebar - 300 x 230 pixel
- Blog (Style 4 - Mosaic 2 column) Premium Version
- with Regular / Narrow / No Sidebar - 420 x 190 pixel
- Blog (Style 4 - Mosaic 3 column) Premium Version
- with Regular / Narrow / No Sidebar - 315 x 230 pixel
Content Block Widget
- Style 1, 2 and 3
- 1 Column Blocks Full Width Image
- 2 Column Blocks 840 x 385 pixel
- 3 Column Blocks 420 x 190 pixel
- 4 Column Blocks 315 x 230 pixel
- 5 Column Blocks 315 x 230 pixel
- Style 4
- 1 Column Blocks 840 x 385 pixel
- 2 Column Blocks 315 x 230 pixel
- 3 Column Blocks 315 x 230 pixel
- 4 Column Blocks 315 x 230 pixel
- 5 Column Blocks 315 x 230 pixel
Code Snippets Premium Version
TopCustom code snippets to modify your theme can be added using Child Themes. Custom CSS can also be added from your wp-admin by going to Appearance > Customizer and clicking Custom Code section (for premium theme version) or Additional Custom CSS (for free theme version).
Must Read:
• How to add Custom CSS to your Theme
• How to add Custom PHP to your Theme
## Increase Logo Size (remove height limitation)
The logo image is automatically reduced to the maximum available width which is 457 pixel (40% of the 1200px grid - 13px padding)
However, the logo height is limited to a maximum of 120 pixel. Unlike the width, this however can be removed. Remove the height restriction, and the logo will expand as much as it can (still restricted by the width though).
Add the following custom css to your theme.
#site-logo-img img { max-height: none; }
Premium Theme: If you want to modify logo’s size in the floating sticky header as well, then add this CSS along with the above CSS.
(replace 50px with the height you want)
#header.stuck #site-logo-img img { max-height: 50px; }
## Reduce Space between Menu Items
If you have a long primary menu spanning into more than one line, there are a few things you can do.

OPTION1: Reduce Menu Item Widths:
Add the following CSS to your theme to reduce the spacing between menu items.
You will need to modify the numbers below to suit your site - the code below has the default spacings in 'px' (pixels)
#menu-primary-items>li { margin-left: 18px; } #menu-primary-items>li>a { padding-right: 10px; padding-left: 10px; }
OPTION2: Reduce Font Size:
You can even reduce the font size to 'squeeze in' the menu.
Premium Version You can reduce menu font size in Appearance > Customizer by going to Typography section. Change the font size under Menu Font option.
Free theme users who do not have this option available can add the CSS rule to do this:
#menu-primary-items > li a { font-size: 15px; }
## Hide Title Area

Removing Title Area for specific Pages Premium Version
Sometimes you may not want to display the title area for some specific pages (for example, the checkout page of WooCommerce). In such cases you can disable the Title Area for specific pages from your wp-admin area.
Go to Pages/Posts > All and click the Page/Post you want to edit. On the Edit Page/Post screen, select the Hide Title Area for this Page option in the Page Options box.
In case you do not see Page Options box, make sure it is visible from the Screen Options dragdown button at the top right of screen.

Remove Title Area throughout the site
Add the following CSS to remove title area throughout your site.
#loop-meta { display: none; }
Remove Title Area from all 'Pages' only
Add the following CSS to remove title area from all Pages on your Site.
.singular-page #loop-meta { display: none; }
Remove Title Area from all 'Posts' only
Add the following CSS to remove title area from all Posts on your Site.
.singular-post #loop-meta { display: none; }
## Reduce Page Title area height

Add the following CSS to modify the Title area height.
You will need to modify the numbers below to suit your site - the code below has the default spacings in 'px' (pixels)
.loop-meta { padding-top: 40px; padding-bottom: 40px; }
## Delete descriptive text below Comment Form

WordPress adds default descriptive text below comment forms. To remove this, follow these steps:
Remove using PHP
Add this PHP code to remove the descriptive text (How to add Custom PHP to your Theme)
add_filter('comment_form_defaults', 'hoot_comment_form_defaults'); function hoot_comment_form_defaults($args) { $args['comment_notes_after'] = ''; return $args; }
Remove using CSS
Alternatively, you can simply hide it using CSS. Add the following CSS to your theme. (How to add Custom CSS to your Theme)
.form-allowed-tags { display: none; }