blogBox WordPress Theme - Documentation

Thanks for downloading blogBox. The theme and user documentation take a lot of time to prepare, maintain, and support.
If you use the theme and found the documentation helpful, you can show your appreciation by donating at blogBox WordPress Theme.
You can also put in a quick review for the theme at blogBox Review.


Documentation version : 4.0.3.0

Index


 About blogBox

blogBox is a full featured responsive WordPress theme offering the user many options to control the look of the theme, and many options for special pages:

  1. Home Page
    1. full width feature slider, button or thumbnail navigation
    2. small feature slider with a text area, buttons or thumbnail navigation, complete with option to widgetize the text area
    3. single image options
    4. two slogan areas
    5. service area with three sections where you can post an image, a title, and some text
    6. select a home blog template with all the above features and your blog posts
  2. Header Options
    1. header image, logo or full width banner
    2. widgetized area for social links, phone number
    3. optional display for blog title and description
    4. Menu can be displayed left, right, or centered
  3. Footer Options
    1. Option to exclude footer
    2. footer can be 3 or 4 columns
    3. Option to exclude copyright strip
    4. Copywrite area with editable html text left, center, and right
  4. Post Options
    1. Post Formats - All post formats are available
    2. Post Format Helper Plugin - Separate post format plugin is available for Audio, Quote, and Video post formats
    3. Display single posts with sidebar or full width
    4. Optionally display Timestamp, Author, Categories, and Tags
  5. Custom Styling
    1. Background Colors - change 16 different background colors
    2. Text Colors - change 17 different text colors
    3. Post Formats - change background colors and text colors for Aside, Audio, Chat, Link, Status, and Quote post formats
    4. Fonts - choose from 9 standard fonts and 13 Google Fonts for Headers and Body
    5. Menu - menu can be styled separately from header.
    6. Skins - use preset skins if you don't want to select your own colors
  6. Social Widget
    1. delicious, digg, facebook, google+, linkedin, pinterest, myspace, rss, tumblr,twitter
    2. 24x24px or 32x32px social icons
    3. select only the social links you want for each widget instance
  7. Templates
    1. Full Width Page
    2. Full Width Blog
    3. Contact template with custom captcha
    4. Siteplan template
    5. Left Sidebar template
    6. Right Sidebar template
    7. Archive template
    8. up to 5 different Portfolio templates, that you can customize with up to 4 columns, c/w post content or feature media text options
  8. Other Features
    1. Fully Responsive, user can optionally disable this feature
    2. Colorbox - Display galleries and photos using Colorbox.
    3. Comment Captcha
    4. Color Captcha or black and white
    5. Font Awesome - great vector font icon package now part of blogBox
    6. PageNavi ready - download the PageNavi plugin for great page navigation features.
    7. Child Theme Ready

 Requirements

BlogBox has been validated using the W3C validator for HTML5, and has had the css validated. It has been extensively tested using the WordPress.org testing requirements. It has been tested in all the major browsers. Basic requirements are:

  1. Internet Explorer 11, Firefox, Chrome, Opera, Safari
  2. WordPress 3.8.0 or higher
  3. HTML5
  4. Basic HTML, CSS and WordPress Experience

 License and Credits

License: GNU General Public License V3
License URI: see the license.txt file for license details.

blogBox is a full featured WordPress Theme
Copyright (C) 2012 Kevin Archibald
Version : 4.0.3 Released 20141001

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see hhttp://www.gnu.org/licenses/quick-guide-gplv3.html.
Icons

Social Media Icons :



List Icons :


  1. WOOCONS1 : http://www.woothemes.com/2010/08/woocons1/ - GNU General Public License
    for: cog.png
  2. Crystal Project Icons, AUTHOR: Everaldo Coelho, SITE:http://www.everaldo.com, CONTACT: everaldo@everaldo.com, Copyright (c) 2006-2007 Everaldo Coelho.
    for: arrow_1.png

Font Awesome :


Nivo Slider

Custom Menu System

Superfish - jQuery menu widget
Copyright 2013 jQuery Foundation and other contributors
http://jquery.com


Responsive Video (fitvids.js)

Image Viewer (Colorbox)

