Home page with 3 sidebars for widgets

Travelify
1

Hi, first of all thanks for the excellent and beautiful theme!

I like to have a homepage with 3 columns (3 sidebars actually), so that I can fill them with widgets. With the current templates that is not possible.

I looked at some files, but with limited knowledge of coding, I have absolutely no clue where to start and whether it is within my capabilities to create a template with 3 sidebars.

Can anyone point me in the right direction, where to start and whether it is possible with limited knowledge of coding.

Thanks!

2

There is no easy way to get this done via code as it requires to register new sidebar and output them but you would also need to create a new template or a least modify existing one by using is_home is_front_page and then add your previously registered widgets.

However, there might be two possible alternatives for this:

  1. To use some shortcode plugin that allows to create columns. That way you are not going to get widget functionality but at least you will be able to add content on separate columns.

  2. Would be to use footer widgets just like I have in theme demo https://colorlib.com/travelify/. But to hide content area in first page and then hide those widgets from the rest of the website. Might not be cleanest way around but it is definitely doable.

3

Thanks for your quick response!

I think I can work with the 2nd option. I already use the ‘widget logic’ and ‘dynamic widget’ plugins, so I think I can also use that with the footer to show only on the home page.

But I am facing some problems.

  1. I want the widgets to be tight to each other. However, the first three appear nicely spaced in a row, and column 1,2,3 respectively. Then, sometimes the 4th widget is in the last column or in the first, but the spacing is very wide (they are much lower/ a lot of vertical space). The same holds for the 5th, 6th etc… Also it appears that they are sometimes slightly shifted to the right. Is there a fix for both of these things?
  2. how can I completely hide content area in the page?

cheers

4
  1. This can be fixed by adding this code to Theme Options - Other - Custom CSS.
.col-3:nth-child(4n+4) {
    margin-left: 0px;
}
  1. And add this to the same field to hide content area from homepage.
.home #primary {
    display: none;
}

Let me know if this helps.

5

Thanks for your last suggestions, although they did not help.

In the end I got it to work the hard way. I probably cut some corners, but if other people want to replicate what I have, here is what you should do:

register sidebars: (here is the code for one, just copy paste twice, with different id’s) and put in functions.php or site-specific plugin.

if ( function_exists('register_sidebar') ) {
    register_sidebar(array(
        'name' => 'Custom Sidebar Left',
        'id' => 'custom-sidebar-left',
        'description' => 'Sidebar links op de home page',
	'before_widget' 	=> '<aside id="%1$s" class="widget %2$s">',
	'after_widget'  	=> '</aside>',
	'before_title'  	=> '<h3 class="widget-title">',
	'after_title'   	=> '</h3>',
    ));

Then create template.

<?php
/*
 * Template Name: three sidebars
 */
?>
<?php get_header(); ?>

<?php do_action( 'travelify_before_main_container' ); ?>

<div class="custom-sidebar">
      <?php
      if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('custom-sidebar-left') ) :
      endif; ?>
</div>
*and copy paste the above div here twice again with different id's for 'custom-sidebar-left'

<?php do_action( 'travelify_after_main_container' ); ?>
<?php get_footer(); ?>

Lastly, apply template to your home page and apply css (edit some more for responsiveness and nice spacing in page)

float: left;
width: 31.28%;
margin-right: 2.05%;
6

@mrb

Awesome! Thank you for posting your solution here on forum!

It always feels better when you have created your own solution for something :slight_smile: