• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

CSS Grid Columns

The tutorials in this archive enable you to use PHP code and/or CSS to display posts in columns including display: grid; The tutorials include methods which use pure CSS, PHP code and PHP combined with CSS. You'll also find more tutorials related to creating grid columns by using the search form on the primary sidebar. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Change The Order Of Genesis Responsive Menu Items

This solution enables you to re-order each menu item when the responsive drop down menu is displays at screen widths lower than 960px

CSS Grid Columns Nav Menu

Change Number of Product Columns On WooCommerce Archive Pages In Genesis

The code snippets in this tutorial enable you to change the number of columns WooCommerce products are displayed in for specific archive

CSS Grid Columns WooCommerce

Add Flexible Footer Widgets To Monochrome Pro

This tutorial provides several methods which enable you to add any number of footer widgets to the Monochrome Pro child theme by

CSS Grid Columns Footer Widgets Monochrome Pro

Add 3 Images Inline Below The Header Image In The Title Area

This tutorial provides the code which enables you to add 3 images below your default header image ( logo ) in Genesis like this : On

CSS Grid Columns Header Image Wellness Pro Theme

Custom Genesis Layout Setting Using CSS Grid

This code enables you to add a custom layout setting which uses CSS Grid. You can select the setting under Layout Settings on any single

CSS Grid Columns Layout

Click To Load More Videos In Page Template

This page template for Genesis enables you to add a button which loads more items when clicked. In this cases it loads videos added via a

CSS Grid Columns Custom Fields Video

2 Column Genesis Split Widgets 50% Width

The following solution uses CSS Grid so it won't work in I.E. Based on this question : I have two widgets but I’m still struggling

CSS Grid Columns

Genesis Infinite Scroll With Button To Load More Posts

This tutorial contains a Genesis archive template which displays your posts in a grid and also includes infinite scroll. The code

CSS Grid Columns Infinite Scroll

Genesis Yearly Template To List All Posts For Each Month In a Responsive Grid

This template enables you to lists all posts for each year on 1 page in Genesis. Posts will display under a monthly header so they're easy

CSS Grid Columns

Lifestyle Pro Blog Page Template Like Home

This template displays your posts exactly the same as the front page template in the Lifestyle Pro child theme by StudioPress. Here's the

Blog Page CSS Grid Columns Lifestyle Pro Theme

Genesis Popular Posts In Columns

This tutorial provides the CSS & CSS for Media Queries for 2 different solutions which enable you to display popular posts in

CSS Grid Columns Genesis Featured Posts

Show 1st Widget In Sidebar Before Content On Mobile

This code removes all widgets from the sidebar on mobiles except the first widget which is shown before the content like this : Video

CSS Grid Columns

Change Order of Sidebar Widgets On Mobiles

This solution enables you to make the 2nd widget in your primary sidebar display 1st and the 1st widget, display 2nd on smaller

CSS Grid Columns

Blog Page Grid In Genesis

The solution in this tutorial shows you how to display the posts on your blog page ( When using the full width layout ), or any other type

Blog Page CSS Grid Columns

No Sidebar Pro Front Page Using CSS Grid

No Sidebar Pro front page displays posts in uneven columns ( 58% & 38% ) by filtering the post class and adding custom classes using a

CSS Grid Columns No Sidebar Pro Theme

Replace Masonry With CSS Grid In Outfitter Pro

Outfitter Pro is the latest StudioPress child theme for WooCommerce which uses a masonry layout on the front page. This tutorial shows

CSS Grid Columns Outfitter Pro Theme WooCommerce

Magazine Like Archive In Genesis Sample Theme

The template in this tutorial shows you another method for using CSS grid to display archives in a grid layout with different sized columns.

CSS Grid Columns Magazine Pro Theme

Make Archive Pages Look Like Home Page Widget Areas

This tutorial enables you to display any type of archive exactly the same as the front page which uses widgets in Metro Pro. Based on

CSS Grid Columns Metro Pro Theme

Show All Posts On 1 Page In Grid With Equal Height

The template in this tutorial enables you to display all tag archives on 1 page like you see in the below screenshot. The template displays

CSS Grid Columns Taxonomy Terms

Widget Columns Using CSS Grid

The CSS examples in this tutorial enable you to display widgets added to 1 widget area in even or uneven responsive columns using CSS

CSS Grid Columns

  • « Go to Previous Page
  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Go to page 4
  • Go to page 5
  • Go to page 6
  • Go to Next Page »

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.