Using Columns & Masonry in the Blog

Using Columns & Masonry in the Blog

Note: These options require the Blog add-on in GP Premium.
Starting in GP Premium 1.5, the columns and masonry options are combined in the same panel.

Display posts in columns – Enable columns for posts to see the rest of the options.
Columns – Set the number of columns.
Make first post featured – Enable the latest post to be featured.
Display posts in masonry grid – Enable masonry grid with columns.

Using full width for featured post
The CSS snippet below enable full width for the featured post:
.generate-columns-container .featured-column {
float: none;
width: 100%;
}
Learn how to add CSS here.
Adding columns to your custom post type
By default, columns only apply to the post post type. However, you can add columns to your custom post type using the filter:
add_filter( 'generate_blog_columns','tu_portfolio_columns' );
function tu_portfolio_columns( $columns ) {
if ( is_post_type_archive( 'portfolio' ) ) {
return true;
}

return $columns;
}
You can use this filter to enable or disable columns under any conditions you need by using the WordPress conditional tags.
Learn how to add PHP here.
Changing the number of columns
In some cases, you might want a different number of columns on certain custom post types, categories etc.. We can use a filter for this as well.
For example, if we want to change our column count on the search page:
add_filter( 'generate_blog_get_column_count','tu_search_column_count' );
function tu_search_column_count( $count ) {
if ( is_search() ) {
return 33;
}

return $count;
}
33 means 33%, which is 3 columns.
50 would be 50%, 2 columns.
20 would be 20%, 5 columns.
And so on..
You can use this filter under any conditions you need by using the WordPress conditional tags.
Adding masonry to your custom post type
By default, masonry only applies to the post post type. However, you can add masonry to your custom post type using the filter:
add_filter( 'generate_blog_masonry','tu_portfolio_masonry' );
function tu_portfolio_masonry( $masonry ) {
if ( is_post_type_archive( 'portfolio' ) ) {
return 'true';
}

return $masonry;
}
You can use this filter to enable or disable masonry under any conditions you need by using the WordPress conditional tags.
Learn how to add PHP here.

Navigation Widths & Alignment

Navigation Widths & Alignment

Navigation layout options for GP can be found in Appearance > Customize > Layout > Primary Navigation.
Navigation Width
The Navigation Width option is the outer container of your navigation. This outer container is what your navigation background color or image is applied to.
Setting this to Full will make your background color/image span the entire width of your screen.
Setting it to Contained will contain it to the width of your container, set in Appearance > Customize > Container.
Inner Navigation Width
The Inner Navigation Width option refers to the inner container which holds your menu items.
Setting this to Full will make your menu items span the entire width of your screen.
Setting it to Contained will contain your menu items to the width of your container.
Navigation Alignment
You can choose to align your menu items to the left, center or right.

generate_leave_reply

generate_leave_reply

Note: This filter has been removed starting in GeneratePress 2.0.
The generate_leave_reply filter allows you to change the default Leave a Reply text.
Default (string): Leave a reply to %s
Usage
Please refer to the Using Filters article to learn how to use this filter.

generate_mobile_header_logo

generate_mobile_header_logo

The generate_mobile_header_logo filter allows you to change the mobile header logo.
Default (URL): Your logo set in Customize > Layout > Header.
Usage
Please refer to the Using Filters article to learn how to use this filter.
Example
If you want to show a different mobile header logo inside categories, you could do this:
add_filter( 'generate_mobile_header_logo','lh_category_mobile_header_logo' );
function lh_category_mobile_header_logo( $logo ) {

// Return our category logo URL
if ( is_category() ) {
return 'URL TO YOUR CATEGORY LOGO';
}

// Otherwise, return our default logo
return $logo;
}

Secondary Navigation Widths & Alignment

Secondary Navigation Widths & Alignment

