Q2A: making the main content div appear before the side panel

Reordering Content in Question2Answer Themes

Question2Answer renders the sidebar before the main content div in the HTML output by default. If you need the main content to appear first in the DOM (useful for accessibility, SEO, or mobile-first design), you’ll need to customize your theme’s output.

The solution involves overriding the body_content() function in your theme’s qa-theme.php file. This function controls the rendering order of major page sections.

Implementation

Edit your theme’s qa-theme.php and add this method to the qa_html_theme class:

function body_content()
{
    $this->body_prefix();
    $this->notices();

    $this->output('<DIV CLASS="qa-body-wrapper">', '');

    $this->widgets('full', 'top');
    $this->header();
    $this->widgets('full', 'high');
    $this->main();
    $this->sidepanel();
    $this->widgets('full', 'low');
    $this->footer();
    $this->widgets('full', 'bottom');

    $this->output('</DIV> <!-- END body-wrapper -->');

    $this->body_suffix();
}

The critical line is $this->main() appearing before $this->sidepanel(). By default, Q2A calls these in reverse order.

Making the Sidebar Optional

If you want more control, you can conditionally render the sidebar:

function body_content()
{
    $this->body_prefix();
    $this->notices();

    $this->output('<DIV CLASS="qa-body-wrapper">', '');

    $this->widgets('full', 'top');
    $this->header();
    $this->widgets('full', 'high');
    $this->main();

    if ($this->can_output('sidepanel')) {
        $this->sidepanel();
    }

    $this->widgets('full', 'low');
    $this->footer();
    $this->widgets('full', 'bottom');

    $this->output('</DIV> <!-- END body-wrapper -->');

    $this->body_suffix();
}

CSS-Only Alternative

If you’re using a modern Q2A version with flexbox support, you may be able to achieve visual reordering with just CSS:

.qa-body-wrapper {
    display: flex;
    flex-direction: row-reverse;
}

However, this only changes visual order, not DOM order. Use the PHP override if you need actual DOM reordering for crawlers or assistive technology.

Important Notes

• Always override in a child theme rather than modifying the parent theme directly—this preserves your customizations across updates
• Test the layout on mobile viewports to ensure your reordering works with responsive designs
• If your theme uses additional layout wrappers or grid systems, you may need to adjust more than just body_content()
• Clear any caching (page cache, theme cache) after making changes to see the effects