Adding a second widget area on the front page?
Support Area › Forums › Bottega › Adding a second widget area on the front page?
- This topic has 11 replies, 2 voices, and was last updated 11 years, 9 months ago by Bill Robbins.
-
AuthorPosts
-
June 19, 2012 at 14:41 #6469TalismanParticipant
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
June 19, 2012 at 20:01 #6475Bill RobbinsModeratorJennie,
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
June 20, 2012 at 02:58 #6479TalismanParticipantHi, 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
June 20, 2012 at 09:59 #6480TalismanParticipantI 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,
JenniePS – 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!
June 20, 2012 at 10:31 #6481Bill RobbinsModeratorJennie,
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,
BillPS-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.
June 20, 2012 at 13:21 #6485TalismanParticipantHmmm… 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,
JennieJune 20, 2012 at 13:54 #6487TalismanParticipantOkaaaay… 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,
JennieJune 20, 2012 at 14:33 #6489TalismanParticipantWell, 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,
JennieJune 20, 2012 at 15:12 #6490TalismanParticipantHmmm… 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,
JennieJune 20, 2012 at 15:20 #6491Bill RobbinsModeratorIt 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.June 20, 2012 at 15:53 #6492TalismanParticipantYep, 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.
June 20, 2012 at 16:10 #6494Bill RobbinsModeratorGlad to help. Let me know if you end up needing anything else.
-
AuthorPosts
- The topic ‘Adding a second widget area on the front page?’ is closed to new replies.