Using ScrollNav to control long documents in WordPress

Controlling long document display on a web page can be greatly enhanced with a Javascript solution like ScrollNav which collates all of a defined HTML element in a document like a heading tag such as a h2, puts all of the elements…

Swap Header Right and Title/Logo Area in Genesis Sample Theme

How to swap Header Right and the Title/Logo Area mark up structure in Genesis Sample Theme. Genesis themes most of the time come with a header site title & description area on the left and widget area on the right,…

Add a Custom Header Image in Genesis Sample Theme

The Genesis Sample theme does not have a custom Header option in the Appearance sub-menu in WordPress Dashboard unlike all the other Genesis themes. Custom Headers are a native WordPress function that can be added to any theme including the Sample…

How to check for CSS errors in your stylesheet with CSS LINT

Css Lint

You’ve worked long and hard and slaved over your masterpiece but the CSS styles you wrote are just not being applied to your HTML, how can you check that the CSS syntax and formatting is correct? CSS Lint can do…

Add a Submit Button to the Search Input Field in Genesis Search Widget

By default the Search widget in a Genesis WordPress theme does not have a submit button, just hitting enter on the keyboard will do the trick but what if you deadset want that clickable submit button back. Using the Genesis…

Add a Full Width Responsive Header Image to a Genesis Theme

You can add in a full width responsive image header into a Genesis child theme by using the header element and set a background image to it by setting a CSS rule. Using the Genesis sample theme as an example, in…

Faux Full Width Page Titles in a Genesis Child WordPress Theme

  This layout calls for a full viewport width background color of the page title which is to appear on all pages, there are a defined amount of pages on the site with short titles. To achieve this effect using the…

Swap WordPress TwentyTwelve Mobile Menu to Slick Navigation Menu

slick-nav-menu-twentytwelve

How to use Slick Navigation menus in a WordPress theme, you can use the jquery responsive menus in any theme, this guide will use a clean default WordPress TwentyTwelve child theme, remove the existing responsive mobile menu used and use…

Make a Read More Link with Dashicons for Posts in Genesis Child Theme

By default in a Genesis Child and any WordPress theme the ‘read more’ link in a post is not a link and is an ellipse surrounded by square brackets[…] There is a WordPress filter that allows this to be changed…