Documentation

Getting Best up and running doesn’t take much time at all! In an effort to make that setup process even easier, we’ve put together this documentation page to walk you through some of the most important features of the theme so you can get a handle for how things work.

Page Templates

Best comes with four different page templates for you to choose from for your individual pages, along with a specially designed index.php page to showcase your blog, archives, and searches. The four page templates included in Best are:

• Content Left, Sidebar Right (default)
• Content Right, Sidebar Left
• Full Width
• Home

The first three page templates are excellent choices for static pages you’ll need throughout your site depending on what you’re using them for. The “Home” page template on the other hand is specifically designed to be utilized on your site’s front page. All you have to do to use the “Home” page template is create a new page and set its template as “Home.” After that, make sure to go to the “Reading” portion of your site’s “Settings” and set the static front page as “Home.” If you choose to utilize the “Home” page template, make sure to create another blank page titled “Blog” and set that as the “Posts Page” in your “Settings” tab as well.

Widget Areas

Best is packed with tons of widget areas to provide you with maximum flexibility throughout your site! The widget areas included in Best are as follows:

• Main Sidebar
• Homepage: Right of Slider
• Homepage: Widget Row
• Homepage: Left of Blog
• Footer: First Column
• Footer: Second Column
• Footer: Third Column
• Footer: Fourth Column

The “Main Sidebar” widget area will appear on you blog page, post pages, and any static page you set with a sidebar.

With the exception of the slider and recent posts area towards the bottom of the page, the “Home” template is completely widgetized. There is one widget area available to the right of the slider, which is a perfect area to showcase a call to action or additional content you want to make sure is available above the fold. Below the slider is the “Widget Row,” which adds widgets horizontally as you place more widgets in this area. A maximum of three widgets are allowed in this section. Finally, there is a widget available to the left of the recent blog posts at the bottom. This area is typically a good space to say a little something about your latest posts to help direct people to your blog.

The footer area features four columns, which allow you to place as many widgets as you would like in each section as they will stack vertically. While there is certainly no limit to what you are able to place in these areas, it’s typically best to use only one widget in each section so that your footer isn’t overwhelming.

Shortcodes

Best features many different shortcodes to help you in unlocking more advanced layouts and formatting for notoriously difficult elements to style in responsive environments such as videos. The following is a rundown of how to use the shortcodes available in Best:

Standard Buttons

The [button] allows you to create standard buttons as seen on the shortcodes page. To use it, simply pass in the following parameters:

• link (required): the URL of the page you want your link to point to
• text (required): the text you want displayed for your link
• title (optional): the text you want displayed in the title attribute for your link if desired
• color (optional): to change the default color of the button; acceptable inputs are “light-blue,” “dark-blue,” “orange,” “green,” “teal,” “purple,” “red,” “yellow,” “pink,” “maroon,” “light-gray,” “dark-gray,” and “black,”
• size (optional): to change the default size of the button (medium); acceptable inputs are “large,” “small,” and “mini”

The following is an example of a large, green button with the text “Click Me!” and a title of “Click Me!” as well: [button link="http://bloggingexperiment.com" text="Click Me!" title="Click Me!" color="green" size="large"]. Remember that if you don’t want to change the optional attributes from their defaults, you can simply leave them off and they won’t be placed into your link.

Social Buttons

Best also includes a [social] shortcode to unlock some powerful CSS3 styling, allowing for the creation of attractive social media buttons to link to practically any network you can think of. To use Best’s social buttons, pass in the following parameters:

• link (required): the URL of the page you want your link to point to
• text (required): the text you want displayed for your link
• title (optional): the text you want displayed in the title attribute for your link if desired
• network (required): the network you want your link to be associated with; acceptable inputs can be found on the shortcodes page
• notext (optional): passing in “yes” here will change the link from a button with text to a simple icon

The following is an example of a facebook button with the text “Click Me!” and a title of “Click Me!” as well: [social link="http://bloggingexperiment.com" text="Click Me!" title="Click Me!" network="facebook"]. Remember that if you don’t want to change the optional attributes from their defaults, you can simply leave them off and they won’t be placed into your link.

Rows and Columns

To utilize Best’s column layout, simply wrap a section in the [row] … [/row] shortcode, and then wrap your individual pieces of content in the [column] … [/column] shortcode and pass in a span attribue. The grid Best is built on is 12 columns wide, so your rows can be any combination of numbers adding up to 12.

For example, if you wanted three columns of equal width on a full-width page, you would do something like this: [row] [column span="4"] content goes here [/column] [column span="4"] content goes here [/column] [column span="4"] content goes here [/column] [/row]. One thing to note is that the content areas on the page templates with sidebars is eight columns wide, so you will need to make sure that your rows of columns do not exceed eight on those pages.

Responsive YouTube and Vimeo Embeds

Utilizing the [youtube] and [vimeo] shortcodes will wrap your videos in a special container, which is resized responsively with jQuery no matter how small or large your visitors make your site. To use them, simply call the shortcode for the respective service and pass in the src attribute of the video, like so: [youtube src="http://youtube.com/exampleurl872jfhalp"] You may pass in optional height and width parameters, but this is advised against as the plugin that handles your videos will take care of all the resizing for you.

Alerts

And finally, Best allows you to easily place alerts into your pages and posts so that you can get the attention of your visitors when needed. To use the built-in alerts, use the [alert] … [/alert] and pass in the following parameter:

• type (optional): not placing in a type will default to the standard (yellow) alert; additional acceptable inputs are “danger” (red), “success” (green), and “info” (blue).

The following is an example of an info alert with the content “Look at me!” added to it: [alert type="info"] Look at me! [/alert]. Remember that if you don’t want to change the optional attribute from its default, you can simply leave it off and it won’t be placed into your code.

Slide Custom Post Type

Best utilizes a custom post type for the slider on the homepage. Upon creating a new slide, you will find options to add a title, content, featured image, and an associated URL with your post. The title field will display a large title that shows on top of the featured image, and is turned into a link if a URL is added in the provided field. The content area will show up as a subtitle beneath the title if it is added. The associated URL field is available for you to link your slides to a particular post or page. If it is filled in, the image and title will be made into clickable links. It’s best to add at least a title to each of your slides for styling purposes and easier searching of your slides if you have a larger number in the admin area.

Menu Areas

Best supports two different menu areas that are able to be updated via WordPress 3.0 drag and drop menus. The first is the Topbar navigation, which appears at the top of the page. This navigation will scroll with users until a certain breakpoint, in which it becomes static at the top of the screen for mobile users. At this point, it will also turn into a collapsible menu for easier use on mobile so that it doesn’t take up too much space for smaller screens. This menu area supports drop-downs up to three levels deep after the top-level links. The second menu are is available in the footer on the right. This area does not support drop-downs at all and is intended to be used for informational pages such as an “About Us” page, “Contact” page, et cetera.

Theme Options

There is an assortment of options available via the “Theme Options” submenu under “Appearance” in the backend. The “Layout Options” tab allows you to easily enable or disable certain sections of the theme, including:

• Header Banner Area (far right of site logo)
• Homepage Intro Text
• Homepage Widget Row
• Featured Content Bar
• Twitter Integration
• Footer Top
• Footer Bottom

If appropriate, selecting a checkbox to activate an area might bring up additional textareas for you to add in content of your choosing. For example, selecting to display the Featured Content Bar will show a text area, which allows you to add any text you might want, including HTML if desired. If an area is already wrapped in certain tags for styling, you will be notified in the backend. Another example of a section that has a secondary part to fill out would be the Twitter integration, which prompts users to add in their Twitter handle if they decide to use this section. Doing so will display your most recent tweet in a section right above the footer.

The “Skin” tab allows you to quickly and easily upload an image logo if desired, set background colors and images for certain theme areas, as well as set font colors and link colors for various parts of the theme. Colors are added via a color-picker.

Images

Best is designed from the ground up to be completely responsive, and that includes images as well. Best supports featured images for posts, which will display on any blog roll areas of your site. Images are not cropped automatically, allowing you to add in content of any size. Best will accomodate any size image you place into a post. If you do want to place a full-size image into the featured image section for your blog, a width of 742px will accommodate the widest point any image will be for larger screens. Height can vary as needed, but 320px or so tends to be a good height. Remember that it is crucial to optimize images as much as possible for mobile devices that might be viewing your site. For the slider on the homepage, a width of 844px will accomodate the widest point any image will be for larger screens.

Browser Support

Best is supported in the following browsers:

• Chrome
• Safari
• Firefox
• Opera
• Internet Explorer 9
• Internet Explorer 8