Community Forums › Forums › Archived Forums › Design Tips and Tricks › Creating a widget area
- This topic has 7 replies, 2 voices, and was last updated 10 years, 10 months ago by Brad Dalton.
-
AuthorPosts
-
June 15, 2013 at 1:51 pm #46139angieatcMember
I know this is beyond the realm of the forums but I am desperate for some help.
Here is the site: http://test2.strosgirldesigns.com/ and you can see where I need the posts (below the slider).
I added a widget area under the slider widget via the home.php but now the slider runs into the header of the new widget area. The new widget area is home-top and it is inside the id: featured-top I added this to my CSS
#featured-top .home-top .featuredpost .post p (this is what I get from Firebug) {
float: left;
width: 220px;
}I just need some direction here because I am completely lost here. Does anyone know of a tutorial that explains how to do this effect?
I just tried pasting my code from my home.php but it takes out all the coding, if someone would like to look at it I can figure out how to post it here.
My design site, Hill Springs Designs
June 15, 2013 at 2:26 pm #46143Brad DaltonParticipantAnother way to add a widget is to use a custom function in your child themes functions.php file rather than add the code to the home.php file.
Did you want a custom widget to output before both the Featured Top Left and Featured Top Right widgets, under the slider?
June 15, 2013 at 2:59 pm #46149angieatcMemberHey Brad!
Carri Dils helped me with it but what I added to the CSS messed up some other stuff.
This is what she told me to put in my CSS which worked great for the top section!
.home-top {
clear: both;
}.home-top .featuredpost .post {
float: left;
width: 33%;
}However, the bottom section is a mess now. One of the posts is missing and there is that big gap. The other thing is I need the same thing at the bottom section as I do in the top section.
And yes to your question about the custom widget, but I need them be in 1 widget but show 3 posts next to each other (left to right).
Does this make sense? Maybe without putting the code tags in here you can see my home.php file.
<?php get_header(); ?>
<?php genesis_before_content_sidebar_wrap(); ?>
<div id="content-sidebar-wrap"><?php genesis_before_content(); ?>
<div id="content" class="hfeed"><div id="featured-top">
<div class="slider">
<?php if (!dynamic_sidebar('Slider')) : ?>
<div class="widget">
<h4><?php _e("Slider", 'genesis'); ?></h4>
<div class="wrap">
<p><?php _e("This is a widgeted area which is for the Genesis slider.", 'genesis'); ?></p>
</div><!-- end .wrap -->
</div><!-- end .widget -->
<?php endif; ?>
</div><!-- end .slider -->
<div class="home-top">
<?php if (!dynamic_sidebar('Home Top')) : ?>
<div class="widget">
<h4><?php _e("Home Top", 'genesis'); ?></h4>
<div class="wrap">
<p><?php _e("This is a widgeted area which is for the Home Top.", 'genesis'); ?></p>
</div><!-- end .wrap -->
</div><!-- end .widget -->
<?php endif; ?>
</div><!-- end .slider -->
<div class="featured-top-left">
<?php if (!dynamic_sidebar('Featured Top Left')) : ?>
<div class="widget">
<h4><?php _e("Featured Top Left", 'genesis'); ?></h4>
<div class="wrap">
<p><?php _e("This is a widgeted area which is called Featured Top Left. It is using the Genesis - Featured Posts widget to display what you see on the Serenity child theme demo site. To get started, log into your WordPress dashboard, and then go to the Appearance > Widgets screen. There you can drag the Genesis - Featured Posts widget into the Featured Top Left widget area on the right hand side. To get the image to display, simply upload an image through the media uploader on the edit page screen and publish your page. The Featured Posts widget will know to display the post image as long as you select that option in the widget interface.", 'genesis'); ?></p>
</div><!-- end .wrap -->
</div><!-- end .widget -->
<?php endif; ?>
</div><!-- end .featured-top-left -->
<div class="featured-top-right">
<?php if (!dynamic_sidebar('Featured Top Right')) : ?>
<div class="widget">
<h4><?php _e("Featured Top Right", 'genesis'); ?></h4>
<div class="wrap">
<p><?php _e("This is a widgeted area which is called Featured Top Right. It is using the Genesis - Featured Posts widget to display what you see on the Serenity child theme demo site. To get started, log into your WordPress dashboard, and then go to the Appearance > Widgets screen. There you can drag the Genesis - Featured Posts widget into the Featured Top Right widget area on the right hand side. To get the image to display, simply upload an image through the media uploader on the edit page screen and publish your page. The Featured Posts widget will know to display the post image as long as you select that option in the widget interface.", 'genesis'); ?></p>
</div><!-- end .wrap -->
</div><!-- end .widget -->
<?php endif; ?>
</div><!-- end .featured-top-right -->
</div><!-- end #featured-top --><div id="featured-bottom">
<?php if (!dynamic_sidebar('Featured Bottom')) : ?>
<div class="widget">
<h4><?php _e("Featured Bottom", 'genesis'); ?></h4>
<div class="wrap">
<p><?php _e("This is a widgeted area which is called Featured Bottom. It is using the Genesis - Featured Posts widget to display what you see on the Serenity child theme demo site. To get started, log into your WordPress dashboard, and then go to the Appearance > Widgets screen. There you can drag the Genesis - Featured Posts widget into the Featured Bottom widget area on the right hand side. To get the image to display, simply upload an image through the media uploader on the edit page screen and publish your page. The Featured Posts widget will know to display the post image as long as you select that option in the widget interface.", 'genesis'); ?></p>
</div><!-- end .wrap -->
</div><!-- end .widget -->
<?php endif; ?>
</div><!-- end #featured-bottom --></div><!-- end #content -->
<?php genesis_after_content(); ?></div><!-- end #content-sidebar-wrap -->
<?php genesis_after_content_sidebar_wrap(); ?><?php get_footer(); ?>
My design site, Hill Springs Designs
June 15, 2013 at 3:06 pm #46152Brad DaltonParticipantI think you only want the widget to display full content width but not full width which extends to the end of the sidebar?
Here's the code i would use however it does display the widget content full width. You can change the hook if needed.
Code not displaying? Grab it on Github.
You need to add CSS for the padding.
June 15, 2013 at 3:18 pm #46156angieatcMemberI am assuming I am going to remove the area from the home.php file?
I have added padding to the CSS here and nothing changes.
.home-top .featuredpost .post {
float: left;
padding: 0 5px;
width: 33%;
}*edit*
I know the reason why we put it in the home.php file it was because none of the hooks worked. Nothing we put would hook in the correct spot so we had to write the function the way it was on the home.php file.
My design site, Hill Springs Designs
June 15, 2013 at 3:24 pm #46158Brad DaltonParticipantThe CSS won't work with the code i provided.
You'll need to use the new class generated by the custom widget PHP i provided which is
home-custom
Also the PHP only generates a full width widget area.
June 15, 2013 at 4:04 pm #46171angieatcMemberThanks Brad for all of your help! I had to put the code back into the home.php file because there was no hook that placed it correctly. I tried creating a widget area in the function for the slider but there was no hook I could use that placed it in the spot where I needed it.
So I have everything correct, except I cannot put any spaces between the 2nd and 3rd column. Is there a way to distinguish the 3rd column to float right? I am also not sure why the border is cut off of of the image.
My design site, Hill Springs Designs
June 15, 2013 at 4:24 pm #46175Brad DaltonParticipantNot sure about CSS.
What you could do is hook in a slider directly without even creating or using a widget area.
Then you could use the slider widget for something else.
You'd need to install one of the Easing Slider or Soliloquy plugins.
Change the
is_home() conditional tag to is_front_page()
if needed.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.