Create a Middle Header Widget Area for a Genesis Child Theme
Most Genesis themes including the framework/sample theme come with a ‘header right‘ widget area which solves most header layouts, however there are times when an additional header middle widget area may come in handy, in particular for 3 distinct content blocks that requires a client when handing over, have to manage the content. In the layout above you…
Read MoreCentering The Last Item In A Flexbox Container
I’m using flexbox more and really liking it, I’ve hit an issue a few times with center aligning the last item in an uneven row of elements inside a flexbox row container when using the justify-content: space-between; flexbox property, you could use justify-content: flex-start; – but when that won’t do, here is a solution below. So…
Read MoreAdding an offscreen content area with a toggle to a Genesis Theme
The latest Genesis Infinity Pro theme has a top right toggle icon which allows for some off screen content to come into prominence in the viewport, this can be great for lead capture, ecommerce, contact details etc Here is how you can add this to the Sample Theme, also should work ok in other Genesis themes…
Read MoreShow All the Tags in WordPress Post Editor
Want to show all the tags in the WordPress post editor, so you can easily tag a post with all available tags – you can with get_terms_args In your functions.php add in… add_filter( ‘get_terms_args’, ‘themeprefix_show_tags’ ); // Show Tags function themeprefix_show_tags ( $args ) { if ( defined( ‘DOING_AJAX’ ) && DOING_AJAX && isset( $_POST[‘action’]…
Read MoreAdding a Data Attribute to a Menu List Item via the Walker Class
Here is how to add a Data Attribute to a Menu List Item via the Walker Menu Class. Some of the markup of the WordPress menu is hard to filter or hook into, the Walker class allows for a full custom menu mark up. One request I find is to add a data attribute to the list item…
Read MoreHide a certain Category’s Posts from the Home/Blog page in WordPress
To hide a certain Category’s posts from the home or blog page you just need to know the category ID and then use a filter on the pre_get_posts hook to exclude those posts. To find the ID for the Category just go to the Category and hover over the edit button and the ID appears in the…
Read MoreAdd a Custom Post Type Template in WordPress 4.7
WordPress 4.7 brings a new feature in the ability to add a Custom Post Type template in a similar way a Page Template is added. A page template can be added by creating a specific file page-{id}.php or page-{slug}.php file, the problem with this approach is that it is not reusable for other pages, so a…
Read MoreFlexbox – some notes on Container and Child Item Properties and Values
This is not a tutorial as such, just a bunch of notes for myself as I start to utilize flexbox more in my layouts, there is quite a lot of great guides with working layout interactive examples but I am not going that far here – so on with the properties… Flexbox is best used…
Read MoreAutoPrefix Browser Vendors to your CSS style sheet with a Gulp Workflow
You can automatically add browser vendor prefixes to your CSS style sheet using a Gulp workflow and an AutoPrefixer package, this can be a huge time save and safety net to use newer CSS properties like flexbox that require cross browser prefixes. Create a package.json file Either run npm init in your project directory or just copy and…
Read MoreAdding a Full Width Background Image Behind Genesis Header with Beaver Builder
You can add a full width image background behind the site header in Genesis with Beaver Builder with a couple of CSS tweaks. By default when creating a Beaver Builder page in Genesis it’s width will be restricted by the theme’s CSS and you will get something similar to… First thing is…
Read More