Captcha Font

Bitstream Vera Font : http://www-old.gnome.org/fonts/



 Installation

  1. Upload blogBox to the themes directory of your WordPress setup. Ensure all sub directories are maintained.
  2. Make sure you install only the parent folder of the blogBox files....meaning wp-content/themes/blogBox/...files. There should not be 2 blogBox folders....ie wp-content/themes/blogBox/blogBox/....files.
  3. The alternative is to go to your WordPress installation. Go to Appearance => Themes and select the Install tab. You can search for the blogBox Theme and install it from there.
  4. Activate the theme through the WordPress Admin panel under "Appearance" and "themes"

Your opening screen for a fresh install should look something like this :


Opening Screen

The first thing we will do is set up the menu.



 Set up the Menu

As shown below :


  1. Go to the menu panel under Appearance and Menus
  2. Input your menu name, I use main menu
  3. Click the Create Menu button

Menu Panel 1

The screen will update to something like the one below:


  1. Select Primary Menu for Theme locations
  2. Click the Save Menu button

Menu Panel 2

Your menu system is now ready to go. Simply select the pages and add(drag) them to the menu. You can drag a menu item over and indent it, and it will appear under the parent. To create a dummy menu item open the "Links" section and input "#" for the URL, add your "Link Text" and click the "Add to Menu" button. Dummy menu items come in handy when you are setting up drop down menu items. To get started I added the Sample Page to the menu. The image below shows the menu on the home screen.


Menu Panel 3

For now that's enough about the menu. For more instructions on the menu see the section Menu.


 Header Set-up

Header Options

In the WordPress admin panel go to Appearance => blogBox Options. Under the General tab scroll down until you see Header Options. This section and the Appearance => Header section will control how your header will look.


Options Panel 1

Header logo in upper left hand corner

Further Reference: WordPress Appearance Header Screen


You can include a website site logo in the upper left hand corner of the header. To do this go to Appearance => Header and you will see the following screen:


blogBox load logo 1

You can see that the suggested width is 960px and the suggested height is 320px. The reason it suggests this is for the case where you want a banner image instead of a logo (more on that later). When you are installing a header logo image blogBox will resize the image to a maximum allowed logo width of 200px. The height is variable based on the aspect ratio of your logo. I recommend you design your logo for 200px wide by 100px high.


To upload your logo click the browse button and select your file. Then click the upload button. You will then see the next screen :


blogBox load logo 2

You can crop your image to the desired dimensions here. I think it's better to set up your logo to the correct size before you upload it, using an image editing program such as Gimp, or Photoshop. I created a quick image for this demo, sizing it at 200px wide by 100px high. So all I have to do is Skip cropping and Publish image as is. I did notice when playing around with this that you need to ensure your entire image is selected or it will crop to the selection.


If you want to remove an image from the header panel you need to delete it in the Media panel.


Finally, if you do not want a header image click the Remove Header Image Button.


The installed logo is shown below :


blogBox load logo 3

Header Widgetized Area and the Social Widget

It's a good time to go over the Header Widgetized Area. It is located in the upper right hand corner of the header and is really intended for a social strip and phone number. You can disable this widgetized area by unchecking the checkbox in Show Social Strip in the Header Options section.

Go to Appearance => blogBoxOptions => General Tab. At the bottom of the section you will find Social Options. Add your social links and then Save Settings.


blogBox social options

Next go to Appearance => Widgets and drag over the blogBox Social Widget to the Header widetized area on the right. Delete the title, select small or large icons, and check the links you want to display. Then Save the widget. I also added a text widget with no title and a phone number in the content.


blogBox social options 2

Below is the header with the social widget enabled.


blogBox social options 3

Larger Header Logo

You can set up your header to show a larger logo if you give up your title and description,

  1. In the blogBox options header section, uncheck Show Blog Title and Show Blog Description
  2. Load up a new header logo up to 430px wide, suggest 400 x 150px. As before you go to Appearance => Header to do this.

Below is an example of this header style.


half width logo

Banner Image

