Navigation Location

Navigation Location

The Navigation Location option can be found in Appearance > Customize > Layout > Primary Navigation. Prior to GP 1.3.42, it was named Navigation Position.

This option allows you to move your primary navigation to different areas on your website.

Each name is pretty self explanatory – simply select each option and you』ll see your navigation move instantly.

Of course, if you choose either of the sidebar options, that sidebar must be view-able on the page to see your navigation.

Navigation Drop point

One of the issues we see a lot is when the navigation is aligned right (or left), and the browser isn』t wide enough to fit the logo and navigation on one line.

To combat this, we』ve added a new option which allows you to specify a width at which point the navigation will drop down onto its own line and center.

Choosing your navigation location with a function

In some cases, you may need to change your navigation location a specific page, category etc..

There』s a filter available that allows you to do this:

add_filter( 'generate_navigation_location','tu_move_navigation' );
function tu_move_navigation( $location )
{
if ( is_front_page() ) {
return 'nav-float-right';
}

if ( is_archive() ) {
return 'nav-below-header';
}

return $location;
}

You can use any of the available  WordPress conditionals to determine which location your navigation will be moved to.

In the function above, I』m using  is_front_page() and is_archive() as examples.

These are the available IDs you can return:

nav-below-header
nav-above-header
nav-float-right
nav-float-left
nav-left-sidebar
nav-right-sidebar

If you want to remove the navigation from a page, simply return empty single quotes:

return '';

Learn how to add PHP here.

Header Element Template Tags

Header Element Template Tags

Page Headers have a list of dynamic template tags which you can add to your content.

These tags will pick up elements based on the page you』re currently viewing.

{{post_title}}

Will pick up the title of the page or post you』re currently viewing. It will also pick up the current taxonomy title if the Page Header is applied to a taxonomy (category, tag etc..).

{{post_date}}

Will print the published date of the post you』re currently viewing.

{{post_author}}

Will print the author of the post you』re currently viewing.

{{post_terms.taxonomy}}

This template tag will list the associated terms of the post you』re viewing. For example, if you want to display the categories the current post is added to, you would do this:

{{post_terms.category}}

If you wanted to display the product categories, you would do this:

{{post_terms.product_cat}}

For tags, you would do this:

{{post_terms.post_tag}}

As you can see, this template tag can be used to display terms from any taxonomy you want.

{{custom_field.name}}

This template tag allows you to display custom fields from the currently viewed post. This is one of the most powerful template tags, as it can be used to display nearly anything you like.

So we if we add a custom field and name it something like description, and give it a value:

We can then print this custom field inside our Page Header like this:

{{custom_field.description}}

If you want to print your featured image in your Page Header, you can do this:

{{custom_field._thumbnail_id}}

This will generate the full HTML for your featured image.

Adding a Logo/Header

Adding a Logo/Header

You can upload an image inside your header, typically referred to as a logo or header by going to 「Appearance > Customize > Site Identity」.

Then upload your header/logo using the Logo control.

If you have a regular logo uploaded, you』ll see an option to upload a retina logo. This method uses srcset to show your retina logo on screens that support it.

Starting in GeneratePress 2.2, you can also set the width of the logo using the slider.

You also have the option to add the site icon. Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps.

Changing the logo under specific conditions

In some cases, you might need to upload a different logo on a specific page/template. This option is built into our Page Header meta box, but can be changed using a filter as well.

For example, if we wanted a different logo on our About page, with about as our URL slug:

add_filter( 'generate_logo','tu_custom_about_logo' );
function tu_custom_about_logo( $logo )
{
// If we are on the about page, set our custom logo
if ( is_page( 'about' ) )
return 'URL TO OUR LOGO IN HERE';

// Or else, set the regular logo
return $logo;

}

You can use any of the available  WordPress conditionals to determine your sidebar layout.

Learn how to add PHP here.

Replacing URLs in Elementor

Replacing URLs in Elementor

Previously, the import process would replace URLs inside Elementor content automatically. These URLs include things like background images and static images inside Elementor widgets.

Unfortunately, the API in Elementor we were using was prone to fatal PHP errors whenever Elementor would make a change to them. To protect our users from these potential errors, we have removed the API in GP Premium 1.7.8.

