The generate_credits hook is where your site copyright message is placed.
Usage
Please refer to the Using Hooks article to learn how to use this hook.
Using Hooks
GeneratePress uses the WordPress Hooks API to insert various hooks throughout the theme.
These hooks allow you to insert functions into various areas inside the theme.
To view the available hooks, please refer to the Hooks category.
Usage
add_action( 'your_hook_name','example_function_name' );
function example_function_name() { ?>
Insert your hook contents in here.
<?php }
In the example above, replace your_hook_name with the name of the hook you』re wanting to use, like wp_head or generate_before_header.
Then replace example_function_name with a unique function name, something specific to you. My name is Tom Usborne, so I would prefix my function like this for example: tu_insert_into_wp_head
Learn how to add PHP here.
Menu Plus Overview
The Menu Plus add-on in GP Premium adds various menu related options in the Customizer.
To use this add-on, first make sure GP Premium is installed, and that the add-on is activated.
All of the Menu Plus options are added in Customize > Layout inside their respective Sections.
Please refer to the related articles below for information on specific options.
Video Overview
Adding Featured Images
WordPress featured images are used to display a hero image above your content in your single posts, and a thumbnail/smaller image within your blog post excerpts on your blog page/archives.
The featured image metabox is a core WordPress metabox, and can be found at the bottom right (in most cases) of your edit page/post area.
Click the 「Set featured image」 link and then choose/upload your image from your Media Library.
Once selected, click the 「Set Featured Image」 button.
To remove the featured image, click the 「Remove featured image」 link.
Responsive Videos
When we embed videos from services like YouTube and Vimeo, the videos come inside an iframe and are usually not responsive. The width of the video is confined to the width of the container, but the height never changes causing it to be very tall and not so wide.
We can make our embedded videos responsive by wrapping them in an HTML element, like this:
Then, we need to add this CSS:
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Learn how to add CSS here.
Doing this will make our embedded videos 100% responsive.
Header Widget
By default, there』s a header widget area available to you in 「Appearance > Widgets」 or 「Customize > Widgets」.
You can put any kind of widget in this area and it will show up on the right side of your header area.
By default it』s set to float right and be 50% width of your header. You can adjust this with some CSS:
.header-widget {
float: right;
max-width: 50%;
}
Showing your header widget below other header elements on mobile
Sometimes people want to display the header widget below their other header elements while on mobile. This is achievable with some CSS:
@media (max-width: 768px) {
.inside-header {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.site-branding {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
margin-left: auto;
margin-right: auto;
}
.site-logo {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
margin-left: auto;
margin-right: auto;
}
.header-widget {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
margin-left: auto;
margin-right: auto;
}
}
Debugging Tips
Sometimes you may run into problems using GeneratePress and other plugins, and you』ll need to debug to know exactly what』s going on so we can fix it.
1. Deactivate all of your non-GP plugins – does the issue still exist? If not, activate each plugin one by one until the issue happens again. This way, you can pinpoint the problem plugin.
2. Turn on WP DEBUG – do any errors display in your Dashboard or on your live site?
3. If you』re getting a white screen while Customizing or somewhere else, try increasing your memory limit.
4. Activate the core WordPress theme (TwentySeventeen) – does the issue still exist? If so, we know it』s not a GeneratePress specific issue.
5. Check your error_log (or ask your hosting to) – are there any big errors in there?
Separating Space
Note: This option requires the Spacing add-ons in GP Premium.
The Separating Space option found in Appearance > Customize > Layout > Container allows you to choose the amount of space between your elements when your content layout is set to Separate Containers.
This option is also useful even if you』re not using separate containers, as it controls the amount of space between your blog posts when they』re using masonry or columns.
Page Header Image
The Image section of the Page Header meta box allows you to upload a custom image, or set your featured image.
In most cases, you should use the Featured Image instead of uploading a custom image.
The custom image can be useful if you already have a featured image in use, and want a different image for your page header.
Page Header Image
Once you have a custom or featured image set, you』ll see options available to link the image and resize it.
Page Header Image – More Options
Spacing Overview
The Spacing add-on in GP Premium adds various spacing and padding options in the Customizer.
To use this add-on, first make sure GP Premium is installed, and that the add-on is activated.
All of the Spacing options are added in Customize > Layout inside their respective Sections.
Please refer to the related articles below for information on specific options.
Video Overview