If you prefer a banner image, then follow these steps.

  1. In the blogBox options header section, check Use a full width banner
  2. Check Show Blog Title if you want.
  3. Check Show Blog Description if you want.
  4. Load up a new header logo 960px wide, suggest 960 x 320px. As before you go to Appearance => Header to do this.

Below is an example of this header style, I uploaded a 960px x 200px banner.


full banner header

Menu Options

You can select to locate the menu left, right or centered, and also add a border for just the menu (center option only), or put a border the full width of the page. Tip: If you do select to use a border, make sure the bottom border color for the header is set to the same as the feature area color. You can set this color in the backgrounds tab of blogBox Options.


Below is an example of a centered menu with a full border.


center menu example

 WordPress Appearance => Background

Further Reference : WordPress Appearance Background Screen


WordPress also has a feature for installing custom backgrounds. Go to Appearance => Background and you will be presented with the following panel :


blogBox WordPress Background

You can change the color for your background here by inputting a color option in the Background Color input box. You will also be able to change the background color in blogBox Options. There you will can also add a light or dark gradient. If you plan to use blogBox Options for the background leave all entries here blank.


A neat feature here is to add a background image. Simply upload the image you want and you will see a preview. Click the Save Changes button and your background image will be installed. I've installed a background image below to give you an idea :


blogBox WordPress Background 2

 General Set Up Options

Under the Appearance tab select blogBox Options and you will see the blogBox Options panel. There are a number of tabs that you can use to set different options for the blogBox theme. Ensure that the General tab is selected. Note : Always click the Save Settings button at the bottom of the options panel when you are done with the options, or your selections will not be saved. You can also reset to defaults for the tab by clicking Reset Defaults. The screen should look like the one below :


blogBox Options General

Help Button

In the upper right hand corner of the screen you will find a Help button. When you click it you will be presented with a help screen that covers each tab of blogBox Options. Hopefully you will find some helpful information there.


blogBox Help Screen

General Options

I have already discussed the Header Section and the Social Options section. I will now cover the remaining sections.

Email address for contact page

Enter the email address you want to use for your contact page. If you leave this blank then your contact page will use the email address in Settings => General => E-mail Address.

Show Favicon

A favicon is a 16 px by 16 px icon in .png format that is attached to the browser tab of your site. If you have a favicon for your site place it in your themes root directory and check this box. The previous version of blogBox used .ico format. I switched to .png as it is a better fit accross all browsers.

Exclude Mystery Gravatar

When comments are made Gravatars are shown with the comments (if they are allowed in Settings => Discussion). If there is no avatar avalable for the user, a myatery man, or computer generated avatar is used. If you do not want this option then check the box. Note that it can slow down your load time because the function now checks twice, once to see if there is a avatar and the second time to retrieve it. So if you have a site with many comments I would leave it blank. You can also turn avatars off in Settings => discussion. Try it and see if the load times are acceptable.

Include Captcha in Comments Form

Check this box to have your users enter a captcha before being allowed to submit a comment. This captcha will help prevent spam generated by bots. Note: The captcha script uses php Graphics Draw to create the image, if GD is not enabled, the captcha script will not work and you will get the alt string Verification Captcha or you may see some other weird things. The black and white captcha should always be a random 6 letters (no numbers), while the color captcha (see below) should always be 5 letters. If you have problems with the captcha or wish to use one of the many captcha plugins out there, then you can disable it here.

Include Captcha in Contact Form

Check this box to have your users enter a captcha before being allowed to submit a contact e-mail. This captcha will help prevent spam generated by bots. The user must use the contact form supplied by blogBox. As mentioned above, ensure your captcha is working or disable it.

Use color caption option

Check this box if you would like to use a color captcha. This captcha uses images of letters and does not use the true type graphics draw function. If you are having compatibility problems and the black and white captcha is not working then try this option.

Disable colorbox.js plugin

The colorbox.js jQuery plugin is used to display single images and galleries. If you are experiencing any problems with the plugin, or wish to use a different plugin, you can disable it here.


Disable fitvids.js plugin

The fitvids.js jQuery plugin is used to make embedded videos responsive. If you are experiencing any problems with the plugin, or wish to use a different plugin, you can disable it here.


Include mobile friendly design

