An introduction to bfthumbs

A shortcode, like bfthumbs, can be added to any page/post/template editor (in text mode), and it will display posts and designs based on the parameters added to it. For example this bfthumbs shortcode:

[bfthumbs]

Got no parameters, and will therefore use the default, that is showing the 3 latest posts in 3 columns, without any page navigation.

[bfthumbs sid="bfthumbs-blogfp"]

When adding a sid parameter (shortcode ID), the shortcode can be edited with the shortcode GUI (opened by pressing the "insert/update a shortcode" button below the editor):

Then bfthumbs-blogfp can be selected in the "Current Post Shortcodes" list and edited. The advantage with the Shortcode GUI is that all parameters are listed and described. When pressing the "Update post Shortcode" button (or clicking a label). The page/template will be updated and the page can be reloaded to show the modification. When exiting the Shortcode GUI press the exit button, or press outside the box (then the edit page/template page must also be reloaded to show the edited shortcode. The exit button reloads automatically though).

[bfthumbs sid="bfthumbs-blogfp" category="featured" numposts="6"]

The shortcode above will show posts from the featured category, and will now show 6 posts (numposts). The category parameter can be comma separated, so posts from more than one category can be displayed. Posts can be fetched based on tags (tags) or taxonomies (tax parameter), and there are also the query_string and query_stringa parameters for all other query parameters that can be found here. If creating a custom post type in the theme settings (custom tab) they will get their own categories and tags, and these can also be accessed with the category and tag parameters, even though they are custom taxonomies (they can also be used like this tax="postTypeName_category:featured").

[bfthumbs sid="bfthumbs-blogfp" category="featured" showposts="6" sidebar="true"]

Using showposts instead of numposts, makes it possible to have page navigation. It is the number of posts to show per page. For this to work, either the wp-pagenavi or wp page numbers plugin must be installed and activated. The sidebar="true" parameter makes the thumb posts fit in a page with a sidebar (default page template). And then it will look like this:

[bfthumbs sid="bfthumbs-blogfp" category="featured" showposts="8" width="180" numcols="4"]

Now a width parameter has been added to set a manual width of the thumb post, and the numcols sets the number of columns. It will now be 4 thumb posts columns in 2 rows, and a page navigation below it.

[bfthumbs sid="bfthumbs-blogfp" category="featured" showposts="8" width="180" height="120" numcols="4" ajaxnav="false"]

A height parameter has been added, and it sets the height of the thumbnail image, and not the whole post. The width is also for the thumbnail image, but also the whole post. The ajaxnav="false" parameter makes the page navigation work like normal WP page navigation. Then the page will reload and all pages will have a unique url, while without this parameter the javascript method will be used and it will not change the url. The advantage with the javascript method is that it makes it possible to have more than one bfthumbs shortcode per page with page navigation.

Adding text="false" will hide the text, and meta="true" will show the post meta (post date and categories). These are checkboxes at the bottom of the Shortcode GUI, so it is easier to know the options and edit it there.

If you want to edit the shortcode further, like adding the title above the image, or adding more post meta details, like tags, the bfthumbs layout manager can be used. This can be accessed by pressing the bfthumbs layout button while editing the shortcode in the shortcode GUI:

The nodes can be dragged from left to the right pane. If you only want to show the image and title, drag the image and the title node, and press save. If you want to show the title above the image, just drag and drop the title above the image node.

Clicking on the node will expand it and show it's options. For example, the image node has a method option where the type of image can be selected. By default the images with bfthumbs will be re sized with the timthumb script. This is a very flexible way to output the original images in all kind of sizes determined by the width and height parameters. In the image method select it is possible to wp resized images instead of the timthumb ones. Then the dimensions set in settings - media will be used, but it will still be re sized to fit within the bfthumbs width parameter, that determines the post width.

It is also possible to nest nodes to the bottom of some of the nodes, like the image and meta. For example a caption node can be nested to the image node (expand the image node and drag it to the bottom of the expanded node) to create a custom image caption, where the position can be set by the options of the caption node.

To add meta information to the post, like postdate and categories, the meta node can be used as a style container for the postdate, category, tags, taxonomy, author, editlink and commentlink nodes. Just drag and drop any of these to the bottom of the meta node and arrange their position. A separation marker can be added to the label option of these nodes. The meta node got several style options, like the default 2 lines or just a small text.

[bfthumbs sid="bfthumbs-blogfp" showposts="10" numwords="50" numcols="1" width="528" class="mythumbs" textwidth="365" image_width="150" image_height="130" textposition="right" image_align="left"]

The bfthumbs shortcode above got several special things going on. The layout will be like this:

The image_align="left" parameter makes it possible to align the image within the thumb container. This means that the width is now only for the post container and not the image, therefore image_width="150" image_height="130" parameters are added. A thumb post where image_align="left" is set, the post content (title, text) will wrap around the image, but if adding the textposition="right" parameter the post content will be added in a separate container that will not wrap around the image. For this to work it must have a width and therefore a textwidth="365" parameter is added to the bfthumbs shortcode.

This shortcode will also work with the bfthumbs layout manager, where extra stuff can be added, like more meta information, wp sized images or social sharing buttons. In version 1.5 of the theme the " Add Social Share buttons at the bottom of posts" theme setting was added. This adds 3 social share buttons at the bottom of the post on the blog front page and the single article view. These buttons can also be addded the in the bfthumbs layout manager with the php node, just by calling the socialShareButtons function that outputs them. Drag a php node to the right pane and add this code to it:

<?php socialShareButtons(); ?>

For the the php node to work, the administrator must have the exec_php capability. You can add this with a capability manager to the administrator, or you can add this code in a child theme functions.php:

function bf_add_custom_cap() {
    $role =& get_role( 'administrator' );
    if (!empty($role)) $role->add_cap( 'exec_php' );
}
add_action('admin_init', 'bf_add_custom_cap');

This is an extra security measure, that was taken from the Exec-PHP plugin. And the php code is also stored as encrypted text. Here's more info on the php node.

Since the shortcode got a class="mythumbs" parameter custom css can be added for just this bfthumbs. Example:

.mythumbs .thumb { border-top: 1px solid #ddd; padding-top: 40px; margin-top: 20px; }
.mythumbs .thumb:first-child { border: 0; margin-top: 10px; padding-top: 0; }
.mythumbs .sharebuttons { margin: 20px 0 0; }
.mythumbs .bftl-meta.lines { padding: 0; }

The above css adds a post separation line to the thumb, the sharebuttons are pushed a bit down with a top margin, and the style of the meta information is also modified. This css can be added to style.css of a child theme, or the css field in the theme settings. If using bfthumbs in a shortcode template, the css can also be added to the css field of that template (in the template settings area).

With the shortcode template system bfthumbs can be used to change the blog layout for the frontpage/index, archive, search and single article view. Adding a bfthumbs shortcode in a template and targeting for example the blog will show the same posts, but will replace the post design. Example shortcodes added to a blog frontpage template:

[bfthumbs sid="bfthumbs-blogfp" showposts="10" numwords="50" numcols="1" width="528" class="alignleft mythumbs" textwidth="365" image_width="150" image_height="130" textposition="right" image_align="left"]
[widgetarea sid="widgetarea-blogfp" align="right"]

The bfthumbs is like the one shown earlier, and the widgetarea adds a sidebar. To left align the thumbnail posts an alignleft class is added to the bfthumbs, and to right align the sidebar an align="right" parameter is added.

Any page or template with bfthumbs (or any other shortcode) can be exported and imported at another wordpress installation. So instead of explaining all the steps above, I could just given you this file, and you could just used the wordpress importer to load the template into the template system, but then you would not be able to create templates like this yourself. To import the template file, go to tools - import - wordpress (install the wordpress importer plugin if it's not already there) and select the bfthumbs-blog-frontpage-template.xml file (unzip the the downloaded file) and upload and then choose "assign posts to an existing user: admin" and import. Then the template should be in the templates post list. If another template is already used for the blog frontpage, edit it and deselect blog under the "Where to use this template" section and publish. Then edit the imported template and select blog and publish.

In version 1.5 of the theme, a snippet feature was added. When this is enabled (it is by default) the shortcodes from a page or template can be added as a snippet. Click the "insert a snippet" button below the editor, and in the snippet window press the options tab, then press the "Add current post as a snippet" button. Now the shortcodes (including the bfthumbs layouts) can be quickly reused, by inserting it with the snippet system. When in a page/template/post press the "insert a snippet" button and press the insert button for the snippet to add to the editor (the cursor must be placed in the editor first). These snippets got their own custom post type, where they can be edited or deleted manually, and they can also be exported to be used in another installation.

In version 1.5 the bfloop shortcode was also added, and it is an alternative to bfthumbs. With this shortcode html can be added to the content area to manually create a template. This makes it very flexible, but also not as easy to use as the bfthumbs shortcode. See the changelog for more info on the bfloop shortcode.

bfthumbs demos: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14.

bfthumbs shortcode GUI and Layout video tutorial.

Shortcode template system video tutorial.

Tips and tricks in forum posts

• PageNavi on Single Posts (next and previous post)
• Make videos not to resize
• Add sliders as featured post images to show the attached images
• How to intergrate bbPress
• Show related posts with the bfthumbs shortcode
• Create an author template
• Limit the title length in the bfthumbs shortcode
• How to use the php node in the bfthumbs layout manager
• How to add dynamic headings in the shortcode template system
• Add sorting to the archive and search
• Add scroll to the featured widget/bfthumbs
• Using a custom thumbnail for Facebook Link share/like
• Replacing header picture on a specific page
• Adding a gradient image in front of bfthumbs image
• Opening links in a new tab (Portfolio page)
• How to add an author box and related posts at the bottom of articles
• Prevent wordpress to automatically add paragraphs to a page
• Horizontal submenu child theme
• Post Thumbnails hover effect
• Caching timthumb images with a CDN (Amazon Cloudfront)
• Show the WP Post Thumbnail if the feature/default image is not wide as the content
• Show older posts on the homepage as thumbnail...can I modify # before thumbs?
• Adding decoration to Widgets/Side Bar
• Combine 2 separate navigations from 2 different sources
• Add a bfnav footer on standard bigfeature theme (the bftopnav child theme has this as an option)
• Custom styling for the breadcrumbs
• Add javascript from a child theme
• Create a custom rss feed function for adding non timthumb images and videos
• Add a search field to the navigation bar
• Create a custom header
• Add scripts to the header with a function in a child theme
• Dynamic post title size
• Add scripts/styles located in the child theme folder
• Remove the navigation on some pages
• Dynamic related posts with bfthumbs based on the post categories (in v1.5+ a dynamic="categories" paramater can be added instead. dynamic="tags" for tags)
• Add social links to the main navigation
• Add a widgetarea to every post below the navigation
• Custom background color to box shortcode
• Add background color to the sidebar
• Adding post titles with custom fields
• Center the logo and sitename
• Make the header fixed to the top (the bftopnav also does this)
• Move the Site tagline under the website name
• Flexible Columns in the Footer Links Section
• Create custom color classes to use in shortcodes and templates
• How to make boxes (box shortcode) sit side by side
• Remove the feature/default image from single post pages
• Custom image caption/overlay for the bfthumbs shortcode
• Centering post meta and article title
• Customize the Read More link
• Remove auto paragraphs added by Wordpress for a page
• Make a box/container 100% screen width, even though it's inside the page container
• Replace the widget title with an image
• Add the post title inside the bfthumbs image
• Add an image to the sidebar
• How to change default search to Google CSE
• Change the name of a category/page in the navigation
• Use the shortcode template system to show/hide widgets
• Replace the sidebar widget title with an image

Custom Single Post Template

Here are 4 methods to use custom single post templates.

Method 1:
Use the custom single functionality to set a single template per category.

Method 2:
Use the template feature to set the template per category/tag/taxonomy/post type.
1. Enable the "Custom Templates Feature" in the theme settings.
2. Create a template in the template custom post that appared after enabling the feature.
3. Add an include shortcode in the template, like this:
[bfinclude sid="bfinclude-nosidebar" filename="single-nosidebar.php"]
4. Target the template for single in combination with a category/tag/taxonomy/post type.

Method 3:
This is a Wordpress functionality. To assign a single post template for a custom post type. If the post type is called video, copy one of the existing single templates and rename it to single-video.php

Method 4:
Use the custom post template plugin to set templates per posts.

4 methods to create post pages like the blog index/frontpage

1. Use the blog posts page template and specify a custom field category (category slug or id as value) to only show posts from a category. Then add a slider or whatever content at the top by inserting it into the post editor of that page. Check the "Disable the feature image on the frontpage" theme setting to to hide the feature image at the top. Btw, the feature image is best added with the set featured image functionality at the right column and instead of using the custom field method (external images can be added with the custom field method though). And videos can be added to the video field (iframe embed is recommended for html5 compability).

2. Or use the bfthumbs shortcode to add posts to pages (default or no sidebar template). By using the showposts parameter will define how many posts should be shown per page and by installing the wp-pagenavi or wp page numbers plugins there will be page navigation at the bottom (also set ajaxnav to false for normal page navigation). Here are some examples of post designs with this shortcode. I also recommend to see these video tutorials. Here's an example shortcode:

[bfthumbs sid="bfthumbs-blogposts" showposts="9" numcols="1" width="528" image_width="250" image_height="200" image_align="left" ajaxnav="false"]

The ajaxnav="false" makes the page navigation work like the normal blog page navigation. The sid parameter makes it possible to edit the shortcode width the shortcode GUI, and also use the bfthumbs layout manager for bfthumbs for more advanced layouts/designs. Example.

Open the shortcode gui (below the page editor):

Open the bfthumbs layout manager (select the shortcode in the "current post shortcodes" list):

Here's how to edit the layout of a bfthumbs shortcode. Integrated plugins, html/php, post meta information etc. can be added.

3. or add a category/tag/taxonomy to the navigation (use custom taxonomies with custom post types). Then the shortcode template system can be used to change the design/layout. The bfct01-03 child themes comes with several templates that can imported (import the bfct01.templates.xml and target where to use it) and applied to any blog/archive post listing.

Example of several shortcode templates. It is shown in in the target field if it enabled and where it is used. One template can be used in many areas at the same time. The template can be enabled for the blog, archive and also the search, or just a custom post type. The only thing necessary to make a template is to add a shortcode like listed in step 3, and it can be further modified with the bfthumbs shortcode layout. Custom sidebars can be added with the widgetarea shortcode or the main sidebar can be included by checking the template setting for it.

4. or create a new php page template by copying the blogposts.php file and rename it in the header, and modify whatever.

Bfthumbs post layout using offset

The offset parameter in bfthumbs makes it possible to build quite complex post layout designs. It skips the number of posts of it's value. What posts it skips depends on the orderby and order parameters, and that is by default date and desc (newest posts first). That means an offset of 1 skips the first post. In version 1.4.2 the onlynav="true" parameter was also added to make it possible to use paging with such a layout. It only shows the paging plugin and no posts for the first page, but the posts is shown for the next pages.

Here's the code that can be added to a page or a shortcode template:

<div class="fponly">
[bfthumbs sid="bfthumbs-ol1" numposts="1" numcols="1" width="528" height="200" caption="overlay" text="false" title="false" onlyfirstpage="true"]
[bfthumbs sid="bfthumbs-ol2" numposts="2" numcols="2" width="244" height="120" offset="1" onlyfirstpage="true"]

[bfthumbs sid="bfthumbs-ol-pages" showposts="6" ajaxnav="false" onlynav="true" sidebar="true"]

The fponly class and onlyfirstpage="true" parameter hides the offset layout for the next pages, so it's only the first page that will have this look. The last bfthumbs only shows the navigation on the first page and also determines the post layout design for the next pages. The showposts parameter must be the number of posts shown on the frontpage for the paging plugin to be correct.

Offset layouts for other pages

In version 1.4.2.1 offsetnav and offsetposts parameters was added to bfthumbs, so that offset layouts can be paged. In the above example only the first page will have that post layout, but with the code below all pages will have the same design. An offsetnav parameter is used for the navigation (instead of the onlynav in the above example) and an offsetposts parameter must be added to all the shortcodes showing posts (this is the number of posts shown per page). Pagination classes was also added to be able to show stuff at specific pages (spage1, spage2 etc.).

[bfthumbs sid="bfthumbs-ol1" numposts="1" offsetposts="6" numcols="1" width="528" height="200" caption="overlay" text="false" title="false"]

[bfthumbs sid="bfthumbs-ol2" numposts="2" offsetposts="6" numcols="2" width="244" height="120" offset="1" class="alignleft"]

<!-- AD image only shown on page 2 (spage2 class) -->
<a href="#" class="spage2"><img src="adimage.jpg" alt="" title="bliss" /></a>

[bfthumbs sid="bfthumbs-ol3" numposts="3" offsetposts="6" numwords="10" numcols="3" width="149" height="80" offset="3"]

[bfthumbs sid="bfthumbs-ol-pages" showposts="6" ajaxnav="false" offsetnav="true" sidebar="true"]

Center align the main navigation

Add these styles to style.css of a child theme or to the the css field in the theme settings:
#header ul.navigation { text-align: center; }
#header ul.navigation ul { text-align: left; }
#header ul.navigation > li, #header ul.navigation > li > a { display: inline-block; float: none; }

Here's another method using a table and a custom navigation function:

Add this code to functions.php of a child theme:

add_action( 'bf_header', 'custom_navigation', 11 );
function custom_navigation() { ?>
    <div class="clear"></div>
    <div class="navbg"><table><tr><td>
      <?php bf_navigation(); ?>
    </td></tr></table></div>
<?php
}

add_action( 'wp_head', 'remove_navigation', 1 );
function remove_navigation() { remove_action( 'bf_header', 'bf_navigation' ); }

and add these styles to style.css of the child theme:

ul.navigation { width:auto; margin:0; border:0;}
.navbg table { display: inline-table; margin:0; }
.navbg { text-align:center; margin: 20px 0; }

A background or separating lines can be to the navbg class like this:
.navbg { background-color:#666; }
.navbg { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }

If using a child theme with a customHeader function, the main navigation is added manually in that function, so then the php code inside the custom_navigation above must replace that bf_navigation call.

Custom postdate

Here's the code (add to functions.php in a child theme. f.ex. bfBlank):

function custom_postdate() { ?>
  <div class="datebox">
    <span class="dateday"><?php the_time('d'); ?></span>
    <span class="datemonth"><?php the_time('M'); ?></span>
  </div>
<?php
}
add_action( 'bf_before_post_content', 'custom_postdate', 1 );

and here's the style (add to style.css of the child theme):

#content { overflow: visible; position: relative;}
.datebox {
    background-color: #550000;
    color: #FFFFFF;
    display: block;
    float: left;
    left: -103px;
    margin-top: -50px;
    padding: 4px 0;
    position: absolute;
    text-align: center;
    width: 53px;
}
.dateday { font-size: 28px; line-height: 1em;}
.datemonth { font-size: 14px; line-height: 20px; text-transform: uppercase; }

Image placeholder for bfthumbs

add this code to functions.php (of a child theme) to add a placeholder for bfthumbs posts (a default image when there's no thumb image):

function bf_thumb_placeholder() {
$placeholder = 'http://domain.com/default-thumb.jpg'; ?>
<script>
jQuery(function($){
  $('.thumb.bfthumbs:not(:has(img))').each(function(){
    $(this).prepend('<img width="'+($(this).width())+'" src="<?php echo $placeholder; ?>" />');
  });
});
</script>
<?php
}
add_action( 'wp_head', 'bf_thumb_placeholder' );

Change the $placeholder url to the thumb placeholder url.

To only apply it some bfthumbs shortcodes, add a class paramater like this (in the shortcode): class="phthumb", and in the code above, change ".thumb" to ".phthumb .thumb".

-------

Here's another solution, using the bfthumbs_content filter:

function bfthumbs_placeholder($thumbPost, $atts) {
    if ($atts['pholder']) $placeholder = $atts['pholder'];
    else $placeholder = 'http://domain.com/default-thumb.jpg';
    if (!($width = $atts['width'])) $width = '255';
    $placeholder = '<img src="'.$placeholder.'" width="'.$width.'" />';
    $image = false;
    if (is_array($thumbPost[0])) {
    	foreach ($thumbPost as $items) if ($items['image']) $image = true;
	if (!$image) array_unshift($thumbPost, array('image' => $placeholder));

    } else if (!$thumbPost['image']) $thumbPost['image'] = $placeholder;

    return $thumbPost;
}
add_filter('bfthumbs_content', 'bfthumbs_placeholder', 10, 2);

This will only work for bfthumbs, but the jQuery one can be modified to work with the blog thumbs, portfolio template, featured widget etc. The advantage using the filter one is that a pholder parameter can be added to the bfthumbs shortcode with a placeholder image url (can have different placeholder per shortcode).

Child themes do's and dont's

1. Do not change the header in style.css of the child theme, unless you know what you are doing.

2. The parent theme must be installed correctly. It must be in a folder bigfeature under the themes folder. Some install the downloaded zip file and then the bigfeature folder will be in a subfolder, and then child themes will not work. And this will also cause many other problems too.

3. Do not import style.css of the parent theme like done in other child themes. The importing is handled in functions.php. This improves the performance, and sets the right order of importing.

4. Do not copy all css from style.css of the parent theme into the child theme style.css. This will override all the theme setting styles and cause all kinds of problems. Only copy in those styles that should be overriden.

5. Do not copy header.php into the child theme, unless you know what you are doing. Changing this template will mess up the theme.

6. Do not remove any hooks, like wp_head or wp_footer since they must be there for the theme and plugins to work.

7. When copying templates into the child themes for modification, do not remove the importing of the header or footer, since these are essential for the theme to work.

8. If creating templates to be used with the import shortcode in the shortcode template system the header and footer can be removed and the whole div structure can be in the template. The "Remove the header & footer html" setting must then be enabled.

9. If using the yarpp plugin with child themes the yarpp-template-bf.php template (from the bigfeature folder) must be copied into the child theme folder.

10. Functions added to functions.php of the child theme must have unique names. Many have copied code and gotten errors, then it's most likely a naming conflict with an existing function (in the child theme, parent theme, wordpress or plugins).

Targeting the BF Page widget

In version 1.4.1.1 the BF Page widget was modified to use the shortcode template system. This means that the content added in the template outputted by the BF Page widget will only show where it's targeted. Here's how:

1. Enable the "Enable Custom Templates Feature" theme setting.
2. Create a new post in the Templates custom post.
3. Add the content to be outputted by the BF Page plugin into the editor.
4. Select the targeting under the editor (single, blog, page etc.) and the "BF Page widget template" checkbox, and then publish the post.
5. Drag the BF Page widget to a widget area and select the template created in step 2-4.

Now the widget will only show where it's targeted (set in the template). And it's also possible to add a widgetarea shortcode to the template, this means you can combine sidebars. In other words, you can create a custom sidebar in the theme setting (1.4.1 functionality) and add widgets to this sidebar, and add it to the main sidebar with the BF Page widget, and then use the targeting to determine where it should display.

Shortcode Template System

Here's a short tutorial (to clarify some stuff that was not shown in the video):

1. Enable the "Enable Custom Templates Feature" theme setting.

2. Create a new post in the Templates custom post.

3. Add a bfthumbs to the editor (in html mode), like this:
[bfthumbs sid="bfthumbs-loop" showposts="10" width="153" height="120" numcols="5" marginright="20" numwords="10" ajaxnav="false"]

4. Select the targeting under the editor (blog, search etc.) and publish the post.

The shortcode above is a 5 column bfthumbs layout. The numcols="5" sets the number of columns, and the showposts="10" sets the number of posts shown on every page (must install wp-pagenavi or "wp page numbers" plugin for page navigation). The ajaxnav="false" parameter makes it so that it's normal page navigation (the page reloads).

The clue here is that there's no post fetching parameters in the bfthumbs shortcode (category, tag, tax etc.), so that it will show the post relevant for where it's targetted. For example, if the blog is the target then it will replace the normal blog design, but show the same posts, just with a custom design (same for the archive and search).

This makes it possible to have custom designs per category/taxonomy/custompost etc. For example a portfolio can be created with categories, and every category/taxonomy can have a different design. And there's more shortcodes for this template system, for example one for sidebars (widgetarea) and one for outputting hook content (bfhook), and also one for including php templates (bfinclude) added to a child theme (use the shortcode GUI to see the possible parameters and a description of each one).

One of the possibilities with this is also to include external php templates and target those. Just add an include shortcode with the name of a custom single.php template and it can be targeted with this system (enable the "Don't include header & footer files" setting below the targeting if the template imports the header and footer). This means that the custom single functionality is not necessary anymore since this is way more flexible, since it can target just about everything (custom post type, taxonomy type, taxonomy term, category, tag).

Another feature is to remove the header and footer html for just this template. This makes it possible to have a custom div structure (100% width designs etc.) for just the portfolio, while the blog is using the normal layout. Many possibilities with this system, and I'm exploring those with some new child themes coming soon.

The shortcodes from the "custom blog frontpage" and "featured thumbnails with bfthumbs" tutorials above can used in these templates. It uses 2 parameters that is important to learn, offset and onlyfirstpage. The offset parameter makes it possible to use many bfthumbs and continue the flow of posts. For example offset="1" makes the shortcode skip the first post and together with numposts or showposts (pages) the design can have many bfthumbs making up the post design. The onlyfirstpage parameter makes the bfthumbs only show up on the first page, but not on other pages when using ajaxnav="false" for normal pagination.

Also read the changelog for version 1.4.1, since it got a lot of information about this system there. And also read this for more information and also some shortcode examples.

Custom related posts design

In the latest version of the theme (1.4.1.1) it is possible to use the bfthumbs shortcode with the yarpp plugin. Then you can have any design (number of columns, width etc.) of the related posts thumbs. Here's how:

1. Enable the "Enable Custom Templates Feature" theme setting.

2. In Templates (a custom post that will appear. see this video for more info.) create a new post and call it "yarpp template".
Insert this code into the editor (in html mode):
<h5>Related Posts</h5>
[bfthumbs sid="bfthumbs-yarpp" numposts="6" numcols="3" width="200"]

3. Add this code to the child theme functions.php (use the bf_after_article hook to add above the comments):

add_action( 'bf_after_comments', 'custom_related_posts' );
function custom_related_posts() {
 echo do_shortcode('[bfyarpp template="yarpp template"]');
}

4. Deactivate the related posts setting in the theme settings.

Now the look of the related posts can modified with bfthumbs in the yarpp template.

custom blog frontpage

bfthumbs has many different uses, like the featured thumbs above, but it can also be used to create a blog frontpage. The thumbs in the code below use an offset parameter to continue from the first post. That way a whole page can be designed with a magazine style look, adding ads in between and whatnot. There's no category or tag added so then all new posts are fetched. The older posts link can be to the second page of the blog or maybe the archive (replace the hash sign with the url). Add the code to a page using the default template (disable the "Use the name as heading in pages (default template)" theme setting).

[bfthumbs numposts="1" numcols="1" width="528" height="250" caption="overlay" text="false" title="false"]

[bfthumbs numposts="6" numcols="3" offset="2" marginright="15" width="152" numwords="10" class="thumbframe1"]

<a href="#">« Older Posts</a>

Update:

In version 1.4.0.4 some new features was added to make this even better. Now it works with normal page navigation (need one of the page navigation plugins listed here), and also stuff can be shown only on the first page (this is useful for the first feature post). This way bfthumbs can be used instead of the blog or any page template. So the new code will then be:

[bfthumbs numposts="1" numcols="1" width="528" height="250" caption="overlay" text="false" title="false" onlyfirstpage="true"]

[bfthumbs showposts="6" numcols="3" offset="2" marginright="15" width="152" numwords="10" class="thumbframe1" ajaxnav="false"]

The onlyfirstpage parameter is only implemented in bfthumbs, but here is how to do it with other shortcodes and content:

1. Add this css to style.css:
body.paged .fponly { display:none; }

2. add this class to the shortcode, like this:
[bfslider class="fponly"]

or to a wrapping div, like this:
<div class="fponly">[bfslider] everything inside this div will only show on the first page.</div>

featured thumbnails with bfthumbs

Here's how to create a feature thumbs area (like on Engadget) with bfthumbs.

1. Add this code to a page (it can be a frontpage with no sidebar, or a page added to a widget area with the BF Page widget):
[bfthumbs category="feature" numposts="1" width="500" height="170" marginright="2" marginbottom="2" caption="overlay" text="false" title="false" class="alignleft featuredthumbs"]

[bfthumbs category="feature" numposts="1" numcols="1" offset="2" width="345" height="170" marginbottom="2" caption="overlay" text="false" title="false" class="featuredthumbs"]

[bfthumbs category="feature" numposts="3" numcols="3" offset="3" width="281" height="120" marginright="2" caption="overlay" text="false" title="false" class="featuredthumbs"]

2. Add this css to bottom style.css to remove some margins (preferably in a child theme)
.featuredthumbs .post.thumb .thumbcontent { margin:0; }
.featuredthumbs .post.thumb { margin-top:0; }

Custom captions (independent of the post title) can be added with a custom field called thumbcaption.

sidebar tabs for widgets

There are several plugins that makes it possible to add widgets to tabs in the sidebar. After testing some of them I found one that I like, the sidebarTabs plugin. It supports multiple instances, and got lots of options. Here's how I set it up:

1. See the screenshots here how to add widgets to it.

2. Change the looks of the tabs by editing the SidebarTabs options. Here's a screenshot of the one I choose for the look in the image above.

3. To get the same look as in the picture add the css below to style.css (preferably in a child theme):
#sidebar .sidebarTabs_panes ul li { display: block; float: none; width: 100%; }
#sidebar .sidebarTabs_panes .tb, #sidebar .sb_accordion div.pane { padding: 8px 0 8px 1px; }
#sidebar .sidebarTabs a { margin-right: 6px !important; }

make the post image smaller

The best way to make add smaller preview images for the blog posts is to insert the image into the post, with the size selected and left align it, and then add the <!--more--> tag after the image and the preview text. Then a readmore link will be added at that tags location. Here are some screenshots illustrating what I'm talking about: 1, 2, 3, 4. You can still have bfthumbs (and slider) images by adding the image url to the "Thumbnail image URL" input field below the editor.

If you rather want to make the default image smaller (the one set as featured), you can do it with css, like this:

1. Enable the "Move the default post image below the title" theme setting.

2. Enable the "Disable the feature image on the frontpage" theme setting if you don't want the first image on the blog frontpage to be feature size (container width).

3. Add this css to the bottom style.css (preferably in a child theme)
.post .postimage.normal { float:left; margin: 0 20px 10px 0; }
.post .postimage.normal img { width: 200px; height: auto; }

The image must still be the content width to be shown, but css will resize it to the pixel width set in the css above. Increase the "Limit frontpage text" theme setting to show more preview text or use a <!--more--> tag in the post to set exactly what to show as preview text (adding text to the excerpt field also works). If you only want this on the frontpage of the blog change the .post selector to .post.frontpage.

Another way to make the blog frontpage images smaller is to enable the "Show older posts on the blog frontpage as thumbnail posts" settings, then posts and images will be shown in thumbnail size.

You can also design a page with the bfthumbs shortcode to be the blog frontpage like shown here.

add a divider between the bfthumbs posts

1. add a class parameter to the bfthumbs shortcode, like this:
class="mythumbs"

2. reduce the width of the thumb posts (in the bfthumbs shortcode) to make place for the separator (and padding) by adding a width parameter:
width="241"

3. add the separator with css (add it to style.css (preferably in a child theme)):
.mythumbs .post.thumb { border-right: 1px solid #ddd; padding-right: 20px; }
.mythumbs .post.thumb.last-thumb { border-right: none; padding-right: 0; }

add a vertical navigation to the sidebar

1. Create a new navigation, call it sidebarnav.

2. Create a page and add this shortcode:
[bfnav name="sidebarnav" style="verticalnav"]

3. Add this css to the bottom of style.css (preferably in a child theme):
ul.navigation.verticalnav { width: 100%; }
ul.navigation.verticalnav li { float: none; padding: 0; }
ul.navigation.verticalnav li a { color:#333 !important; padding: 5px 0; }
#sidebar { overflow: visible; }
#sidebar ul.navigation li li { border-right: 1px solid #ddd; border-top: none; margin: 0; }

4. Add the page to the sidebar with the BF Page widget.

modifying the bfthumbs output

The bfthumbs output can be changed with the bfthumbs_content filter. Here is an example how the post meta information (meta="true" must be set for it to show) can be changed (add it to functions.php of a child theme):

function bfthumbs_meta($thumbpost) {
  global $post;
  foreach(get_the_category($post->ID) as $category)
    $categories[] = '<a href="'.get_category_link( $category->cat_ID ).'">'.$category->name.'</a>';
  $thumbpost['meta'] = '<div class="meta">'.implode(', ', $categories).'</div>';
  return $thumbpost;
}
add_filter('bfthumbs_content', 'bfthumbs_meta');

Add the code to functions.php of a child theme. All elements of the thumbnail post can be changed this way, the thumblink, the length of the text or even the image shown. Do a vardump on the $thumbpost array passed to the filter to see what can be changed, like this: var_dump($thumbpost);

Here's an example how to remove the comment link from the meta:

function bfthumbs_meta($thumbpost) {
  global $post, $bf_date_format;
  $thumbpost['meta'] = '<div class="meta">'. get_the_time($bf_date_format) . '</div>';
  return $thumbpost;
}
add_filter('bfthumbs_content', 'bfthumbs_meta');

Here's an example how to add a comments link at the bottom (only on the home page):

function bfthumbs_custom($thumbpost) {
  global $post;
  if (is_home()) {
	  $comments = '<div class="meta"><a href="'. get_comments_link($post->ID)
	  	     .'">Comments ('.get_comments_number($post->ID) .')</a></div>';
	  $thumbpost['text'] = $thumbpost['text'] . $comments;
  }
  return $thumbpost;
}
add_filter('bfthumbs_content', 'bfthumbs_custom');

You can also pass custom parameters. Example:

[bfthumbs numposts="2" numcols="1" text="false" hideimage="true" topdate="true"]

function bfthumbs_custom($thumbpost, $atts) {
  global $post, $bf_short_date_format;
  if ($atts['topdate'] == 'true') {
	  $date = '<div class="thumbdate">'. get_the_time($bf_short_date_format, $post->ID) . '</div>';
	  $thumbpost['title'] = $date . $thumbpost['title'];
  }
  return $thumbpost;
}
add_filter('bfthumbs_content', 'bfthumbs_custom', 10, 2);

The topdate is a custom parameter that is passed to the filter function. This way you can create all kind of designs based on custom parameters.

custom header

I have gotten several questions about how to customize the header. This can be done in the theme setting by adding/removing features and adding stuff to the header widget areas. For example you can add a header image to the top of the header by creating a page (with an image/ad or something) and adding it to the "Adspace - top of the page" or the "Adspace - Header" widget area with the BF Page widget (it's also possible to add a header image with the logo uploader).

However, if you want to do bigger changes creating a function in a child theme is the best approach. Here's a child theme I created as an example how to create a custom header function to replace the built in one. It left aligns all navigation styles (normally the 3 last navigation styles are right aligned) and also includes the search box for all styles.

The advantage with this function is that you can add stuff like images or plugin calls, or even an extra navigation.

create a custom navigation style

I recommend to check the bfnav child theme, 3 navigations are used there, 2 of them got custom styles (check the functions.php how to call the navigation and set the style).

a short tutorial:
1. use a child theme (topArt maybe, since it's a blank canvas).
2. remove the normal navigation hook (in functions.php) like this:

add_action( 'wp_head', 'remove_actions' );
function remove_actions() {
  remove_action( 'bf_header', 'bf_navigation' );
}

3. create a new navigation function like this:

add_action( 'bf_header', 'my_navigation' );
function my_navigation() {
  bf_navigation("","mynavigation");
}

4. style the navigation like this (use firebug to find what to change):
ul.navigation.mynavigation { margin-top: 0; }
ul.navigation.mynavigation li.current_page_item a { background-color: #333; }


Firebug is you best friend doing such work. here's info how to create more navigations.

zoomcrop

In version 1.3.5 a dropdown list was added to the theme setting for choosing how the images in thumbnail posts should be cropped. Topleft is the default, and then the bottom and right will be cropped away to fit the thumbnail container. With center the sides are cropped away, and with "no cropping" chosen the image will be sized exactly like the container (this can squash the image).

The default height of thumbnails is set with the "Thumb post image height" theme setting, but this can be overridden with a parameter in the bfthumbs shortcode. The width is calculated from the content width, but this can also be overridden with a parameter in bfthumbs and a "Thumb Width" (and "Thumb Width 2" for the thumbnails page template) theme setting for non bfthumbs thumbnail posts.

Sidebars on the left side

In version 1.3.5 there is a setting to move sidebar2 to the left side of the content, but here's a tip if you want both sidebars to the left side (deactivate the setting mentioned first).

Add this css to the bottom of style.css:
body #content { float: right; margin-left: 50px; margin-right: 0; }

Add useful classes to the editor

Install the TinyMCE Advanced plugin. In the settings of the plugin drag styles to the top toolbar, and the editor will have a list of useful classes that can be added to containers etc.

Default/featured post image

There are 5 ways to add a default post image (the image above the title).

1. Use the built in "Set featured image" functionality (this works from version 1.3.5.1). Press the Set featured image link in the right sidebar when editing a post/page and set the post image this way (it's not only for feature images, but also for thumb and content width images).

2. Add an image url to the "Image URL" field below the editor. This can be an uploaded file, or an external one (another domain name. external images doesn't get re sized with timthumb, so they can become distorted.)

3. Set it as default in the uploader (in the gallery tab). Works only for images uploaded for the current post.

4. Add an image url to the "Thumbnail image URL" field below the editor. This image will only be used for thumbnail posts (from version 1.3.5.1 it will override video thumb images).

5. Enable the "Use First Attached Image as default" theme setting, then the first image uploaded for a post will be used as default/featured/thumb.

This image will be automatically re sized with timthumb to feature/content/thumb width sizes. The image must be atleast the container width (this can be set in the theme settings) to be used as a feature image that spans the over the sidebar. If it's not wide enough it will be re sized to content width, and if it's not the width of the content area it will be used only for thumbnail posts. Here are some templates where smaller images also will show (unzip and upload them to the bigfeature folder or a child theme folder).

If the default post image does not show up, it’s probably a timthumb problem, check the troubleshooting at the bottom of this article.

A default image is an image tied to the post, but not inserted into the editor. The default image can be used in all page templates and some shortcodes like bfthumbs and the sliders.

Take for example the portfolio page template, images will automatically be shown with the right layout and size. The default images resize depending on where they are displayed, this doesn't happen for images inserted into the post.

This resizing is especially important when it comes to thumbnail posts (bfthumbs, thumbnail page template, and frontage of the blog (also archive and search), featured widget and related posts) since they can be sized in very many sizes to fit different designs.

The "Set featured image" functionality is just one of the ways of adding a default post image, but there is a featured size image in the blog and single view pages. The featured size image is a container width that spans over the sidebar. The first post on the blog frontpage can be a featured sized image, and also all default images on the single post view page. The image must be at least the container width (page width. 848px by default) to be shown like that, if the width is below that it will be shown in the content area above the title (it can be set in the theme seeings to be below the title too). If the image width is below the content width (528px by default) it will be only used for thumbnail posts.

If you want a different look to the blog frontpage, it can be designed with the bfthumbs shortcode like this.

If you want to use the regular blog templates, but with smaller images, use these templates that allows smaller images to be shown (unzip and upload the files to the bigfeature folder or a child theme folder).

You can also insert the post preview image into the post instead of using default images. For it to be dispayed on the blog frontpage use this technique. If you still want to use thumbnail posts (bfthumbs, slider etc.) you can add the image url to the "Thumbnail image URL" input field below the editor.

Firebug

I recommend using Firebug for any customizations, you are blind without it. You can make changes to the website to test stuff without editing any files.

Add a class parameter to bfthumbs

Add it like this: [bfthumbs class="mythumbstyle"], and style stuff like this:

to change the heading:
.bfthumbs.mythumbstyle a.thumb-link { font-size: 24px; }

To change the thumb image (set the width parameter if you use this code):
.bfthumbs.mythumbstyle .postimage { padding: 4px; border: 1px solid #ddd; }

Add comments to pages

add this code to a page template (f.ex. page.php (the default page template)) to add comments (just before the endwhile):
<?php comments_template(); ?>

Speed up the website

1. Enable the "Cache the settings stylesheet" theme setting. I recommend everyone to do this (I have added this as a step in the setup documentation that comes with the theme). This will write the theme settings styles to optionstyles.css in library/css (if this doesn't work, make the css folder writable).

2. Use a cache plugin. This will speed up the website very much, but the drawback is that some dynamic stats plugins (like popularity posts) will not work, and that the cache must be flushed if changes is made to the website (not necessary if just adding/updating posts). These have been tested with the theme: WP Super Cache, Hyper Cache and W3 Total Cache. Hyper Cache is the simplest one to use, since it requires no configuration, and made to work with slow shared server hosting. W3 Total Cache is by far the most advanced one, and the best one for those that know what they are doing. It's good for caching stuff at a CDN network (see step 5 below for more info). WP Super Cache is the most popular one.

3. Use correct sized images to avoid resizing. If you are using feature images for the posts, adding images with the same width as the container (can be set in the theme settings) will make it to skip timthumb resizing (same for content width default images). Adding correct sized thumbnail images to the "Thumbnail image URL" below the post/page editor will also make the theme to skip timthumb for thumbnail posts. A custom thumbnail can also be added to override video thumbs images (from 1.3.5.1).

4. Avoid using too many plugins, and turn off unnecessary script loading in the plugin settings. For example the Shadowbox JS plugin loads by default many scripts (players) that you might not need, and in the settings you can change this (the bfthumbs functionality only needs the html and img players).

5. Cache images on a CDN network. Use this method (last post) to cache the timthumb images.

Convert the website to RTL (right to left):

add this to the header.php (below the bf_head line):
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/library/css/rtl.css" type="text/css" media="screen" />

or in a child theme you can add this to functions.php:
function bf_rtlcss() { ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/library/css/rtl.css" type="text/css" media="screen" />
<?php }
add_action( 'wp_head', 'bf_rtlcss' );