Interested in checking out the upcoming WordPress editor, Gutenberg and want a JumpStart? Here you can find sample content of several Gutenberg blocks that you can simply paste into a test page on your site. This could be useful for example, in seeing if/to what extent your theme is Gutenberg-ready and having the page ready […]
Free Content
Equal height Content and Sidebar in Genesis Sample 2.6.0
Looking to set the same height for content and sidebar in Genesis? Flexbox to the rescue. This tutorial provides the code change to replace floats with Flexbox in Genesis Sample 2.6.0’s CSS for equal height (determined by whichever is taller) content and sidebar columns. In the 960px min-width media query inside style.css, replace /* Content […]
Linting and Formatting in Visual Studio Code for WordPress
In the past, I wrote about setting up WordPress PHP code standards in Visual Studio Code. This article shows how we can go one step further and set up JavaScript & CSS linting (code analysis for potential errors) and pretty printing / auto formatting for PHP, CSS & JS. We are going to use Node, […]
BrowserSync in Laravel Valet
Updated on March 07, 2019 For Mac users that do not have the need to create local sites with different PHP versions, Laravel Valet is perhaps the lightest, fastest and best localhost development environment for setting up WordPress (or any other static/dynamic) sites as of today. A few reasons why I love Valet: Lightweight, super […]
How to dynamically load posts on click using Ajax in Genesis
This members-only tutorial provides the steps to show post title links in the sidebar and using Ajax to fetch and load the corresponding entry when a title is clicked based on this excellent article from wpmudev. While the tutorial has been written for Genesis Sample, it should work with a few adjustments in any Genesis […]
CSS Grid with Float Fallback
Sample CSS for a 3-column grid with the number of columns changing to 2 from 768px & below and to 1 from 500px and below with floats fallback for non-supporting (read, outdated like IE) browsers. Given this HTML: the CSS using CSS Grid for all modern browsers with float fallback for IE: .videos { display: […]
Improvements in Genesis Sample 2.6.0
Updated on April 25, 2018 The recently released Genesis Sample 2.6.0 is close to perfection as my ideal starter Genesis child theme. That said, there are still a few things that could be improved in my opinion and I list the theme changes and fixes below. Most of these will hopefully be fixed by StudioPress […]
Full Width Widgetized Homepage in Genesis Sample 2.6.0
This article provides the steps to set up a full-width widgetized front page (with fixed-width content) in Genesis running on Genesis Sample 2.6.0 and above based on this article from Bill Erickson. Step 1 Let’s register 4 front page widget areas. Add the following in child theme’s functions.php: // Registers front-page widget areas. for ( […]
How to relocate Posts page title in Digital Pro
This tutorial provides the steps to relocate the title of Posts page (.posts-page-description) in Digital Pro from its default location (.site-inner > .content-sidebar-wrap > .content) to below the site header. Before: After: Step 1 If you have not already, create two static Pages named say, Home and Blog. At Settings > Reading, set Home as […]
Custom Navigation Theme Location in Genesis
Updated on October 14, 2020 In the Genesis Facebook group, a user asked: This is a question for the Genesis devs here: I’ve noticed that when I create a custom menu location and a custom menu using the wp_nav_menu() function, submenu support isn’t available for those menus. How can I create a custom menu in […]
Recent Comments