Hi there,
What you’re looking to do isn’t a small request. 🙂
I don’t know of any plugins that do it currently, though there very well could be.
What you need is to fetch the posts for the requested category using an ajax request, build the post markup, and insert them into the DOM, replacing the HTML already in a particular container.
I just built something like this for an upcoming theme, and here’s a screencast of how this particular implementation works: http://cl.ly/0h2H1E041A2e
To do the above, I first check to see if the feature is enabled that allows for category links in the menu to be turned into a ‘mega menu’ of sorts. If it is, I filter the menu item markup to add some attributes and classes I can use to intercept the clicks with javascript so they page doesn’t reload to the full category archives.
Then I kick off an ajax request that fetches the latest 6 posts from the requested category, build the HTML markup for it, JSON encode it, return it to the javascript call so I can insert the new HTML into the container, replacing what is already there.
As you can see it’s not something you can just enable. I can share some of the code I did here once I’ve ironed it all out, and you customize it to fit your use case. Otherwise maybe you can find a plugin to help.
Do you actually need to retrieve posts that are related to the category, or just display the image and description?
The closest resemblance I seem to find is “tab content” but not really with the tabs.
This page is a good example:
http://building58.com/example/content-switcher/
It changes one DIV without page reload via JQuery. I felt WP would have a similar plugin but page tabs are as close as I’ve come across.
Client wants links for their services on left, then descriptive text and images on right that change depending on which service links are clicked.
All without the page reloading.
OK, does that mean that you don’t need to retrieve posts from the database? Because if it’s just static information, you can hard-code the HTML in your page, hide the <div>s using CSS, then add some event handlers to the links that display each <div> by setting the display property to block. Basically, just follow the instructions on the blog post.
Are you familiar with using JavaScript? You should be able to add the script using <script> tags inside the page, as long as you are using the Text editor and not the Visual editor.
So here’s a demo I just whipped up using the code & concepts from that blog post. You just have to remember that if you add script or CSS directly into a page, you have to remove any blank lines or else WordPress will try to insert paragraph tags <p> in the middle of your script.
Absolutely perfect! Quick too! I tried once and failed. I’ll get it sooner or later. Thanks
#URAwesome!
If you have trouble with the script, do a view source on my demo and look for the contentSwitcher script, & copy and paste from there. There is one slight tweak to the start of the function.