This means users importing Elementor sites have one manual step they must complete once they finish importing.

Once the import is complete, you』ll see this message.

Clicking the Elementor > Tools > Replace URLs link will open a new tab, and take you to a settings page inside Elementor.

You』ll want to copy the Old URL and New URL values, and add them to this settings page.

Once you』ve added the URLs, click the Replace URL button.

Now you』re done!

generate_comment_form_title

generate_comment_form_title

The generate_comment_form_title filter allows you to change the default # thoughts on {post_title} text.

Default (string): # thoughts on {post_title}

Usage

Please refer to the Using Filters article to learn how to use this filter.

Example

add_filter( 'generate_comment_form_title', function() {
return 'What do others say';
} );

Adding Buttons

Adding Buttons

Some themes come built in with buttons using shortcodes. This is generally frowned upon in the WordPress community as it creates something called 「theme lock」 which means if you change your theme, your content will be littered with broken shortcodes instead of your buttons.

For this reason, we suggest using plain HTML and CSS to create buttons on your website. This way you』ll never lose them – they』ll always be buttons.

By default, GeneratePress has a .button class which you can use to create a button.

Button to Google

This button will be designed using the colors and typography in the Customizer.

You can also add your own CSS to style the button.

For example:

.button.sun-flower,
.button.sun-flower:visited {
background: #F1C40F;
color:#FFF;
}

.button.sun-flower:hover,
.button.sun-flower:active {
background: #E2B607;
color:#FFF;
}

If we add that CSS to our site, we can now add a button with those colors like this:

Your button text

Ghost buttons

Ghost buttons are really popular right now – you』ll see them everywhere including on generatepress.com. They have a transparent background with a border – when you hover, the transparent background fills in.

For example:

