Blog Page Filter

Description

• adding filter bar to blog page, use category
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Make sure you use Basic Grid Layout

#1.2. Make sure you enabled Category

#1.3. Click Gear icon on Blog Page

#1.4. Next, click Advanced > Page Header Code Injection

#1.5. Paste this code

<!-- 09.26c25v1 Blog Page Filter -->
<script>
window.BlogFilterConfig = {
  showAll: true,
  allText: 'All',
  initialFilter: '',
  hideCategories: true,
  stickyBar: true,
  filterLinkColor: '#726c60',
  activeColor: '#000',
  filterOrder: [],
  filterSize: '16px',
  filterAlign: 'left',
  filterMarginTop: '2vw',
  filterMarginBottom: '0px',
  gridPaddingTop: '2vw',
  containerSelector: '.blog-basic-grid',
  itemSelector: 'article.blog-item'
};
</script>
<script src="https://code.beaverhero.com/blogpage/0926c25v1blogpagefilter.js"></script>

#2. Customize

#2.1. To change filter links style, change these lines

filterLinkColor: '#726c60',
  activeColor: '#000',
filterSize: '16px',
  filterAlign: 'left',
  filterMarginTop: '2vw',
  filterMarginBottom: '0px',

#2.2. To set custom order, change this line

filterOrder: [],

for example

filterOrder: ['Architecture', 'Interiors', 'On The Boards'],