Custom Display CataBlog Items In Suffusion Theme

Custom Display CataBlog Items In Suffusion Theme tutorial will show you how to customize the display of your items in Suffusion Theme or child theme.

Last Updated: January 23, 2018

Latest News: I have removed the menu and made some changes to the document.

Hint: Remember to always work with a child theme if you are going to add custom code.

In this post you will learn how to remove the sidebars from the front of your website and add some customization to your CataBlog items in Suffusion theme.

Custom Display CataBlog Items In Suffusion Theme

Step 1 ) First you need to read the previous tutorial Integrate CataBlog into your theme tutorial. This will help you understand how to copy and paste the content.

Step 2 ) Suffusion comes with many different templates. In this example you will be copying and pasting the content from no-sidebar.php template file into the single-catablog-items.php file and taxonomy-catablog-terms.php file.

Note: You can choose any template you want as long as the end result is what you want.

Step 3 ) If you are using a different template than the one mentioned above, then add the following filter to remove the right sidebar. Add this filter above the following code <?php get_footer(); ?>.

<?php

add_filter(‘suffusion_can_display_right_sidebars’, ‘kill_right_sidebars’); ?>

Step 3-a ) If you are using a template with a left sidebar then add the following filter to remove the right sidebar. Add this filer above the following code <?php get_footer(); ?>.

<?php

add_filter(‘suffusion_can_display_left_sidebars’, ‘kill_left_sidebars’); ?>

Step 4 ) It is also important to make sure CataBlog items occupy the whole width. You can achieve this by adding the following CSS custom style code style=”width: 1000px;” to <div id=”single-col”>. This will increase the content width to a full size page or post.

Note: If you want to achieve a responsive layout then change the 1000px to 100%.

Example Code:

<div id=”single-col” style=”width: 1000px;”>

or

<div id=”single-col” style=”width: 100%;”>

After you complete the above, your CataBlog items will display using the full width without any sidebars.

I hope you enjoyed this little tutorial.

Click on the following URL Different Size Thumbnail Images to continue.

Enjoy.

CataBlog tutorials list:

• CataBlog Tutorials