Secondary navigation layout options can be found in Customize > Layout > Secondary Navigation.
Navigation Width
The Navigation Width option is the outer container of your navigation. This outer container is what your navigation background color or image is applied to.
Setting this to Full will make your background color/image span the entire width of your screen.
Setting it to Contained will contain it to the width of your container, set in Customize > Layout > Container.
Inner Navigation Width
The Inner Navigation Width option refers to the inner container which holds your menu items.
Setting this to Full will make your menu items span the entire width of your screen.
Setting it to Contained will contain your menu items to the width of your container.
Navigation Alignment
You can choose to align your menu items to the left, center or right.

generate_cancel_reply

generate_cancel_reply

Note: This filter has been removed starting in GeneratePress 2.0.
The generate_cancel_reply filter allows you to change the default Cancel reply text.
Default (string): Cancel reply
Usage
Please refer to the Using Filters article to learn how to use this filter.

generate_navigation_logo

generate_navigation_logo

The generate_navigation_logo filter allows you to change the navigation logo.
Default (URL): Your logo set in Customize > Layout > Primary Navigation.
Usage
Please refer to the Using Filters article to learn how to use this filter.
Example
If you want to show a different navigation logo inside categories, you could do this:
add_filter( 'generate_navigation_logo','lh_category_navigation_logo' );
function lh_category_navigation_logo( $logo ) {

// Return our category logo URL
if ( is_category() ) {
return 'URL TO YOUR CATEGORY LOGO';
}

// Otherwise, return our default logo
return $logo;
}

Changing Navigation Colors

Changing Navigation Colors

The Colors add-on in GP Premium allows you to change the menu item colors in the customizer.
If you don』t have GP Premium, you can tweak the below CSS to your liking:

/* MENU ITEMS */

.main-navigation {

background-color: #222222;

}

.main-navigation .navigation-search input[type="search"],

.main-navigation .navigation-search input[type="search"]:active {

color: #FFFFFF;

background-color: #1e72bd;

}

.main-navigation .navigation-search input[type="search"]:focus {

color: #FFFFFF;

background-color: #1e72bd;

}

.main-navigation .main-nav ul li a,

.main-navigation .menu-toggle {

color: #FFFFFF;

}

/* SUB-NAVIGATION */

.main-navigation .main-nav ul ul li a {

background: #222222;

color: #FFFFFF;

}

/* MENU ITEM HOVER */

.main-navigation .main-nav ul li:hover > a,

.main-navigation .main-nav ul li:focus > a,

.main-navigation .main-nav ul li.sfHover > a {

color: #FFFFFF;

background-color: #1e72bd;

}

/* SUB-NAVIGATION HOVER */

.main-navigation .main-nav ul ul li:hover > a,

.main-navigation .main-nav ul ul li:focus > a,

.main-navigation .main-nav ul ul li.sfHover > a {

color: #FFFFFF;

background-color: #4f4f4f;

}

/* CURRENT ITEMS */

.main-navigation .main-nav ul li[class*="current-menu-"] > a {

color: #FFFFFF;

background-color: #1e72bd;

}

.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a,

.main-navigation .main-nav ul li[class*="current-menu-"]:focus > a,

.main-navigation .main-nav ul li[class*="current-menu-"].sfHover > a {

color: #FFFFFF;

background-color: #1e72bd;

}

/* SUB-NAVIGATION CURRENT ITEMS */

.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {

color: #FFFFFF;

background-color: #4f4f4f;

}

.main-navigation .main-nav ul ul li[class*="current-menu-"]:hover > a,

.main-navigation .main-nav ul ul li[class*="current-menu-"]:focus > a,

.main-navigation .main-nav ul ul li[class*="current-menu-"].sfHover > a {

color: #FFFFFF;

background-color: #4f4f4f;

}

view raw

gistfile1.txt

hosted with ❤ by GitHub

generate_inside_mobile_header_menu

generate_inside_mobile_header_menu

Note: This hook is included in GP Premium.
The generate_inside_mobile_header_menu hook appears inside the .menu-toggle element within the mobile header.
Usage
Please refer to the Using Hooks article to learn how to use this hook.