Create Tabbed Post Filters in WordPress (Video)

Hi guys,

A student in the premium area asked me how we could make a resource page where we could filter by type of resource.

Here is the video tutorial:

The end result will be something like the following screen:

To do it I have used 3 elements: 2 plugins and custom css.

The plugins that we will need are:

• Tabby Responsive Tabs
• List category posts

The Tabby Responsive Tabs plugin will allow us to easily add tabs to our website. We will only have to add some shortcodes to add the tabs.

The List category posts plugin will allow us to add the content of a certain category to each of the tabs.

In other words, when you click on each tab, the posts of a specific category will appear.

So that it does not have the typical tab shape and the result is the image above, what we are going to do is modify the style sheets.

You can improve the CSS that I have used is the following. You will have to add it in Appearance –> Customize –> Additional Css

body.page-id-533 {
    background-color: #f7f7f7;
}

.tabcontent ul.lcp_catlist li{
float: left;
width:32%;
margin:5px;
list-style-type: none;
font-size:15px;
background:white;
padding:10px;
}

.responsive-tabs .responsive-tabs__panel {
border:0px !important;
padding: 0px !important;
background: #f7f7f7 !important;
}

.responsive-tabs .responsive-tabs__list__item {
color: grey !important;
border: 1px solid #cacaca !important;
font-size:14px!important;
padding:10px 30px !important;
margin-bottom:20px !important;
}

.responsive-tabs .responsive-tabs__list__item--active{
color: #f4633e !important;
border: 1px solid #f4633e !important;
}

.responsive-tabs ul.responsive-tabs__list{
margin:0px !important;
}

.entry-content ol, .entry-content ul {
  margin-left: 0px;
}

.button{
border-radius: 47px;
background: #f4633e;
font-size: 12px;
text-decoration:none;
}

.page-id-533  h4{
color:#f4633e;
font-weight: normal;
}

Now we just have to create a page and add the shortcodes inside that we are going to use to make the content appear:

In my case it was the following:

[tabby title="TODO"]

[catlist id=2 excerpt=yes excerpt_strip=no thumbnail=yes no_post_titles=yes]


[tabby title="DOMINIO"]

[catlist id=32 excerpt=yes excerpt_strip=no thumbnail=yes no_post_titles=yes]

[tabby title="HOSTING"]

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. 

[tabbyending]

In the video I explain what each shortcode parameter means, but in summary I explain it below:

From the shortcode:

[catlist id=2 excerpt=yes excerpt_strip=no thumbnail=yes no_post_titles=yes]

• ID It is the identifier of the category we want to list
• excerpt=yes I specify that I want the content summary to appear
• excerpt_strip=no I specify that I do not want it to remove the html markup
• thumbnail=yes the image appears
• no_post_titles=yes The title does not appear

I hope it will be useful to you 😉
regards
Oscar