You can disable the mobile friendly design here. You would do this if you wanted to view your website on mobile devices in full size, not the best option on smaller devices.


Blog Options

Blog Layout Option

blogBox allows users to select a normal style blog layout, a fullwidth style blog, and a normal blog layout with static home page sections and a feature slider. The latter would be used when you want to use a blog as a home page but want to add a few elements to the top of the page.

Use Post Format Icons

blogBox uses post formats and the user has the option to include or exclude a icon that is representative of the post type. Try it and see if you like it.

Exclude timestamp in posts

Click this box and the timestamp will not be shown on posts.

Exclude author in posts

Click this box and the author will not be shown on posts.

Exclude categories in posts

Click this box and the categories will not be shown on posts.

Exclude tags in posts

Click this box and the tags will not be shown on posts.

Use fullwidth for single post

When you click on a post in the main blog you are taken to a single page presentation that allows comments (if enabled). Checking this option will display the post in full width format.

Footer Options

Show Footer

Uncheck this box to exclude the footer from your website.

Footer Columns

Select 3 or 4 columns.

Show Copyright Strip

Uncheck this box to exclude the copyright strip from your website.

Copywrite left text

Enter the text you would like to appear on the left side of the copywrite strip. This would typically be &copy; copywrite <a href="www.yoursite.url">www.yoursite.url</a>


Copywrite middle text

Enter the text you would like to appear in the middle of the copywrite strip. This would typically be site by &nbsp; <a href="www.developer.url">www.developer.url</a>

Copywrite right text

Enter the text you would like to appear in the right side of the copywrite strip. A suggestion may be a link to a siteplan :<a href="yourlink">siteplan</a>


 Skins

blogBox has a number of predefined skins for you to choose from. A skin is a predefined set of background colors and text colors.


  1. Go to Appearance => blogBox Options => Skins tab
  2. Click the Use Skin For Colors checkbox
  3. Select the skin you want to use from the dropdown box.
  4. Click the Save Changes Button

The options tab is shown below. Note that when you use skins the color options set in the Bacground Options tab and in the Text Colors tab are not used.


blogBox Skin Options

An example of the white skin is shown below.

blogBox White Skin

 Background Colors

If you feel adventurous blogBox allows you to develop your own color scheme. Remember this section is disabled if you are using a skin. Go to Appearance => blogBox Options => Background Colors tab.


blogBox Background Color Options

Click on the color for the item to open the color picker. If the entry is cleared and saved the default will be loaded. You can select the cell and then use the color picker to select a color. Play around with the color picker. You can also copy in hex color numbers from other cells or type in the hex color you want. Once you have picked a color click the Current Color button.


It is also possible to put in a light or dark gradient over the background color, simply select the gradient you want from the dropdown box.

Note: The Oustside Background Color and Background Gradient will not work if you used WordPress => Appearance => Backgrounds to set up your backgrounds.


In this version you can now set the color scheme for the navigation. Note the that there are different drop down indicators that you can select depending on your color scheme.


Make sure you Save Changes when you are done.



 Text Colors

blogBox allows you to develop your own text color scheme. Go to Appearance => blogBox Options => Text Colors tab.


blogBox Text Color Options

Click on the color for the item to open the color picker. If the entry is cleared and saved the default will be loaded. You can select the cell and then use the color picker to select a color. Play around with the color picker. You can also copy in hex color numbers from other cells or type in the hex color you want. Once you have picked a color click the Current Color button.


You can now set the text colors for the navigation.


Make sure you Save Changes when you are done.



 Post Format Colors

The latest version of bogBox supports Post Formats. Post Formats provide an opportunity for users to have different post types that can be styled differently. You can play around with the color scheme here. You can change the styles for the aside, audio, chat, link, status, and quote post formats but not for the video, image, and gallery post formats.

Post Format Color Options

 Fonts

bogBox allows the user to select different font styles for their websites. Go to Appearance => blogBox Options => Fonts tab.


blogBox Text Color Options

You can pick fonts for Header Text and for Body Text. In each group the user can either select from a standard font in the dropdown list or the user can use a Google Web font by clicking the checkbox and selecting a Google Web Font from a dropdown list.

