Support » Fixing WordPress » Sidebar: Changing content with Ajax

  • I need to make a sidebar that has two tabs. The sidebar is displayed on basically every page on the site, so I don’t want to have the “secondary” content in the DOM unless they user clicks the “secondary tab.”

    I am trying to think of a way to make this managable from the front end.

    My best guess is that I can create a Sidebar to be the “sidebar container” which will actually be added to the template files. Then, create two more sidebars to function as the “sidebar contents”; these two sidebars wouldn’t actually be added to the template files, just added as a means to actually change and manage the sidebar content through the WordPress dashboard. Finally, I’d create a custom Widget or shortcode that will display the Main sidebar content by default, but also has the Ajax script that will change the content to the “Secondary” content when clicked.

    That’s the best I can come up with. Any ideas?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz


    An Ajax approach is feasible, but there will be a noticeable delay in content appearance when first switching to the second tab. The second tab could appear to be broken until the data comes back from the server. What do you hope to achieve by keeping the secondary tab content out of the DOM until requested? Seems like a lot of fuss for little gain.

    Anyway, while two widgets could serve as tab containers, I’d be more inclined to create two containers, each with their own widget area, right on the sidebar template. I think it’d make for a better admin user experience where any widget could be placed in either widget area.

    Thread Starter oguruma


    @bcworkz Basically I am concerned with the page load performance of loading the hidden tab content. The content itself would contain a bunch of small thumbnail images, since it’s just a list of posts.

    Moderator bcworkz


    Have you done an A/B comparison? The performance improvement may not be all that large, especially with the time to interactive score which most impacts the user’s experience. It’s likely other page optimization will be more effective than delaying tab content loading. Of course you could do it ll, but there is a point of diminishing returns regarding page performance vs. effort required to get there.

    You might be able to adapt a lazy load script. It’s sort of the same thing, except triggered by tab click instead of scroll position. And fetched content goes into a widget container instead of the main content.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.