Tips and Tricks « Vfxdude

Vfxdude » BigFeature

[sticky] [closed]

Tips and Tricks

(31 posts) (1 voice)

Started 3 years ago by vfxdude
Latest reply from vfxdude

Tags:

12 Next »

vfxdude
admin

Here I will post tips and tricks.

Posted 3 years ago #
vfxdude
admin

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' );

Posted 3 years ago #
vfxdude
admin

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.

Posted 3 years ago #
vfxdude
admin

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(); ?>

Posted 3 years ago #
vfxdude
admin

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; }

Posted 3 years ago #
vfxdude
admin

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.

Posted 3 years ago #
vfxdude
admin

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.

Posted 3 years ago #
vfxdude
admin

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.

Posted 3 years ago #
vfxdude
admin

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; }

Posted 3 years ago #
vfxdude
admin

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.

Posted 3 years ago #
vfxdude
admin
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.
Posted 2 years ago #
vfxdude
admin

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.

Posted 2 years ago #

vfxdude
admin

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.

Posted 2 years ago #

vfxdude
admin

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.

Posted 2 years ago #
vfxdude
admin

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; }

Posted 2 years ago #
vfxdude
admin

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  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  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.

Posted 2 years ago #
vfxdude
admin

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; }

Posted 2 years ago #
vfxdude
admin

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.

Posted 2 years ago #
vfxdude
admin

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>

Posted 2 years ago #
vfxdude
admin
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.
Posted 1 year ago #
vfxdude
admin

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.

Posted 1 year ago #
vfxdude
admin

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.

Posted 1 year ago #
vfxdude
admin

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).

Posted 1 year ago #

vfxdude
admin

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).

Posted 1 year ago #

vfxdude
admin

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; }

Posted 1 year ago #

vfxdude
admin
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.
Posted 1 year ago #
vfxdude
admin
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-ol3" numposts="3" numwords="10" numcols="3" width="149" height="80" offset="3" onlyfirstpage="true"] </div>
[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"]
```

<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"]
Posted 1 year ago #
vfxdude
admin

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.

Posted 1 year ago #
vfxdude
admin

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.

Posted 8 months ago #
vfxdude
admin
Tips and tricks in forum posts
Posted 2 months ago #

RSS feed for this topic

12 Next »

Topic Closed

This topic has been closed to new replies.