A new option in this section is to set the base font size. All font sizes in the theme are based on the base font size. The font size you select will really depend on the font styles you use. Once you select your styles play with the size until you get the one right for your theme.

Make sure you Save Changes when your finished.



 Static Home Page Set Up

There are quite a few options for setting up your home page. If all you want is to use a blog as your home page then you can skip this section, because your blog is already set up. The blogBox theme offers a number of different options for a static home page that you can use to dress up the most important page on your site.


To set up a static home page :


  1. Create a new page with the title "Home"
  2. Select Home Page from the drop down list under Template
  3. Click the Publish button

blogBox Create Home Page

Next you need to tell WordPress to use the static home page :


  1. Go to Settings => Reading
  2. Click the static page option under Front page displays
  3. From the Front Page drop down select Home
  4. Click the Save Changes button

blogBox Setup Static Home Page

You should now be able to load the site and see your home page. It should look something like the image below :


blogBox Setup Static Home Page

 Static Home Page Options

As mentioned previously, there are quite a few options for the home page. Go to Appearance => blogBox Options and select the tab Home Page. The first part of the Home Page Options panel is shown below :



blogBox Home Page Options Part 1

 Feature Slider

There are 9 options for the Feature section of the Home Page :

  1. Small slides and feature text box.
  2. Small slides and feature text box-thumbnails
  3. Small single image and feature text box
  4. Small slides and feature text box-nonav
  5. Full feature slides
  6. Full feature slides-thumbnails
  7. Full feature slides-nonav
  8. Full single image
  9. No Feature

Image size tips - The sliders will handle any size images, they are set up in each case as a percentage of a layout width. Keep all images the same size. Play around with a width to height ratio and once you select one make all images the same.

If you pick Small slides and feature text box then you will need to add a title and text for the left hand side of the Feature. As an option you can use a widgetized area. If "Use Feature Widget" is checked then the "Feature Title" and "Feature Text" areas are not shown. Instead you must go to Appearance => Widgets and add your content in the Feature Area widgetized area. This gives you more flexibility in your feature content area. For example you can add the blogBox Social widget. The older text/textbox option was kept for previous version users.

There is also an option to include Feature posts in the general blog section of your website. To add an image to a slide show you need to create a post with the feature image inserted. If you want the post included in your blog, then simply click this option.

Adding Images to your Home Page Slide Show

1) Select Posts => Categories and add a category called Feature.

create a Feature category

2) Process the image you want to use as a feature. What I will typically do is process my images to 1024 px wide by whatever height you want. Picasa is a good option for processing the images. Another good option is GIMP. Tip: Make the images exactly the same size to eliminate jiggle. By exactly I mean to the pixel.

3) Select Posts => Add New to create a new post.

4) Select Feature as the category.



create a new Feature post

5) Select Set featured image - When you click this a new window comes up which allows you to pick the image you want to set as a feature.

6) Click the Select Files button and a new window will come up, allowing you to browse your computer to select the image you want.

7) Select the image and it will upload to your site, a new screen appears :



media details window

8) In this case the feature image was processed to a 1024px x 457px. That way you could switch to a full slider without sacrificing image quality. You can give the image a new title and fill in Alternate Text, Caption, and a Description if you want. If you fill in the caption and you are using one of the sliders, the caption will appear in a semi-opaque strip on the bottom of the photo.

9) Finally click Set featured image button.

10) You are now returned to the post panel. You can add any content you would like. If the user clicks on the Feature image, the single post screen will come up allowing the user to see any content about the Feature image and make any comments.

Once you have added your content you can preview the post or click the Publish button. You may want to go look at your Home page to check that the image loads. For additional feature images repeat steps 2) through 10). Seems like a lot but once you get the hang of it it goes pretty smoothly. Below is a screenshot with three images loaded.


slider

 Home Page Sections

Section 1

Section 1 is immediately below the Feature section. If you want it to be shown click the Enable Section 1 checkbox. Then add your Home Section 1 Slogan and Contact Link. The contact link is intended to go to your Contact page if the user clicks the button. Once you have set up your Conact Page you can return here and enter the link.



Home Section 1

Section 2

