Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Sebastian Graus
Sebastian Graus
633 Points
Posted by Sebastian Graus
Sebastian Graus
633 Points

Placing multiple widget areas throughout the page

Hi again,

I'm creating a wordpress page for the place that I work at and I want them to be able to change as much of the page without they having any html or css knowledge. Therefor I am thinking about creating a widget area for many of the divs and then creating the content for those div's with the text/html widget. The problem is that I'm not really sure how to place the widget areas inside of each page html. I know the code for functions.php 

/**
 * Register our sidebars and widgetized areas.
 *
 */
function arphabet_widgets_init() {

    register_sidebar( array(
        'name' => 'Baren',
        'id' => 'baren',
        'before_widget' => '<div>',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="rounded">',
        'after_title' => '</h2>',
    ) );
}


add_action( 'widgets_init', 'arphabet_widgets_init' );
?>

And it works fine and show up in the admin-page. I use this code to display the widget area on the page: 

<div class="baren">
<?php dynamic_sidebar( 'Baren' ); ?>
</div>
<?php endif;?>

But it doesn't work. So which markup should I use in the page file for the widget area to show up? Basically telling the page "Hey, HERE is the widget area going".

4 Answers

missgeekbunny
missgeekbunny
37,033 Points
missgeekbunny
missgeekbunny
37,033 Points

What kind of divs are you trying to create the widgets for? It's possible that you may still get what you want with custom post types where they can still write the content and not really use widgets.

Sebastian Graus
Sebastian Graus
633 Points
Sebastian Graus
Sebastian Graus
633 Points

Basically just a div id that contains pictures, text, links and maby videos, nothing more!

so a background color and content. Like post-its on a notice-board

Sebastian Graus
Sebastian Graus
633 Points
Sebastian Graus
Sebastian Graus
633 Points

Okey so I've tried to use the "Custom Post Type UI" Plugin and the "Advanced Custom Fields" plugin. I've created my custom posts and my custom fields but I do not understand what the code is to past the custom post. What I am looking for is:

div id="element1"

/THE CUSTOM POST FOR ADMINS TO EDIT/

/div>

I want to restrain the custom post to width and height of course. What is the markup to use?

missgeekbunny
missgeekbunny
37,033 Points
missgeekbunny
missgeekbunny
37,033 Points

The divs you will want to create in your theme markup. You will need to call the_field() and pass the argument in single quotes where the argument is the name of the field. Also make sure on the advanced custom fields to use the filter to have the posts show on your custom post type you made with Custom post type ui.

So you might do something similar to: <?php if(have_posts()): while(have_posts()): the_post(); ?> <div id="<?php the_field('element')?>"> <?php the_title(); ?> <?php the_content(); ?> <?php the_field('image'); ?> /Change out any fields to align to your custom fields/ </div> <?php endwhile; ?> <?php else: ?> /Whatever you want it to do if there is nothing/ <?php endif; ?> Then you just need to format the width and height with CSS. Hope that helps!

Sebastian Graus
Sebastian Graus
633 Points
Sebastian Graus
Sebastian Graus
633 Points

Thanks for the help Melissa Oveson, however it's not working out so good for me.

<?php 
/* Template Name: Bar */
?>

<?php get_header(); ?>

<?php if(have_posts()): while(have_posts()): the_post(); ?>  
<?php the_content(); ?> 
<div id="element1">
<?php the_field('Element'); ?> <!--/Change out any fields to align to your custom fields/-->

<?php endwhile; else: ?>
<p><?php _e('Ledsen, sidan du försöker hitta finns inte.'); ?></p>
<?php endif; ?>
</div>

<?php get_footer(); ?>

I named the field "Element" but it doesn't show up. The red div just shows up empty. I'm getting nuts!

missgeekbunny
missgeekbunny
37,033 Points
missgeekbunny
missgeekbunny
37,033 Points

Your div is outside of the while which may be causing issues along with your content being outside of the div. If you want to just have 1 div around the content then you will want to start the while after the div. And the association thing I realize is the next step on me catching up.

Before the while you need

<?php $args=array( 'post_type' => 'Bar' ); $the_query = new WP_Query($args) ?>

then change the first line of the while change it to

<?php if(have_posts): while($the_query ->have_posts()): $the_query->the_posts(); ?>

Sebastian Graus
Sebastian Graus
633 Points
Sebastian Graus
Sebastian Graus
633 Points

Okey, here's my code now. Still nothing. 

<?php 

/* Template Name: Bar */

 ?>

<?php get_header(); ?>

<div id="element1">
<?php $args=array( 'post_type' => 'element' ); $the_query = new WP_Query($args) ?>
<?php if(have_posts): while($the_query ->have_posts()): $the_query->the_posts(); ?>
<?php the_content(); ?> 
 <?php the_field('element'); ?> <!--/Change out any fields to align to your custom fields/-->
 <?php endwhile; else: ?>
    <p><?php _e('Ledsen, sidan du försöker hitta finns inte.'); ?></p>
<?php endif; ?>
</div>

<?php get_footer(); ?>

Just so I have got it right: I've created a fieldgroup called "element" in this fieldgroup I've created multiple fields for the admin to fill out. Does the <?php the_field('element'); ?>, drag the whole fieldgroup, or just one single field?

I don't really get why I need custom posts AND the custom field.

missgeekbunny
missgeekbunny
37,033 Points
missgeekbunny
missgeekbunny
37,033 Points

it just calls for one field. I would say though that it is seeming like we both need to review the badge content. But the answer to figuring it all out is in this badge: http://teamtreehouse.com/library/websites/how-to-build-a-wordpress-theme/converting-static-html-into-wordpress-templates

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Have you had a chance to watch the videos on how to create widgetable areas? The code in there should work for what you're trying to do.

Sebastian Graus
Sebastian Graus
633 Points
Sebastian Graus
Sebastian Graus
633 Points

I will check Zac Gordon! Can I ask you for some advise? I'm coding a site looking like this:

http://marielaveau.se/wordpress/snabbskiss.png

I want the admin of the site be able to change the text and pictures to the right easily through the wordpress-admin-page. All elements will be diffrently styled with margins and so on. I'm not sure how to achieve this. Either I make the whole page a widget area and but every element into a text-widget, OR I create custom post styles and just put all the elements to a max width and allow the admin to style things like background-color and so on from the custom fields. Do you understand what I want to achieve?

Thanks!

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

I would suggest creating custom widgets for each area. Have them wrapped in different classes so you can apply unique styling. Then download a wysiwyg text widget and you'll be able to easily add widgets and do text formatting.