
+Brick + Mason
Theme designed and developed by THE MOLITOR.
If you have any questions that are beyond the scope of this help file, please visit the support forums at http://www.themolitor.com/forums
NOTE: The most up-to-date version of this help file is available at http://themolitor.com/help/wpbm
+Updates
- v1.4.0 - May 2015
- Added responsive support ("mobile-friendly")
- General code improvements and optimizations.
- v1.3.1 - 2.05.2014
- Code improvements and optimizations.
- v1.3.0 - 9.07.2013
- Added: WP Theme Customizer support (replaces OptionTree theme options panel).
- v1.2.1 - 7.15.2013
- Optimized: pagination link location
- v1.2.0 - 3.5.2013
- Added: localization support (.POT file included).
- Optimized: code throughout the template
- v1.1.4 - 2.12.2013
- Updated: theme options panel.
- v1.1.3 - 11.26.2012
- Updated: theme options panel appearance and updated/added support tab.
- v1.1.2 - 10.22.2012
- Fixed: FireFox issue with sidebar ”+” box.
- v1.1.1 - 08.29.2012
- Updated: Infinite Scroll jQuery script to latest version.
- v1.1.0 - 08.10.2012
- Added: Built-in theme options. Plugin no longer required.
- Improved: Code optimized jQuery loading.
- v1.0.1 - 02.07.2012
- Updated: PrettyPhoto Scripts to latest version. Files affected: "scripts.js" and "prettyphoto.css"
+Resources
- Videos walk-throughs: http://youtube.com/themolitor/
- Support Forums: http://www.themolitor.com/forums/
- Demo: http://themes.themolitor.com/wpbm/
- Plugins:
- Contact Form 7: http://tinyurl.com/2hjj5x
- Display Widgets: http://tinyurl.com/y9wj8gs
- Twitter Widget Pro: http://tinyurl.com/ygzhxu2
+Installation
- Download and unzip the folder from ThemeForest.
- Upload the "wpbm" folder (with the files left inside) to the themes directory of your blog, which is located within the wp-content directory.
- Activate the theme from your admin panel by navigating to "appearance" > "themes".
- NOTE: If you get a message like “stylesheet missing” (it isn’t) or “broken theme” (it’s not), please read this post: http://tinyurl.com/2aymgju
- Options will be accessible from “appearance” > “theme options”.
+General Info
NOTE: Once finished installing theme, be sure to review the options available by navigating to “appearance” > “theme options”.
Post Image Gallery
To create a post image gallery like the demo, all you have to do is simply upload images and the gallery will automatically be created for you. DO NOT insert images into the post content area.
Full Width Page (no sidebar)
To create a full width page with no sidebar, select “Full Width” in the template drop down inside page attributes (see screenshot below).

WordPress Gallery
To create a WordPress image gallery layout simply create a page and upload images. Once you've uploaded images, click the “images file” button and use the "insert gallery" option that is built into WordPress (see image below). NOTE: this option will not appear if you only have 1 image uploaded.

Portfolio Layouts
To create a portfolio masonry layout (images with different heights), select “Masonry” in the template drop down inside page attributes (see screenshot below – choose “Fixed Image Grid” if you want images to have the same height).
To customize the category that appears on the page, enter the category name in the “Category for page tempalte” field. Once finished, simply add posts (with featured images) to the category you specified.

Blog Layout
To create a blog layout, select “Blog” in the template drop down inside page attributes (see screenshot below).
To customize the category that appears on the page, enter the category name in the “Category for page tempalte” field. Once finished, simply add posts (with featured images) to the category you specified.

Videos + Other Media
To add videos, google maps, etc to the post, use the “Media Embed Code” custom field (screenshot below). Just paste the embed code to the video or map. NOTE: embed code should not be wider than 280px;

Featured Post Images
To feature images, use the “Featured Image” section on the lower right side of the post edit page (see screenshot below). After uploading the image, select "Use as featured image". When uploading an image, it automatically creates all the different sizes for you. For reference: images for blog posts are 280x170 and images for portfolios are only set at a width of 280px (unlimited height).


Navigation Menu
To create a menu, navigate to “Appearance” > “Menus” and create a new menu named “Main”. Assign this menu to the “Main Navigation Menu” in the drop down (see image below). For more information and instruction, watch the “Using WordPress 3.0 Menu System” video here: http://tinyurl.com/48dozan

Widgets
The widgets section is controlled from the "widgets" page (under "appearance"). The “Live Widgets” section controls the widgets.

Media Settings
It’s a good idea to set the size of images to use within your post/page content. Navigate to “Settings” > “Media” and make your images the same sizes as indicated in the below screenshot. The “medium size” is the largest you’ll want to use on pages with sidebars. The “large size” is the largest you’ll want to use on pages without sidebars.

Comments
- Turn off comments site-wide:
- Navigate to "settings" > "discussion" and uncheck the allow comments box...
- Turn off comments for a specific post/page:
- Uncheck the box in the discussion panel...
- If you don't see this, you can turn it on by clicking "screen options" and checking the box to display discussion options...
Image Lightbox
This theme uses PrettyPhoto as a lightbox system for images. You can make images show up with the light box by adding rel=”prettyPhoto”
to the links. For more info, check out the PrettyPhoto website: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
+HTML
This theme had a fixed and liquid layout with one, two or three columns. All of the information within the main content area is nested within a div with an ID of "content". The post content is nested inside the div with class name "post". The sidebar/widget content is within a div with an id of "sidebar". The menu content is within a div with an id of "menu".
If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:
.post a {
color: #someColor;
}
If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.
#content .post a {
color: #someColor;
}
So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.
+CSS
There is one CSS file called "Style.css" and is separated into sections using:
/* -----HEADER STUFF----- */
some code
/* -----FOOTER STUFF----- */
some code
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
+JavaScript
This theme imports the following JavaScript files:
- jQuery: jQuery is a JavaScript library that greatly reduces the amount of code that you must write.
- Custom Scripts: The scripts.js file provides some custom scripts for jQuery.
- Google Custom Font APIs: This script allows the theme to utilize Google’s custom font directory provided by google.com/webfonts
- PrettyPhoto: PrettyPhoto is a lightbox system for images. You can make images show up with the light box by adding rel=”prettyPhoto” to the links. For more info, check out the PrettyPhoto website: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
- IE7: IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6. For more info, visit http://code.google.com/p/ie7-js/
+PSD Files
The main PSD file, “bm.psd”, utilizes folders for organizing content. If you’re trying to edit a specific section, just locate the proper folder to find the layer.
Social icons can be edited from the “social.psd” file.