Section 2 consists of three service boxes. You can insert an image, a title, and a catch phrase into each box. The middle section of the Home page Options is shown below :

Home Service Boxes

The Enable Section 2 box must be checked or the entire section will not show.

1) Service Box 1 Image URL - Any image you use will be centered. It's best to either have images for all three service boxes, or no images at all. It is also recommended to keep all images for each service box the same size. Recommended maximum size is 200px wide x 100px high. You can also use the upload button to upload an image and insert the URL. Click the button to open up the media uploader, select your image, upload it, and then select Insert Into Post.

2) Service Box 1 Title - It's best to keep all the titles on one line.

3) Service Box 1 Link - You can add a link here. When the user clicks the service box they will be taken to the link. A good approach is to have a separate page set up with more details of the service you provide. If you do not want a link, leave the # in the entry.

Section 3

Section 3 allows you to enter two slogan lines. This section is shown below :



Home Service Boxes

1) Enable Section 3 - Must be selected for this section to show.

2) Section 3 Slogan - Enter your slogan.

3) Section 3 Sub Slogan - Enter a second slogan line.

Save Changes - Any change must be saved.

The image below shows a static home page with all features enabled :



Home Page Example

Other Home Page Options

It is possible to add content to the static home page if you want. The content will be displayed immediately below the Feature section.


 Blog Page

If you are using a static home page and you want a blog page the Blog Home Page described above is an option. If you want to create a separate blog page then this too is easy:

1) Create a new page, and give it the title Blog. Leave the template as the default template and publish the page.

2) Go to Settings => Reading and set the Posts page to Blog.


Blog Page Setup

Blog Layout Options

You can also use a full width blog page option.


  1. Go to Appearance => blogBox Options
  2. Go to General tab => Blog Options
  3. Go to the Blog Layout Option dropdown
  4. Select "fullwidth-no slider or home section"
  5. Save Settings

fullwidth blog


Below is an example of a full width blog page.


Fullwidth Blog Page

 Contact Page

The blogBox theme has a special contact page form that includes the use of a CAPTCHA to reduce spam from bots. Simply create a new page with Contact Form as the selected template. In the exmample below, I also changed the theme skin to gray to give you an idea of different skins.

Contact Page

 Archive Template

This template groups the posts into Month, Category, and Author. To use this template create a new page and select Archives as the template. A version with a brown skin is shown below :


blogBox Archives Page

 Siteplan Template

This template will list all the Pages for your site. To use this template create a new page and select Siteplan as the template. A version in the dark gray skin is shown below :


blogBox Siteplan Page

 Portfolio Templates

blogBox allows you to create up to 5 different Portfolio Templates. These templates are popular in WordPress as they offer a unique way of presenting your portfolio. Up to four columns can be used in each Portfolio Page. Images are posted by inserting feature images in posts, the same technique described in the Static Home Page Section.

1) Create a new page with Portfolio A selected as the template.

2) Publish the Page

3) Go to Appearance => blogBox Options => Portfolio Pages tab :


blogBox Portfolio Page

4) Portfolio Columns - select the number of columns you would like.

5) Portfolio Post Category - leave as default or use your own category.

6) Show Portfolio Content - Check the box if you want the content from the post to be shown, only applies for 2,3, and 4 column portfolios. For single column portfolios the post content is always shown.

7) Show Feature Caption - Check this box if you want the caption you put into the media upload panel for the feature image, to be shown.

8) Show Feature Image Description - Check this box if you want the description you put into the media upload panel for the feature image, to be shown.

9) Show Posts in Blog - Check this box if you want the posts for this Portfolio listed in your blog section.

10) Go to the bottom of the options panel and Save Changes

11) Go to Posts => Categories and if the category you listed in step 5) does not exist, create it.

blogBox Set Up Portfolio Categories

12) Create the posts and ensure you have the category selected. Upload and install the featured image.

blogBox Portfolio Post

A few tips on the Portfolio Pages :



Below is an example of a single column portfolio, with the post content, image captions and descriptions shown.


blogBox One Column Portfolio

Below is a two column portfolio example with the image caption and the image description shown.


blogBox Two Column Portfolio

