Working with the Affix Widget

A custom made affix widget has been included with the theme. The widget on the right hand side of this article (if you are viewing on a desktop wide enough) is the output.

Creating this widget is pretty simple. Read on to know how.

[icon type=”glyphicon-cog”]Adding the Widget

Affix Widget Settings

From Appearance [icon type=”glyphicon-arrow-right”] Widget drag and drop the Affix widget on the Sidebar. This has only one settings, ie, if you want to make it sticky or not. By default it sticks to the window if the viewport is wide enough. If you want to disable it, then simply uncheck the checkbox.

[notification type=”alert-danger” close=”false” ]If you choose to make the affix widget sticky, then do not add any other widgets on the sidebar. Also, make sure you have only one instance of Affix Widget on a page.[/notification]

[icon type=”glyphicon-eye-open”]Widget Output

Affix Widget

Both the image above and the widget beside this article shows the output. It has the following components.

Search Bar for the current category

A search bar which will search articles from the top-most parent category of the current article. It simply means, this search bar will search from a particular knowledge base (since a parent category represents a knowledge base).

Table of Contents

A collapsible TOC generated automatically from the <h2><h3> and <h4> tags of your article. This is completely automatic, you do not have to do anything on your end.

Plus, the collapsible button on the TOC is persistent (based on cookies). If a user collapses it, then as long as the cookie is present in her browser, it will stay collapsed.

Support Link

If the top-most category has a support link, then it will show up as a button below the TOC.

Child Categories

All child categories of the parent category of the article will list up along with their icons.

Related Articles

The active child category will also show all other articles under it.

Here also the collapsible button is persistent, meaning anyone’s preference will be saved on her computer.

Swashata has written 257 articles

Hi there, I am the Lead Developer at WPQuark.com. I love to create something beautiful for WordPress and here I write about how to use them. When I am not working, usually I am doing a number of other creative things ;).

7 thoughts on “Working with the Affix Widget

  1. Duane says:

    I figured it out. If anyone needs to know how to make this widget list post alphabetically, simple change the $custom_posts variable to this below.

    $custom_posts = new WP_Query( array(
    ‘cat’ => $cat_id,
    ‘posts_per_page’ => -1,
    ‘orderby’=> ‘title’,
    ‘order’ => ‘ASC’,
    ) );

  2. Giancarlo Gambetta says:

    Hi, is there any way to use the affix widget to show the ToC from a Page and the parent + childs links, just like it does on posts?
    loving your theme, thank you for your time.

  3. R Garg says:

    Hi Swashata,

    Thanks for building this wonderful theme. I have a question for you. How easy it is to create another affix widget to work with Pages/Sub Pages. So basically I have managed my site to have parent pages and their child pages. I want to add similar widget on all of my pages. I’m sure the one you have created doesn’t work with pages. It would be nice if you could take a look and let everyone (whosoever is using your theme) know about it. I’m sure many of us would be interested in having affix widget on pages as well.

    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.