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.

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!

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.

generate_page_hero_terms_separator

generate_page_hero_terms_separator

Note: This filter requires the Header Element add-on in GP Premium.

The generate_page_hero_terms_separator filter allows us to alter or remove the comma between each category/tags inside Header Element.

Example

The PHP snippet below removes the comma:

add_filter( 'generate_page_hero_terms_separator', function() {
return '';
} );

Navigation Drop Point

Navigation Drop Point

When using a 「floated」 navigation (left or right), you can run into an issue on smaller screens where your navigation drops down below your site title/logo.

Issue with floated navigation on smaller screens

We can fix this with our Navigation Drop Point feature, found in Customize > Layout > Primary Navigation.

First, find the width at which your navigation drops down like this. One way to do is to use Chrome and open Developer Tools (right-click + Inspect). Now resize your browser, and you』ll see the width in the top right-hand corner.

Now set the width at which point you want things to drop down and center.

Now resize your browser and you』ll see it working.

wp_head

wp_head

Note: This hook is included in the Hooks Element add-on inside GP Premium.
The wp_head hook is a standard hook in WordPress, and should only includes things that go into the section of your website.
Things like tags, Google Analytics and stylesheets can go in this hook.
Usage
Please refer to the Using Hooks article to learn how to use this hook.

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.