Posts tagged ‘wordpress’

Displaying our New Widget Container on WordPress

Before you tackle this article, it is very important to check out this link: Add a Widget Container to Twenty Ten Theme.

After you have created a new widget container in the Twenty Ten theme (or whatever theme you are using), then you can continue here and this will enable your widget to display on every single page of your website.  Similar to the way that it does it on this blog.

Browse to Admin -> Appearance -> Editor and open header.php (on the right hand side of your admin page).

Now at this stage, I would suggest just getting comfortable with everything here, but our content is going to go just before the line seen below:

<div id="header">

Here is the code Snippet to paste in:

<?php if (!dynamic_sidebar("Header Top Widget") ) : ?>
Default header widget stuff here…
<?php endif; ?>

At this point, if you haven’t configured your widget from the previous post, then head over there now, or your blog will have the text “Default header widget stuff here…” displaying on every page of your application. Once more, you configure this widget by browsing to Admin -> Appearance -> Widgets, where after successful completion of this tutorial, you should have a Widget Container named “Header Top Widget”.

Add Widget and Ads Twenty Ten WordPress Theme

I sat down today to add a widget container and ads to my WordPress blog with the latest popular Twenty Ten theme. This would also likely apply to all other themes as well where there is no Top Widget Container. To view this in action, just take a gander above the name of my blog and know, that this is exactly how I did it.

To add a Widget Container, Browse to http://your-wordpress-blog.com/wp-admin -> Appearance -> Editor

On the right hand side of this page, you will see a link to all of the different pages you can edit directly.  Select the “functions page”, and continue to the next step.

In here, around line 355 (YMMV), you will see text like:

function twentyten_widgets_init() {

Now add this text behind this line (You may want to change the naming strategy, but be wary when doing this as you will have to change the respective names later in this series of articles).

  // Header Widget :)  Whee
  register_sidebar( array(
   'name' => __( 'Header Top Widget', 'twentyten' ),
   'id' => 'header-top-widget',
   'description' => __( 'This widget is displayed above all other content on every page', 'twentyten' ),
   'before_widget' => '<div id="header-top-widget">',
   'after_widget' => '</div>',
   'before_title' => '<h3 class="widget-title">',
   'after_title' => '</h3>',
  ) );

Now, browse to Admin -> Widgets and notice that you now have a new widget that you can configure and add whatever you want to it here.  I’m using this as just a display for ads and another little cushion image I added, so I won’t go too much into styling this widget container.

In the next article we will look at displaying this container on every page of your blog, as I do here (browse around and see it in action).

Displaying our New Widget Container on WordPress

© 2012 - Jeff Ancel
Wordpress Themes
Scroll to Top