WordPress Theme Development single.php

In WordPress, Widgets are used to provide various bits of useful content without the need to write code

They are managed through the WordPress admin area under Appearance > Widgets, where you can drag and drop them into designated widget areas.

In this blog, I’ll cover how to write and use Widgets and how they link with certain templates in the hierarchy – such as category, author and archive. We’ll need to write code to set them up and I’ll set that out in this post.

WordPress Widgets

Widgets do not appear in the WordPress admin area by default. We need to add another theme support line to functions.php to get access to Widget Controls; like we did for accessing menus.

<?php add_theme_support( "widgets"); ?>

Now you can find the link to widgets in the Admin area

Dashboard -----> Appearance -----> Widgets

By default, you’ll see one inactive Widget Area. It’s inactive because WordPress isn’t yet aware of any Widget Areas. This means there are Widgets ready to be used but nowhere to put them. We can write code to create spaces in the Admin area to put our Widgets.

/* add a a new widget area in code */
function register_main_widgetarea() {

    register_sidebar( array() 
        
        
   )
}

This will give you menu area which WordPress calls “Sidebar 1”. Basically, this is WordPress saying “I know this is a Widget Area but I have no more information about it”.

Here, we are using the register_main_widgetarea() function to give us a Widget area. This opens one area. You can add as many as you like and you can put multiple widgets into one Widget area. To reiterate, By Widget Area we mean a space in the Admin area, rather than a space in your design to put widgets.

Inside the function we have register_sidebar() function, which takes an array of arguments designed to customise our widget areas. Here’s a full example.

function register_main_widgetarea() {

    register_sidebar(
    
        array(
        
            'name' => __( 'Custom Widget Area', 'subdomain_2024' ),
            'id' => 'custom-widget-area',
            'description' => __( 'Add widgets here to display in the custom widget area.', 'subdomain_2024' ),
        )
    );
}

add_action( 'widgets_init', 'register_main_widgetarea' );

This example gives us the minimum number of parameters to customise the widget areas in the admin area. The ID gives us a unique selector so we can refer to it in code. “Name” is the title you see at the top of a widget area on the Widgets page. In the third parameter, you should also include some text that describes what the group is for. Make it meaningful and descriptive.

Other arguments to register_sidebar() include container classes and customisable elements so you have a further opportunity to integrate your widgets into your designs. These arguments can be found here.

Dynamic Sidebars

When you’ve set up your widget area you need to find good places on your pages to put them. The function to do this is dynamic_sidebar().

<?php dynamic_sidebar(); ?>

When you’ve placed the function in your design, you can simply pass in the string ID of your widget area like this.

<?php dynamic_sidebar( "custom-widget-area" ); ?>

And there we have it. A widget area that contains at least one Widget.

Start Styling Your Widgets

Let’s now work on some styling. When WordPress adds a widget to your project, it does so in a list item <li> element. This might work for some designs but generally speaking, you’ll probably want to use CSS to remove the list bullets.

 // wordpress widgets 
li {

    list-style: none;
}

li:last-child {

    margin-bottom: 20pt;
}

Each block is assigned an id in the format .block-1, .block-2 etc. But if you want to select all Widget Elements with CSS you’ll want to target the .widget_class.

.widget {

    
}

I also put some bottom margin on the last Widget on the page. The reason I did that was to make sure no content was obscured by sticky footer elements.

.widget:last-child {

    margin-bottom: 25pt;
}

Author Templates

With an author Widget set up, let’s finish this post by taking the Let’s take the opportunity to work a bit more on the author.php template.

The first tag we’re going to look at is the author tag.

the_author();

This tag is used to display the author of the current post’s name. That is to say the assigned username.

<div class="posts_by_author">

    <p>Posts by: <strong><?php the_author(); ?></strong></p>
        
</div>

We’ve already got the loop set up in the author.php template.

<?php wp_list_authors(); ?>

We can use it like this

<p>other authors ... 

    <?php wp_list_authors(); ?>

</p>

You may want to change the way the list of authors appears by using the arguments in wp_list_authors(). For example, the administrator account (Username “admin”) is excluded by default, but you can force wp_list_authors() to include the admin account this way:

<ul>
    <?php wp_list_authors('exclude_admin=0'); ?>
</ul>

You can also combine arguments. By default, authors without posts are ignored, but in this example, all authors (users), including the administrator, are displayed.

<ul>
    <?php wp_list_authors('exclude_admin=0&hide_empty=0'); ?>
</ul>

It adds very simple HTML to the page. So if you’re using it in a Template, it will need its own container element in your template to be effectively styled.

 <!-- wordpress tag -->
 <?php wp_list_authors(); ?>
 
 <!-- returns --> 
 <li><a href="http://localhost/wordpress/subdomain_2024/author/jonniegrieve/" title="Posts by jonniegrieve">jonniegrieve</a></li>
 
 <div class="authors-list">
     <li><a href="http://localhost/wordpress/subdomain_2024/author/jonniegrieve/" title="Posts by jonniegrieve">jonniegrieve</a></li>
 </div>
 

The wp_list_authors() function has a large range of parameters.

• orderby string
• order string
• number int
• optioncount bool
• exclude_admin bool
• show_fullname bool
• hide_empty bool
• feed string
• feed_image string
• feed_type string
• echo bool
• style string
• html bool
• exclude int[]|string
• include int[]|string

wp_list_authors() by Example

wp_list_authors( array(

    'show_fullname' => 1,
    'optioncount' => 1,
    'orderby' => 'post_count',
    'order' => 'DESC',
    'number' => 3

) );

This configuration will display a list of the top 3 authors, ordered by the number of posts they have written (in descending order, so the author with the most posts appears first). It will show each author’s full name and the number of posts they have written.

<nav class="blog_home_pagination">

    <?php echo paginate_links(); ?>

<?nav>

In conclusion

We’ll stop this post at this point. We’ve explained WordPress widgets and combined their use with the Author Templates to access a list of all the authors and their posts that are on your website.

In the next post, we’ll build on a range of templates and how they relate to each other in the WordPress Template Hierarchy.

• category.php –
• archive.php –
• date.php –
• author.php –
• search.php –
• 404.php