Adding a second widget area on the front page?

Support Area Forums Bottega Adding a second widget area on the front page?

Viewing 12 posts - 1 through 12 (of 12 total)
URL to the page in question:
  • Author
    Posts
  • #6469
    Talisman
    Participant

    I love the “sidebar” widget area above the footer on Botega, but I’d love to put another one just above it for another slider (to stream reviews). I tried tweaking the code in the editor, but I obviously don’t know what I’m doing.

    How can I add a second “Home” widget area?

    Thanks!

    Jennie

    #6475
    Bill Robbins
    Moderator

    Jennie,

    When you say you want to add a slider above the widgets, do you mean one that’s already in a widget (like from a plugin) or one like the slideshow at the top of the theme?

    Bill

    #6479
    Talisman
    Participant

    Hi, Bill!

    I actually have a plugin called SliderPro that lets me have a dynamic slider that can pull content from certain tagged posts. I am entering reviews of the restaurant and want them to display that way. Since SliderPro acts like a widget, I can just insert it into the page that way if I have a second widget area on the front page. I want to keep the bottom widget area for the Google map and Facebook widgets you already have in the theme.

    Thanks!

    Jennie

    #6480
    Talisman
    Participant

    I see the code that creates the active sidebar on the front page:

    It seems like I should be able to create another (similar) bit of code named ‘home2’ or something like that and embed it in home.php. Problem is, I don’t know how to create home2 in CSS so that it can be “called” into the page. This is where my WordPress know-how runs out. 😉

    If you can tell me how to create that second sidebar (and have it show up when I click “Widgets” under Appearance), I’d be all set.

    I’m set to show off the new site to the restaurant owner tomorrow, and I’d love to get the review slider in place if I can, but no pressure…. 😉

    Warmly,
    Jennie

    PS – I’m “sspatterns” on Twitter and I am SO thrilled about WooCommerce. This is going to really change my own site for the better. I’m so tired of the limitations of E-Junkie but didn’t know where to go. So many thanks!

    #6481
    Bill Robbins
    Moderator

    Jennie,

    Let me see if I can help you out.

    Is it not possible to add the slider to the same sidebar area as the other widgets? If you need it to be full width, we can actually target that widget instance with CSS and adjust its size without having to edit the home page if that’s the case.

    If you do want to add another sidebar, you can do that too. You’ll need to edit the functions.php file and look for this spot:

    
    register_sidebar( array(
    	'name' => __('Staff Sidebar','organizedthemes'),
    	'id' => 'staff',
    	'description' => __('Sidebar on staff pages','organizedthemes'),
    	'before_widget' => '<div id="%1$s" class="widget %2$s shadow">', 
    	'after_widget' => '</div>', 
    	'before_title' => '<h3 class="widgettitle">', 
    	'after_title' => '</h3>'
    ) );
    

    You’ll want to duplicate that code block and paste it just below where you found it. Then you can change the name and id to something unique. The ID can’t contain spaces.

    Then back on home.php you’ll want to to duplicate this code:

    
    <?php if ( is_active_sidebar( 'home' ) ) { ?>
    	
    	<div id="home-middle" class="clearfix">
    		<?php dynamic_sidebar( 'home' ); ?>
    		
    	</div>
    
    <?php }; ?>
    

    and replace the home with the ID from above. You’ll also need to give the div and unique ID so you can add any styles you need for it to the style.css file.

    If you have any questions or trouble, let me know. If you want to send over a link, I’d be glad to take a look for you too.

    Thanks,
    Bill

    PS-Glad to hear you’ve liked what you’ve seen so far with Woocommerce. I’ve been using e-junkie since 2008, but I don’t like how it looks and since it’s Flash based, I can’t access it from my phone. I’m rebuilding Organized Themes using it and I think it’s going to work out much better. Once my logo designer gets back from her European vacation, I can get some new branding and flip the switch.

    #6485
    Talisman
    Participant

    Hmmm… Yep, I wondered about just adding another widget, but I didn’t see how it would fit if I already had the Facebook and Google map widgets in place. But if I set the new widget to be full-width, I guess it will just be forced to appear above the other two? I think I’ll go experiment…. My one concern is that forcing the new slider widget to go full-width will make the page non-functional for mobile devices.

    Lemme play around a bit and see what I can do on my own. Thanks for the help!

    Very, very excited about getting off E-Junkie for the very reason you gave–doesn’t work on non-flash devices, which means no sales on mobile connections! I just talked to the guy who redesigned my whole site and put it onto a WordPress platform in 2010, and he says he loves WooCommerce and is thrilled I want to move to it. Would never have known about it without your tweet, so thanks!

    All the best,
    Jennie

    #6487
    Talisman
    Participant

    Okaaaay… So, I technically got the slider working (see http://thetalismanrestaurant.com/main). I see I’d need to get rid of (or widen) the shadowbox that you have on your widgets (not sure how to do that), but, frankly, I am just not impressed with SliderPro! I cannot get the “skins” (background, slider arrows) to show up, and their documentation isn’t helping. They offer over 100 different skins to change the look of the slider, but none of them show up in preview or when I publish. Very weird. But even without the skins, I don’t like the annoying transitions between slides. SliderPro will not let me choose a single transition but does an array of them by default. Ick.

    Frankly, I love the simple elegance of your image slider below the header. But I don’t want to have to make an image of each review for a second slider. I want to be able to have the slider pull the review text from all posts tagged “review,” which is what SliderPro can do. But SP is just plain ugly and has those goofy transitions… Oy.

    Is there a way to duplicate your wonderful slider code but tell it to pull from review posts? For instance, your code is:

    ‘slide’, ‘posts_per_page’ => ‘-1’, ‘orderby’=>’menu_order’, ‘order’=>’ASC’ ) ); ?>
    have_posts() ) : $loop->the_post(); ?>
    ID, “slideurl”, TRUE); ?>” rel=”bookmark”> ”.get_the_title().”, ‘title’ => ”.get_the_title().”)); ?>

    What if I duplicated and made the id “slider2” and made the post_type “post” and had a query to pull only posts with the “review” tag on them? That’s how SliderPro works (it can also do images, but I really only need text).

    I really appreciate the help in adding this final feature. I definitely want us to have a review slider on the front page, but I have yet to find a plugin or widget that works properly.

    Thanks,
    Jennie

    #6489
    Talisman
    Participant

    Well, I played around in the Stylesheet.css and managed to lose the shadowbox and center the review slider. But I see that the appearance attributes from the Bottega Theme Options are overriding the slider’s own attributes (like font style, size, bold, italics, etc.). Not sure how to work around that. It’s also possible that Bottega is overriding the slider’s skins, which would explain why I can’t see them even in preview mode.

    Still, even with the text pulling in as it should, I hate SliderPro’s goofy transitions. It just ruins the elegant simplicity of Bottega, IMHO.

    Any thoughts?

    Warmly,
    Jennie

    #6490
    Talisman
    Participant

    Hmmm… I just noticed that the Contact widget is now scaling larger. I didn’t alter any tags or height/width attributes on that sidebar or widget. Any idea why it is skewing tall instead of keeping to the 300px height?

    I wrote the creator of SliderPro, and he is taking a look at the code to see what the problem is. He says the slider’s skins aren’t loading because the paths are incorrect. No clue why, as it was a straight plugin install, but we’ll see what he can figure out….

    All the best,
    Jennie

    #6491
    Bill Robbins
    Moderator

    It looks like there is a small problem with this selector:

    
    #home-middle2 .widget.organizedthemes_contact {
    	width: 800px;
    	margin-left: auto; 
    	margin-right: auto;}
    	background-color: #eee;
    	padding: 15px;
    	overflow: hidden;
    	-webkit-box-shadow: 0px 1px 2px #555;
    	-moz-box-shadow: 0px 1px 2px #555;
    	box-shadow: 0px 1px 2px #555; 
    }
    

    There is a closing } after the margin-right. Try deleting after that until the other } and see if that doesn’t line up the contact widget again.

    #6492
    Talisman
    Participant

    Yep, that fixed it. I never cease to be amazed how a single extra bracket can throw off an entire page! LOL! Thanks.

    We’ll see what the guy from SliderPro can tell me, but, so far, I am far more impressed with how easy Bottega is to customize!

    Thanks for all the help today.

    J.

    #6494
    Bill Robbins
    Moderator

    Glad to help. Let me know if you end up needing anything else.

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Adding a second widget area on the front page?’ is closed to new replies.