Below is a three column portfolio example with the image caption and the image description shown.


blogBox Three Column Portfolio

Below is a four column portfolio example with the image caption and the image description shown.


blogBox Four Column Portfolio

 Menu

Now that we have created a few pages lets add them to the menu. Go to Appearance => Menus. Select the pages you want to add to the menu and click Add to Menu. Below shows a fully set up menu.


blogBox Set Up Menu 1

 Post Formats

As mentioned earlier blogBox now supports Post Formats. These formats allow the user to make a post of a certain type that will be presented in a different style. If you like to use post formats you may want to also consider enabling post format icons in the general tab of blogBox options. I'll review each post with an example except the standard post which is of course the default post style.

Post Format - Aside

The Aside Post Format is typically styled without a title. Similar to a Facebook note update.
In my case I have excluded all links, meta (except author), and the title. Only content is shown.


aside post

aside post content

Post Format - Audio

WordPress version 3.6 and later

The Audio Post Format allows you to post audio tracks in a more styled format. The player is from mediaelement.js, a new feature for WordPress 3.6 allowing audio embeds. Shown below are two examples, one without the shortcodes and one with the shortcodes. To be able to use the shortcodes you must install Kevins Post Format Helper available at the blogBox download page. See below for more information.


audio post

audio post content

WordPress version 3.5.2 and lower

For earlier versions of WordPress a different audio player is used. The format for using the player is shown below. The audio player will only play mp3 files at this time. Again, I'm showing the format without using the shortcode, and with using the shortcode.


audio post

audio post content

Using Kevins Post Format Helper Plugin

Yes there is a better way. I have developed a plugin that uses shortcodes to ease the pain of Audio, Video, and Quote Post Formats. Unfortunately WordPress has a policy of not allowing these kind of shortcodes within themes. The plugin is available at blogBox WordPress Theme

Once the plugin is installed and activated it will offer the following text and visual tool bars:

text toolbar

audio post content

Below are is an example of the shortcode in action:


audio shortcode

Post Format - Chat

The Chat Post Format allows you to have multiple chatters.


chat post

chat post content

Post Format - Gallery

The Gallery Post Format is really set up for a single gallery. It allows the user to post a gallery and not have all the pictures presented. The number of pictures are counted and displayed as a caption to the most recent image in the gallery. Only the post excerpt is allowed. I used the twenty-eleven content-gallery.php as a guide for this format. If you want all the pictures to be shown in a thumbnail grid then do the post in Standard Format.


Select the "Insert Media" button and upload the pictures you want to load. Insert them as a gallery and the following short code will be inserted: [gallery ids="18,19,20,21,22,23" size="wide-thumbnail" link="file" columns="3"]. I will insert a few extra short code variables to ensure I set up the gallery the way I want. The final shortcode should look like the one in the screenshot. Setting file="link" forces the links to the picture, and Colorbox will pick it up. The size="wide-thumbnail" option presents the gallery in wide format, which I like better.


gallery post

gallery post content

When the user clicks on the image in the gallery the single page view comes up.


gallery single post view

When the user clicks on any image Colorbox will load them up for viewing.


gallery colorbox

WordPress versions earlier than 3.6. On earlier versions of WordPress images are installed as attachements. The Gallery post format will work with attachements as well. However note that you can't mix images and attachmemts. It will use id's first then fall back to attachments.

Post Format - Image

The Image Post Format is basically the same as the Standard Post Format. The only difference is that there is a border and drop shadow on the images. Thus not ideal for embedding in your post, but you can if you want. It is really designed for single images with a little text.


image post

image post content

Post Format - Link

The Link Post Format is basically the same as the Standard Post Format. The styling identifies the <a> tag and presents it in a more stylish way.


link post

link post content

Post Format - Quote

The Quote Format requires an Author, the quote, and if you want, a link.


quote post

quote post content

Post Format - Status

The Status Post Format is a short status update, similar to a Twitter status update. Included in this format is a time stamp, author avatar and a author name. Comments are permitted.


status post

status post content

Post Format - Video

Video format simply wraps the video in a more appealing style. Examples for the input of a video are showm below.


video post

video post content

Index