Here I will post tips and tricks. Contributions are welcome (do not post questions here though, make a separate topic for that).
[sticky]
Tips and Tricks
(24 posts) (1 voice)-
vfxdude
adminConvert 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' );
Posted 1 year ago # -
vfxdude
adminSpeed 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.
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).
Posted 1 year ago # -
vfxdude
adminAdd 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; }Posted 1 year ago # -
vfxdude
adminDefault post image
There are 4 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).
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.
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.
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.
Posted 1 year ago # -
vfxdude
adminAdd 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.
Posted 1 year ago # -
vfxdude
adminSidebars 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; }Posted 1 year ago # -
vfxdude
adminzoomcrop
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.
Posted 1 year ago # -
vfxdude
admincreate 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.
Posted 1 year ago # -
vfxdude
admincustom 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.
Posted 1 year ago # -
vfxdude
adminmodifying 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.
Posted 1 year ago # -
vfxdude
adminadd 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.
Posted 1 year ago # -
vfxdude
adminadd 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; }Posted 1 year ago # -
vfxdude
adminmake 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
.postselector 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.
Posted 1 year ago # -
vfxdude
adminsidebar 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; }Posted 1 year ago # -
vfxdude
adminfeatured 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.
Posted 1 year ago # -
vfxdude
admincustom 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>Posted 1 year ago # -
vfxdude
adminCustom 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.
Posted 3 months ago # -
vfxdude
adminShortcode 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.
Posted 3 months ago # -
vfxdude
adminTargeting 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.
Posted 3 months ago # -
vfxdude
adminChild 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).
Posted 2 months ago # -
vfxdude
adminImage 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).
Posted 2 weeks ago #
Reply
You must log in to post.