Here is a cool piece of CSS to achieve this effect:
.post-image {
position: relative;
overflow: hidden;
}
.post-image img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.post-image:hover img {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
The generate_hooks_execute_php allows you to overwrite DISALLOW_FILE_EDIT and execute PHP within the Hooks Element.
However, it is recommended that if DISALLOW_FILE_EDIT is defined, then you should disable PHP execution in Hooks Element. Likewise, if you disable PHP execution in Hooks Element, you should define DISALLOW_FILE_EDIT as well.
If you do wish to overwrite it for some reason, add the following PHP snippet:
add_filter( 'generate_hooks_execute_php', '__return_true' );
This filter allows you to tell the entry meta to display on your custom post types. By default, it only shows for the post post type.
add_filter( 'generate_entry_meta_post_types', function( $types ) {
$types[] = 'my-post-type';
$types[] = 'recipes';
return $types;
} );
The generate_before_entry_title hook appears before the titles of your posts, including the archive and single post templates.
Usage
Please refer to the Using Hooks article to learn how to use this hook.
The generate_before_comments_container hook appears before the .comments-area element.
Usage
Please refer to the Using Hooks article to learn how to use this hook.
Responsive Breakpoints
The default responsive breakpoints for GP are 768px for mobile and 1024px for desktop with tablet in between.
This means that you can target CSS to certain device by using @media:
@media (max-width: 768px) {
/* CSS in here for mobile only */
}
@media (min-width: 769px) and (max-width: 1024px) {
/* CSS in here for tablet only */
}
@media (min-width: 1025px) {
/* CSS in here for desktop only */
}
IE10+ Specific Styles
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
Using our hide-on-* classes
To hide/show certain contents depending on devices, you can use the three handy built-in classes below:
hide-on-mobile
hide-on-tablet
hide-on-desktop
Some example usages:
– To hide certain menu items on mobile, you can add hide-on-mobile to the Custom Classes field.
– To show certain contents in desktop only, try this in the Text Editor:
Using a Hook Element, we can replace the default theme site header with our own HTML.
First, create a new Hook Element.
Then, select the header hook from the dropdown of available hooks.
When you do this, an option will appear below it asking if you』d like to disable the site header.
Checking this option will disable the default site header in the theme.
Now in the hook content you can build your own header using HTML, or you can use a shortcode to a template created in your favorite page builder.
Our Hooks add-on allows us to 「hook」 our own custom code into various areas of the theme without changing core files.
By default, the content added in hooks will show up on all pages and posts.
We can also use Conditional Tags to show hooks on specific pages.
We will need to Execute PHP for the conditional tags to work.
Here are some common examples:
Blog/Posts Page
This Content will ONLY show on the blog/posts page
This content is EXCLUDED from the blog/posts page
More info on The Main Page.
Static Front Page
This Content will ONLY show on the static front page
This content is EXCLUDED from the static front page
More info on The Front Page.
Latest Posts as Home page
This Content will ONLY show on the latest post page
This content is EXCLUDED from the latest post page
More info on The Blog Page.
Single Posts
This Content will ONLY show in single posts
This content is EXCLUDED from single posts
See more info on A Single Post Page.
Static Pages
This Content will ONLY show in static pages
This content is EXCLUDED from static pages
See more info on A PAGE Page.
Some users would like to hide the secondary navigation from unregistered visitors and display to logged in users only. This can be done with the following PHP snippet:
add_filter( 'has_nav_menu', 'tu_disable_secondary_nav_logged_out', 10, 2 );
function tu_disable_secondary_nav_logged_out( $has_nav_menu, $location ) {
if ( 'secondary' === $location && ! is_user_logged_in() ) {
return false;
}
return $has_nav_menu;
}
When we』re creating an Element, we always need to set Display Rules in order for them to apply on our live site.
If we』re adding a Hook or a Layout, these Display Rules won』t ever conflict, as we can have multiple hooks/layouts set to one condition without any issues.
However, we can only have one Page Hero per condition.
So what happens if we add multiple Page Heros, and apply them to the same condition?
When this happens, the older element (the one added first) will be applied to the condition, while the newer one will not show up.
So what if we want the newer one to show up?
In this case, we have two options:
a) Go into the older Element, and remove the condition you』re trying to apply to your new Element. This is ideal if it』s a specific condition (a specific page, etc..)
b) If the original condition is more broad (all pages, etc..), we can go into the older element and add the more specific condition we』re trying to set in the new Element within the Exclusions. This will exclude that specific condition from the older Element, freeing up the new Element to take its place.
So, if a Page Hero isn』t applying to one of your conditions, it means that condition is already occupied by a previous element.
Need an example?
Let』s say we added a Page Hero and applied it to all of our pages.
Now we added a new Page Hero and applied it to the About page, but this Page Hero doesn』t show up.
That』s because the first Page Hero is occupying that spot. So we need to go into our original Page Hero, and add the About page to the exclusions.