.button.ghost, .button.ghost:visited { background: transparent; border: 2px solid #FFF; } .button.ghost:hover, .button.ghost:active { background: #FFFFFF; color: #222222; border: 2px solid transparent; }

Gradient buttons

You can also create a gradient button with this CSS:

.button.gradient,
.button.gradient:visited {
border-radius: 5px; /*Adjust accordingly*/
background: rgb(255, 183, 65);
background: -webkit-gradient(linear, left top, left bottom, color-stop(49%, rgba(255, 183, 65, 1)), to(rgba(214, 38, 38, 1)));
background: linear-gradient(180deg, rgba(255, 183, 65, 1) 49%, rgba(214, 38, 38, 1) 100%);
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
background-repeat: repeat-y;
background-size: 100% 90px;
background-position: 0 -30px;
}
.button.gradient:hover,
.button.gradient:active {
background-position: 0;
}

To fine tune the linear gradient, we recommend using this site: https://cssgradient.io

More button styles

Here』s some more button styles you can add to your CSS:

.button.medium {
font-size: 25px;
}

.button.large {
font-size: 35px;
}

.button.sun-flower,
.button.sun-flower:visited {
background: #F1C40F;
color:#FFF;
}

.button.sun-flower:hover,
.button.sun-flower:active {
background: #E2B607;
color:#FFF;
}

.button.orange,
.button.orange:visited {
background: #F39C12;
color:#FFF;
}

.button.orange:hover,
.button.orange:active {
background: #E8930C;
color:#FFF;
}

.button.carrot,
.button.carrot:visited {
background: #E67E22;
color:#FFF;
}

.button.carrot:hover,
.button.carrot:active {
background: #DA751C;
color:#FFF;
}

.button.pumpkin,
.button.pumpkin:visited {
background: #D35400;
color:#FFF;
}

.button.pumpkin:hover,
.button.pumpkin:active {
background: #C54E00;
color:#FFF;
}

.button.alizarin,
.button.alizarin:visited {
background: #E74C3C;
color:#FFF;
}

.button.alizarin:hover,
.button.alizarin:active {
background: #DB4334;
color:#FFF;
}

.button.pomegranate,
.button.pomegranate:visited {
background: #C0392B;
color:#FFF;
}

.button.pomegranate:hover,
.button.pomegranate:active {
background: #B53224;
color:#FFF;
}

.button.turquoise,
.button.turquoise:visited {
background: #1ABC9C;
color:#FFF;
}

.button.turquoise:hover,
.button.turquoise:active {
background: #12AB8D;
color:#FFF;
}

.button.green-sea,
.button.green-sea:visited {
background: #16A085;
color:#FFF;
}

.button.green-sea:hover,
.button.green-sea:active {
background: #14947B;
color:#FFF;
}

.button.emerald,
.button.emerald:visited {
background: #2ECC71;
color:#FFF;
}

.button.emerald:hover,
.button.emerald:active {
background: #28BE68;
color:#FFF;
}

.button.nephritis,
.button.nephritis:visited {
background: #27AE60;
color:#FFF;
}

.button.nephritis:hover,
.button.nephritis:active {
background: #219D55;
color:#FFF;
}

.button.river,
.button.river:visited {
background: #3498DB;
color:#FFF;
}

.button.river:hover,
.button.river:active {
background: #2A8BCC;
color:#FFF;
}

.button.ocean,
.button.ocean:visited {
background: #2980B9;
color:#FFF;
}

.button.ocean:hover,
.button.ocean:active {
background: #2475AB;
color:#FFF;
}

.button.amethyst,
.button.amethyst:visited {
background: #9B59B6;
color:#FFF;
}

.button.amethyst:hover,
.button.amethyst:active {
background: #8D4CA7;
color:#FFF;
}

.button.wisteria,
.button.wisteria:visited {
background: #8E44AD;
color:#FFF;
}

.button.wisteria:hover,
.button.wisteria:active {
background: #80399D;
color:#FFF;
}

.button.wet-asphalt,
.button.wet-asphalt:visited {
background: #34495E;
color:#FFF;
}

.button.wet-asphalt:hover,
.button.wet-asphalt:active {
background: #263849;
color:#FFF;
}

.button.midnight-blue,
.button.midnight-blue:visited {
background: #2C3E50;
color:#FFF;
}

.button.midnight-blue:hover,
.button.midnight-blue:active {
background: #22303F;
color:#FFF;
}

.button.silver,
.button.silver:visited {
background: #BDC3C7;
color:#FFF;
}

.button.silver:hover,
.button.silver:active {
background: #ACB2B7;
color:#FFF;
}

.button.concrete,
.button.concrete:visited {
background: #7F8C8D;
color:#FFF;
}

.button.concrete:hover,
.button.concrete:active {
background: #6D7B7C;
color:#FFF;
}

.button.graphite,
.button.graphite:visited {
background: #454545;
color:#FFF;
}

.button.graphite:hover,
.button.graphite:active {
background: #363535;
color:#FFF;
}

Learn how to add CSS here.

Adding PHP

Adding PHP

In some cases you may need to add a function to your website, either to hook something into the theme, or use a filter to change something in the theme.

When working with PHP, you want to make sure you have access to your server via FTP or File Manager (through your hosting control panel). This is due to how unforgiving PHP is, if there』s an error in the code, your site can turn into a blank white page. To fix this, simply go into your server and delete the code you added.

Code Snippets

The Code Snippets plugin is a very cool way to add PHP snippets to your website. You can activate and deactivate certain snippets, and even adds notes about what they do. I believe it even has better error handling to avoid the PHP error scenario I mentioned above.

To install it, simply go to Plugins > Add New and search for Code Snippets.

Create a Plugin

If you don』t want to use the Code Snippets plugin mentioned above, you can create your own plugin.

Usually, creating a plugin is kind of difficult, but we can actually use a plugin to make creating a plugin easier (still with me?).

First, install Pluginception by going to Plugins > Add New and searching for Pluginception.

Now that it』s activated, go to Plugins > Create New Plugin.

Name it something super specific to you so it doesn』t conflict with any other plugins, and create it.

Now you can add your functions to the plugin file.

Use a Child Theme

If you』re already using a child theme, you can use the functions.php file to add your PHP.

Header Presets

Header Presets

Header layout options for GP can be found in 「Appearance > Customize > Layout > Header」.

In starting in GeneratePress 2.2, the Header Presets options are added in the Customizer control to serve as a shortcut for specific header layouts.