Creating A Child Theme<\/h2>\n
As always, you need a child theme. We have a guide to child themes<\/a> right here on WPMU DEV, I recommend giving that a read if you are not familiar with child themes.<\/p>\n Let’s add three controls: one for ordering the posts, one for setting the direction of sorting and one for showing only posts with thumbnails.<\/p>\n The first step is to copy the parent theme’s Open the Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n And here’s what it looks like on the front-end:<\/p>\n As you can see we are lacking a bit of styling. Let’s resolve that by adding some styles to\u00a0the stylesheet:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n A reaction I frequently hear from\u00a0newcomers to programming is: “how did he know that these are the styles that will make it blend into the theme?”<\/p>\n The solution is pretty simple: I cheat. I\u00a0use\u00a0the developer tools in\u00a0Chrome to\u00a0inspect the regular article elements. In this case, it let me see how the elements\u00a0get their box shadow and their margins and I simply applied these rules to my own element.<\/p>\n Let’s select “order by title,” “ascending” and “posts with thumbnails” and submit the form. You should actually see a change without doing\u00a0anything to the code.<\/p>\n To see why, let’s inspect the URL. It should be something like this:<\/p>\n The tidbits of information can be recalled in our PHP scripts using the That’s all great, but again, how<\/em> did I know this? I could have used “order_by” as a parameter instead of “orderby.” In this case WordPress does not pick up on our intentions. I had a look at\u00a0the WP_Query<\/a> documentation in the WordPress Codex\u00a0where there are a bunch of parameters, many of which can be used in URLs.<\/p>\n Now, let’s implement our post thumbnail parameter. A post has a thumbnail if it has metadata with the key Paste the following code above the Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n We merge the parameters of the original query with our own new parameter, which results in a different set of posts. Our form now works but it doesn’t remember our selections. Let’s fix that by rewriting our form and using some PHP.<\/p>\n In addition to listing all the options of the order by selector we need a way to indicate which one is selected. If we were to do this without a loop it would look something like this:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n Do you understand any of that? I don’t blame you! Within each options we’re checking if the currently selected value is equal to the value of the option. If it is, we output the selected property. Let’s make this a lot cleaner with a loop:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n This is a bit longer but only because we have three options. This is a way better format for managing any kind of selection. Let’s extend this to the whole form:<\/p>\nCreating Controls<\/h2>\n
index.php<\/code> into our child theme.<\/p>\nindex.php<\/code> file in your child theme and paste the following HTML below the main container (which should be on line 20):<\/p>\n![\"Forms\"](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/filters.png\")
![\"Styled](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/styled-filter-700x449.png\")
Modifying the Query<\/h2>\n
http:\/\/yourdomain.com\/?orderby=post_title&order=DESC&thumbnail=only_thumbnailed\r\n<\/pre>\n
$_GET<\/code> variable. WordPress already knows what the order and orderby parameters mean and it uses them in the default query. As a result, if we only need ordering and order direction we’re actually all done.<\/p>\n_thumbnail_id<\/code> associated with it. We’ll need to modify our query to make sure this is taken into account. Let’s do this now with query_posts()<\/code>.<\/p>\nget_header()<\/code> function at the top of the file:<\/p>\nSmarter Forms<\/h2>\n