Filter, Sort Options + Grid for Blog & All Archive Pages

[hawaiicolo]

Hello!

For the main blog page and all archive pages I'd like to have filter, sort, search options above a 3-column grid.

I'm pretty new to CSS and PHP and customizing and have read through lots of tutorials, forum posts and comments, but am unsure of the simplest/best way to approach this. Do I add code to functions.php? Maybe create a custom home.php and/or archive.php? Something else? Also, I've seen people using both columns and CSS grids - is one method better?

MOCKUP:
https://wireframe.cc/cxKHpI

THEME:
Brian Gardner's Twenty-Seven-Pro

DETAILS:

1. Use a full-width page that's wider than the theme's default full-width page I have set as default. I created a custom template, but can't seem to get the blog or archive pages to use it...

2. Show a 3-column grid with individual post elements in this order:
-featured image
-title (linked)
-excerpt
-categories (linked, no label)

3. I'd like to give the options to Filter (by category), Sort (by Name or Most Recent), and Search.

Any and all help/suggestions are very welcomed and appreciated, thank you so much in advance!

https://wireframe.cc/cxKHpI

[Victor Font]

What you're asking for is fairly complex custom coding that can takes hours to complete. As a community volunteer, I don't have the time to provide that much research and custom code for free. I don't know that you'll find too many people that will help with what you are asking. I'll give you some guidance, but that's about all I can do.

1. There's no need for a custom page template. The page width can be handled through CSS and default layouts can be changed on an individual page/post level.

2. You could create your own custom plugin based on the Genesis Featured Post plugin to order the content sections the way you want. The three column grid is CSS applied to the widget area.

3. Category dropdown and sort by name - custom form and custom query. Search - built-in functionality use the search widget.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[hawaiicolo]

Thank you for taking the time to respond, Victor! I appreciate your insight and guidance. I didn't realize what I'm looking to do is fairly complex, so that's definitely good to know (and also helps explain why I was having trouble as a newbie). I'm off to try your suggestions... Thanks again and have a wonderful day!

[Author]

Posts