[Resolved] Showing 2 views in tabs in the sidebar in GeneratePress

[Author]

Posts

[martinE-4]

Tell us what you are trying to do?
I am trying to show recent and featured posts for a custom post type in tabs in a sidebar of GeneratePress theme (see image of Drupal site I am translating into wordpress and toolset with the tabbed sidebar)

Is there any documentation that you are following?
So far I've read possible related support posts:
https://toolset.com/forums/topic/search-results-for-different-post-types-in-tabs/
https://toolset.com/forums/topic/boostrap-4-tabs-not-working/

Is there a similar example that we can see?
I uploaded the image of the Drupal sidebar that I'm trying to imitate (hidden link)

What is the link to your site?
I'm developing locally

I have been trying to use the new Views editor with blocks but as I understand it we can't use shortcodes of views created with blocks anymore? I guess the new Views created with the blocks editor are either associated with a page or content template and can't really be assigned through the view widget in GeneratePress anymore?

I would appreciate learning the best approach to putting my 2 views in tabs in the sidebar in GeneratePress.

many thanks!

[Christian Cox]

Hi, I'm not sure about how you would best go about putting tabs in a sidebar in GeneratePress. If you deactivated Toolset, how would you go about creating those tabs? Does GeneratePress have a tabs widget you could place there? If so, then you could probably use Toolset Views shortcodes to place your two Views in the GeneratePress tab panels if they support shortcode input. Even if you use the new Blocks plugin, where Views are tied to templates or pages, you can still use Views shortcodes to place one of those Views in any HTML editor panel. You may need to enable both the legacy and blocks Editing Experiences (Toolset > Settings > General) temporarily to create the shortcodes somewhere, then copy + paste them into the tab panel contents.

If there is no tabs widget in the GeneratePress library, then you must create your own tabs and display them somehow. There isn't a tabs block in Toolset Blocks library, so the best option is probably custom HTML. The Bootstrap library (which can be loaded automatically by enabling it in Toolset > Settings > General) has some good examples for creating your own tabs interface: https://getbootstrap.com/docs/4.4/components/navs/#tabs

Let me know if you have additional questions about this.

[martinE-4]

I need a little clarification:
Even if you use the new Blocks plugin, where Views are tied to templates or pages, you can still use Views shortcodes to place one of those Views in any HTML editor panel. You may need to enable both the legacy and blocks Editing Experiences (Toolset > Settings > General) temporarily to create the shortcodes somewhere, then copy + paste them into the tab panel contents.

I have been operating with enabling both the legacy and blocks editing experiences because I thought that was the only way to create the shortcode. Does this mean I can use a use Views shortcode for the views created by the Blocks plugin? I don't see where to grab the shortcode for those new views created in Blocks? Or do I just create a view using the legacy plugin and use the blocks editor for the loop part? I guess that would work right?

I will probably follow your advice on the Bootstrap library, using this html:

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-featured-tab" data-toggle="pill" href="#pills-featured" role="tab" aria-controls="pills-featured" aria-selected="true"> Featured </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-recent-tab" data-toggle="pill" href="#pills-recent" role="tab" aria-controls="pills-recent" aria-selected="false"> Recent </a>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">[wpv-view name="xxx"]</div>
  <div class="tab-pane fade" id="pills-recent" role="tabpanel" aria-labelledby="pills-recent-tab">[wpv-view name="xxx"]</div>
</div>

I'm also tempted to try the Ultimate Shortcodes plugin which has a tab widget which I could put in the GP sidebar and fill it with my views shortcodes. What do you think?

[Shane]

Hi Martin,

Christian is currently on holiday today but will be back tomorrow to continue this ticket with you.

Thanks you for the continues patience.

[Christian Cox]

Does this mean I can use a use Views shortcode for the views created by the Blocks plugin?
Yes, you can use the Fields and Views button above any classic text editor to insert a View shortcode for a View created in the Blocks plugin. That is possible now.

I'm also tempted to try the Ultimate Shortcodes plugin which has a tab widget which I could put in the GP sidebar and fill it with my views shortcodes. What do you think?
I think it's worth a shot, but I'm not really familiar with that plugin. If the tabs are rendered at page load and they accept shortcode input, that might work. If the tabs are rendered with AJAX, you might have trouble getting Views shortcodes to render. I haven't tried with that specific setup so I'm not sure.

[martinE-4]

My issue is resolved now. Thank you!

I ended up using a GeneratePress element hook to locate my view shortcodes in the right sidebar. I was able to use the Bootstrap tabs class html to enter two toolset view shortcodes in each tab content area. Piece of cake with some nice CSS.

I'm really glad I can get the shortcode from the new blocks editor-created views in pages or templates because I love using the new blocks editor. I'm glad you told me that because I didn't realize it was possible like with the old classic views editor. Maybe that should be emphasized in docs somewhere because I noticed on recent posts a lot of resistance to the new editor...