How did Backlinko do this? (Sorting Content)

Concept · May 25, 2017

I was just on Brian Dean's seo tools page here: http://backlinko.com/seo-tools

I noticed he has implemented some onsite script that allows you to sort through the list based on the selection criteria at the top.

This "sorting" of content would be perfect for some pillar content I'm creating atm

I'm assuming he got someone to program it for him (or did it himself) however, my budget is limited and my programming skills are not up to scratch (I could recreate something like this in excel - not online).

Does anyone know how I could do this relatively easily, or of a plugin that could do something similar to this?

Cheers

builder · May 25, 2017

Similar question: https://www.buildersociety.com/threads/creating-a-filter-for-content-in-wordpress.2487/

Michael · May 25, 2017

Looks like a custom script to me - http://backlinko.com/wp-content/plu...tent-hide-reveal-switches-public.js?ver=1.0.0

Depending on how advanced of a filter you need, you could get this done in jquery (basic show/hide stuff, not hard).

If you require something more advanced, maybe you could hire a developer to ahem, re-purpose Brian's script which would save you a significant amount of money I guess.

Tao · May 26, 2017

I did a little fly-by-the-seat-of-my-pants coding and managed to get this working along with some content boxes from Thrive Content Builder.

I created 2 buttons at the top of the page, one with a class called "onlyred" and one called "onlygreen" (with links pointing to # otherwise TCB adds a link back to the page URL).

I then added some content boxes with class names of either "redbox" or "greenbox" with some dummy content in.

I added the following jquery code to load just before the closing <body> tag:

Code:

<script>
( function($) {
$(document).ready(function(){
    $(".onlygreen").click(function(){
        $(".redbox").toggle();
    });
 $(".onlyred").click(function(){
        $(".greenbox").toggle();
    });
});
} ) ( jQuery );
</script>

This will allow a toggle (show/hide) when the buttons are clicked.

If you are interested and also have TCB, here is the code from my test page:

HTML:

<div class="thrv_wrapper tcb-flex-row tcb--cols--2">
<div class="tcb-flex-col tve_empty_dropzone"><div class="thrv_wrapper thrv_button_shortcode onlygreen tve_rightBtn" data-tve-style="1">
<div class="tve_btn tve_nb tve_normalBtn tve_green tve_btn3">
<a href="#" class="tve_btnLink">
<span class="tve_left tve_btn_im">
<i></i>
<span class="tve_btn_divider"></span>
</span>
<span class="tve_btn_txt">Show Only Green</span>
</a>
</div>
</div></div>
<div class="tcb-flex-col tve_empty_dropzone"><div class="thrv_wrapper thrv_button_shortcode onlyred tve_leftBtn" data-tve-style="1">
<div class="tve_btn tve_nb tve_normalBtn tve_btn3 tve_red">
<a href="#" class="tve_btnLink">
<span class="tve_left tve_btn_im">
<i></i>
<span class="tve_btn_divider"></span>
</span>
<span class="tve_btn_txt">Show Only Red</span>
</a>
</div>
</div></div>
</div><div class="thrv_wrapper thrv_contentbox_shortcode redbox" data-tve-style="1">
<div class="tve_cb tve_cb1 tve_red" id="" style="border-radius: 0px;">
<div class="tve_hd tve_cb_cnt tve_empty_dropzone" style="border-radius: 0px;">
<h3 class="">
Red Box</h3>
<span></span>
</div>
<div class="tve_cb_cnt tve_empty_dropzone">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut
aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div><div class="thrv_wrapper thrv_contentbox_shortcode redbox" data-tve-style="1">
<div class="tve_cb tve_cb1 tve_red" id="">
<div class="tve_hd tve_cb_cnt tve_empty_dropzone">
<h3 class="">
Red Box</h3>
<span></span>
</div>
<div class="tve_cb_cnt tve_empty_dropzone">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut
aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div><div class="thrv_wrapper thrv_contentbox_shortcode greenbox" data-tve-style="1">
<div class="tve_cb tve_cb1 tve_green" id="">
<div class="tve_hd tve_cb_cnt tve_empty_dropzone">
<h3 class="">
Green Box</h3>
<span></span>
</div>
<div class="tve_cb_cnt tve_empty_dropzone">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut
aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div><div class="thrv_wrapper thrv_contentbox_shortcode redbox" data-tve-style="1">
<div class="tve_cb tve_cb1 tve_red" id="">
<div class="tve_hd tve_cb_cnt tve_empty_dropzone">
<h3 class="">
Red Box</h3>
<span></span>
</div>
<div class="tve_cb_cnt tve_empty_dropzone">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut
aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div><div class="thrv_wrapper thrv_contentbox_shortcode greenbox" data-tve-style="1">
<div class="tve_cb tve_cb1 tve_green" id="">
<div class="tve_hd tve_cb_cnt tve_empty_dropzone">
<h3 class="">
Green Box</h3>
<span></span>
</div>
<div class="tve_cb_cnt tve_empty_dropzone">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut
aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div><div class="thrv_wrapper thrv_contentbox_shortcode greenbox" data-tve-style="1">
<div class="tve_cb tve_cb1 tve_green" id="">
<div class="tve_hd tve_cb_cnt tve_empty_dropzone">
<h3 class="">
Green Box</h3>
<span></span>
</div>
<div class="tve_cb_cnt tve_empty_dropzone">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut
aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>

How did Backlinko do this? (Sorting Content)

Concept

builder

Michael

Tao