The Display Posts Shortcode plugin lets you display a list of posts based on any criteria. By default it displays titles only. The example below makes it display the post’s title and full content.
It’s a great idea to include the Published Date and Last Updated date on content you update regularly. This will let your readers know the content isn’t out-dated. WordPress stores a published date and modified date for every post on your site. You can use Limit Modified Date to make minor changes to an article (like fixing a typo) without changing the modified date. There are a few ways you can display the modified date on your articles. If you’re using a Genesis theme, you can use shortcodes in the Post Info and Post Meta areas to display dynamic content (more information). Genesis includes shortcodes for both the published date ( But if you use the shortcode for modified date, it will always appear, even if it’s the same as the published date. I personally prefer to only show the modified date if it’s more than a week later than the published date. Add the code below to your theme’s functions.php file, or a core functionality plugin. You can then use If you prefer including the code directly in your theme, include the same code listed above. Then add the following to your theme file (ex: single.php) where you’d like the published and modified date to appear. Yoast SEO schema uses the In Google’s Structured Data Guidelines, they recommend: Try to use the most specific applicable type and property names defined by schema.org for your markup. I’m working on a product review website, so most articles are better classified with the The article below is a guide for developers extending Yoast SEO schema using product reviews as the example. If you only want product review schema on your website, you can install my Product Review Schema for Yoast SEO plugin. You do not need to make any code changes. “Product Review Schema for Yoast SEO” is available for free on GitHub. The key to extending Yoast SEO schema is the This filter lets you add (or remove) pieces of the schema graph. Yoast SEO creates the large, structured graph by assembling all of these pieces. Each graph piece is packaged as a class. In this case, I’m using my custom All graph piece classes should be implemented using the The interface requires your class contain two methods: Yoast SEO could add additional methods to the interface in the future, which would also be required in your class. To make my customizations a bit more future-proof, I’ll extend an existing class rather than build my own. If a future update to Yoast SEO adds another required method, my class will automatically have it because I’m extending a core class that will also include it. All of the Yoast SEO schema classes can be found in /wordpress-seo/frontend/schema (see here). I’ll use the The See /wordpress-seo/frontend/schema/class-schema-context.php for more information. We need to make If we were not extending an existing class, you could leave that line out and only have Since I’m extending the For my Rather than using The Make sure you read Google’s guidelines for your schema type, and use the Structured Data Testing Tool often to make sure you have everything correct. In my case, the Product Review schema requirements include When building your graph piece, it’s important that you include an I added a filter to the end of my To keep the I created the Below is the completed class. I recommend you look at the Product Review Schema for Yoast SEO plugin on GitHub for more information on how this all comes together: Giving away eBooks, white papers, and other valuable content is great way to grow your email list. On Duane Smith’s website (one of my design partners), we recently added a Free Resources section with downloadable eBooks. With WPForms it’s easy to build a newsletter signup form. You can include a link to the PDF in the Confirmation Message shown after the form is submitted. In this case, I want to use the same form with dozens of eBooks. I don’t want to create a separate form for each download. Here’s the content creation workflow when adding a new eBook: I customized the Confirmation Message text to include a button to download the PDF uploaded to this page. I’m appending our button to the end of the existing confirmation message because it’s the same for all downloads. I recommend you place this in a Core Functionality plugin so you don’t lose the functionality when changing themes. Even though we don’t link to the PDF directly on any page – visitors can only access the link by submitting the form – Google may still find it by digging through your uploads directory. I recommend updating your robots.txt file to disallow indexing of PDF files. You can either edit it directly on the server via FTP, or use Yoast SEO’s file editor. Go to SEO > Tools > File Editor. Click “Create robots.txt file” if you don’t see the box shown below. Add I’m a big fan of the new schema functionality in Yoast SEO. It includes all the information search engines want to see, and it’s incredibly extensible through filters and extending classes. If a post has a featured image, Yoast SEO will add a graph piece for I recently updated my site to be Native AMP, and the next day I received a Google Search Console email describing issues with some of my articles. Google has slightly different schema requirements for AMP pages. These are what caused my warnings above: To fix this issue, I’m using my site logo as the default image, which is set in SEO > Search Appearance > Organization Logo. Make sure the image you have uploaded there is at least 1200px wide. Note: this only applies to the After building a few AMP sites for clients, I was surprised by how easy it can be to build a completely custom theme that’s AMP compatible. I spent an hour yesterday converting this website to native AMP. You can check the AMP validator to see my posts are valid AMP pages. I’ll walk you through the basics of setting up an AMP site, discuss areas that tripped me up, and provide some helper functions to make AMP site development easier. Quick Links AMP is Google’s approach to dramatically speeding up the display and development of websites (more info). AMP uses a limited and restricted form of markup they call AMP HTML. It also limits the amount of CSS you can have on a page to 50kb, and no JavaScript. With Cloudflare you can display your Real URL rather than the Google URL for your AMP cached website. Why should you use AMP? The official AMP plugin takes care of most of the hard work. It converts your site’s markup to AMP HTML when viewing the AMP version of your site, so you only have to maintain standard HTML markup in your theme. It also includes CSS Tree Shaking, which determines exactly what CSS is needed on the current page and creates a page-specific stylesheet with just those styles. When you view the source of an AMP page, it includes a comment at the top showing you the breakdown of CSS: It adds a “Validate AMP” item to the admin bar so you can quickly see if the current page is valid or invalid: It also adds an “Error Index” in the backend that lets you track down which pages have errors and what plugin or theme is causing it. The errors shown below are from an old version of WPForms. The current version has full AMP compatibility, so all my pages with forms are fully AMP compatible. When you first install the AMP plugin, you’re asked which template mode you’d like to use. Native is the recommended approach, and means you serve only AMP pages to all visitors. Your canonical URL is AMP, and there’s no non-AMP versions of your pages. This requires the most work to implement because you have to meet the strict AMP requirements on your website that all users access. You can use native even when serving a mix of valid and invalidated pages (see below). This tutorial focuses on using the native template mode. Transitional lets you maintain your canonical URL as non-AMP, and create a paired AMP page using your own template files. Adding Reader is the most basic option. Your main (canonical) URLs are non-AMP and use your theme, but the paired AMP version uses a completely different theme provided by the AMP plugin. When you first install AMP and turn on Native mode, it will run a few pages through the validator. You’ll likely have errors from your theme and plugins loading JavaScript. When I converted my site to AMP, I started by going through the plugins and figuring out what changes were necessary to ensure AMP compatibility. I then went through the JavaScript files in my theme to determine what I could live without (Recommended Reading on the right no longer floats next to content), what I’d leave in place as invalid pages (live search on Code Snippets), and what I needed to rebuild without Javascript (my mobile menu). Any time you install a plugin, AMP re-runs the validation on a few key pages to see if it broke anything. You’ll often be notified of validation errors because the plugin included JavaScript. When a validation error occurs, you have a few options to consider: If it only affects a few pages, you should consider the costs & benefits of leaving the page invalidated. By default, the AMP plugin will sanitize validation errors, removing the JavaScript, but you can “Reject” the validation error from being sanitized. The page will technically no longer be an AMP page (the It won’t hurt your SEO or make the site inaccessible to users. A contact form is a good example. Many contact form plugins use JavaScript for field validation, conditional logic, spam protection, and more. Your contact page will never appear in a news carousel, so the cost of your contact page being invalidated is minimal. The benefit of including a form on your contact page is high. However, if your form appears in every post (like my Newsletter Signup form) you will need to use an AMP-compatible form plugin like WPForms. Many plugins that include JavaScript will provide some method of disabling it using a filter. Before you disable the JavaScript, I recommend reading through it to see exactly what it does so you know what features won’t work without it. I use Shared Counts for social sharing buttons on articles, which loads a JavaScript file for the following features: I’m not using the Email Sharing button, and the other JS feature aren’t super important to me. Here’s how to disable JavaScript in Shared Counts (more information): Note: Shared Counts will soon be AMP compatible, so you’ll get all the technical benefits (email sharing, social tracking…) without having to make any code changes on your AMP site. On a client site, I used a similar approach to disable JavaScript in Yoast Local SEO: On another client website we used the Page Links To plugin for a few redirects. It loads a global JavaScript file for opening a redirect in a new window if you have that selected in the backend. We disabled the JavaScript because we didn’t need that feature. I’m using my helper function You can’t always remove the JavaScript from a plugin – it’s often vital to the functionality. If you’re building a Native AMP website, be prepared to custom build features that you otherwise might have used a plugin for. There’s a huge number of AMP components you can use to build your own custom functionality. For instance, in the upcoming Shared Counts release for AMP compatibility we are using You might find it easier to build functionality with AMP than without because you can leverage all of these pre-built components. To make a modal popup window, simply enqueue the My typical mobile menu toggles CSS classes when a user clicks the mobile menu icon or a submenu expanding icon. You can replicate this functionality using We’ll then use Then when the button is tapped, set the value of Finally, let’s toggle a class on the menu itself, adding a class of This can get a bit confusing, so I wrote some helper functions to simplify the code (see below). My mobile menu toggle now looks like: And my nav menu looks like: We use the same approach for submenu toggles, but each one updates a different variable so you know which submenu is open. I use I’m also using a helper function (shown below) for generating all the AMP code with a unique variable based on the theme location, submenu index, and depth. When a submenu toggle is clicked, its class changes to For simple yet important features like navigation, it’s a good idea to provide a JavaScript fallback in case AMP is ever disabled. You can see the global.js file in my starter themes for the JavaScript I am using. I only load global.js if If the AMP plugin is disabled, the JavaScript file loads and the navigation still works. This is one of the areas where Genesis simplifies AMP development. Genesis 3.0 includes AMP integration as a key feature. Rather than adding all the code above yourself, you can use the You can use this feature right now if you’re using the latest version of Genesis. Analytics with AMP is tricky. You can’t simply drop your Google Analytics code in your site because it’s JavaScript. There’s an AMP component built specifically for this, amp-analytics, which can be used for Google Analytics or any other analytics tool. You specify your analytics settings and triggering events in a JSON object. If you have the AMP for WordPress plugin installed, go to AMP > Analytics to configure (screenshot). Alternatively, you can use Monster Insights Pro which is 100x easier. Their AMP addon will automatically generate the correct analytics code for you, and it will include all of the additional tracking they provide (ex: form conversions, file downloads, outbound links…). Monster Insights also includes Session Unification for when a visitor goes from an AMP page to a non-AMP page on your site, if you’re using Transitional or Reader mode. I use Monster Insights for my website and recommend it to my clients. To simplify the readability and re-usability of the AMP-specific code on this website, I built the following helper functions. These can be found in The Gutenberg block editor organizes your content into discrete blocks, and WordPress includes functions for easily accessing the individual blocks within a post. Here’s a quick summary of how the functions work, and examples of them in use. Jump to Section: This function converts the HTML comments and markup stored in Usage: The After running it through This function takes a single parsed block object and returns the rendered HTML for that block. Usage: On my portfolio archive page, every 4th project includes a blockquote. You could pull this directly from the content of the portfolio item by looping through the blocks and displaying the Add this function to your theme, then call In a previous tutorial I showed how to dynamically build a table of contents by parsing the HTML. Converting the HTML to blocks makes this much easier. You loop through the blocks and find the The example below makes a simple ordered list of all the headings in the page. You could take this a step further and use Unfortunately WordPress does not store the heading’s ID as an If you have built a custom block with Advanced Custom Fields, you can easily access all the block data using this method. ACF generates dynamic blocks. Rather than storing actual HTML, it stores all of the block data in the HTML comments and then dynamically renders it using the PHP file or function you specify. I’m working on a site that includes a “Service” block. It has fields for title, anchor link, content, and “success story” (a linked post from elsewhere). The homepage includes links to the top-level pages, as well as anchor links to each individual service block. I’m using Written by Gary Jones, originally published on GaryJones.io, and reposted here with permission. There’s a line in the Genesis Sample theme, commented with “Start the engine”. All of the child themes by StudioPress have it. So do most child themes in the community. However, it’s not needed. More specifically, it doesn’t have to be needed. It seems innocuous enough, so what’s the problem? This article looks at the drawbacks of this start the engine approach while exploring some of the advantages an alternative setup function may provide. Let’s start at the beginning. Child themes for the Genesis Framework by StudioPress, typically have a This line has been present since the very first version of Sample, and as such, it’s in every single StudioPress theme, and by a de facto standard, many child themes in the Genesis community. Most people who have a passing understanding of PHP within WordPress themes should understand the code snippet above. Line one takes us into PHP mode, line two is a single-line comment, and line three is where the fun starts. It includes, once, a file called The Basically, that start the engine line makes every single bit of Genesis Framework load up straight away. Let’s briefly discuss what some might say are the advantages of this method: That’s probably about it. Before going through the disadvantages, I want to introduce an alternative, so that we can make a comparison. The alternative is a setup function. Credit where credit is due, I call this the Bill Erickson Approach, as it was Genesis legend Bill Erickson who I first saw suggest this (though he may have got it elsewhere). [Note from Bill: I got the idea from the default WordPress theme at the time, TwentyTwelve] Here’s a trimmed example from Utility Pro by Carrie Dils. We’ll go through the reasoning in a moment: Now that we’ve seen an example, let’s explain what it is. A setup function is one (or more) function(s) that includes much of the theme’s setup code, such as adding or removing theme support, adding or removing post type support, adding image sizes, defining menus for Genesis, registering widget areas, etc. It’s not just for child themes, either. All of the default Twenty* themes have their own setup function (here’s TwentySeventeen’s), and Justin Tadlock has written about creating a theme setup function for themes in general. For Genesis, we don’t call the setup function immediately, rather we hook it into the action hook that only fires after Genesis has finished loading, While the example shows a single function, it would be equally possible to have multiple functions that organise the code into logical groups of function calls, and hook them all into the same hook and priority. There are a few advantages with this suggested approach that are worthy of explanation. These are: Our code is inherently coupled to the file name of another code base (Genesis), and this is a bad idea. If it ever gets renamed (and with Genesis 3.x, that is a possibility), your code will throw a fatal error. You could do a The solution brings us to our next point. The whole point of child themes historically requiring that Genesis file, is so all of Genesis loads up first and we can use the Genesis functions. But here’s a little secret. The default behaviour for WordPress is to load the parent theme after the child theme. It will happen automatically. We should honour that behaviour. The reason for letting this happen is simple. We stick to the expected behaviour for parent and child themes. We let WordPress load the Genesis If we don’t call any Genesis functions in the global scope (i.e. outside of a function hooked into a hook), then we don’t need Genesis to load first. PHP has scopes. Here, we’re considering two scopes: function scope and global scope. Function scope is where we assign a variable, or make a function call, from inside a function. Global scope is where the same thing might happen, but outside of a function. Any function call in the global scope is called when the file is first loaded – that is, required or included by another file. In the case of a child theme So why is this bad? As plugin developers, we might want to alter how a theme runs, but if the theme makes a function call before we have a chance to intercept, we can’t make those changes. However, if the critical function calls are all inside another (setup) function, which is hooked in to be called at a known time later, we can write plugin code to handle that; we can unhook that (setup) function, or have the plugin code run at an earlier or later priority as needed. With a setup function, the theme itself could also handle specific edge cases that need a different setup i.e. for landing page templates. It’s worth noting that this setup function approach isn’t for performance optimisation, but it certainly won’t noticeably impact performance either. The increase in executed byte-code is negligible within the request. Delaying our code until after Genesis loads is all well, but can we use it to our advantage? Yes, we can. As an example, let’s consider widget areas. By default, WordPress admin shows widget areas in the order they were registered, so all of our custom widget areas would typically appear below Header Right, Primary Sidebar and Secondary Sidebar. If we create another setup function, but hook that into an earlier hook, or with a different priority, we can set things up before Genesis does. For example, if we display a Utility Bar widget area at the top of the site’s front-end, we could register it to appear in the Widgets admin page before Header Right. This may be more intuitive for users since the widget areas then follow the order they do on the front end. So, should you put all of your global function calls into the setup function? No, and here’s why. Most Could we move the Technically, PHP allows nested user-defined function. That is: However, we should generally avoid nested functions, since you can’t call In this case, it stops functions from being re-usable and should be avoided. Unlike their add counterparts, the global WordPress functions like Since the majority of customisations in Genesis Framework child themes require a hooked-in function, it makes perfect sense to add some of those global calls into one or more functions and hook them in as well. Next time you’re editing a theme, consider not starting the engine by tying your code to Genesis internal file structure. Instead, take advantage of the WordPress event system and hook in your changes after WordPress automatically loads Genesis. A guide on how to access the old Genesis Theme Settings page. The most recent Genesis release (2.10) moved the theme settings to the Customizer. If you try accessing the old theme settings page, it redirects you to the customizer with the Theme Settings panel open. Here are a few reasons why you may want to access the old theme settings page: The redirect does not apply to additional settings pages that you have created, or those added by plugins like Genesis Grid and Genesis 404. These approaches will only work with the 2.x branch of Genesis (ex: Genesis 2.10 and any other 2.x releases that come later). Genesis 3.0 will remove these pages completely, not simply redirect them. There are two ways you can access the old theme settings page. If you only need to access the settings page once, this is the simplest approach. Hover over Genesis > Theme Settings, right click and select “Copy Link Address”. Paste that URL in the address bar, then add The URL will be: https://yoursite.copm/wp-admin/admin.php?page=genesis&noredirect If you access theme settings often, you might prefer a more permanent solution. It only takes a few lines of code to disable Genesis from ever redirecting to the customizer. You can then access the theme settings the way you always have, by clicking Genesis > Theme Settings. I’ve packaged this code into a plugin so you can easily install it without having to edit code. Go to Plugins > Add New > Upload and upload this zip file. I often update my older posts with additional information to keep them fresh and accurate. I include both the “Published” date and “Last Updated” date at the top of posts so users know the history and accuracy of the article. The WordPress function If I’m fixing a typo or adjusting the categories on the post, I don’t want the modified date to change. So I built a plugin. This plugin works with both the Gutenberg block editor and classic editor. This plugin adds a checkbox to the Publish box that lets you prevent the modified date from updating. Leave this checked while you’re making your minor content changes. When it’s time for a notable content update, uncheck the box and save the post. Whether you’re using the Classic Editor or the new Gutenberg block editor, this plugin will work great for you. We just released version 1.3 of Shared Counts, which includes some great new features and improvements. Our previous provider of Twitter share counts shut down, so we’ve added support for the new leader in Twitter counts, TwitCount. Sign up for free on the TwitCount website, then on your website go to Settings > Shared Counts and check “Include Twitter Counts”. When someone clicks one of your Shared Counts buttons, we now trigger a Google Analytics event for social interaction tracking. You can access this data in Acquisition > Social > Plugins. When viewing a post, the admin bar now includes a button showing the total shares and when the cache was last updated. Hovering over it will display the breakdown by service. Clicking the button will refresh the share counts on that page immediately. The Shared Counts – Pinterest Image addon has also been updated. Previously the separate Pinterest image would only be used when clicking a Shared Counts button. Now the image also appears in other tools like the Pinterest browser extension and Tailwind.A Shortcode Option
[post_date]) and the modified date ([post_modified_date]). Here’s a full list of the available Genesis shortcodes.[be_published_modified_date] to display the published date, and include the modified date if it’s more than a week later./**
* Published & Modified Date
*
* @see https://www.billerickson.net/display-last-updated-date-on-articles/
*
*/
function be_published_modified_date() {
$date = get_the_date( 'U' );
$updated = get_the_modified_date( 'U' );
$output = '<span class="entry-date"><span class="label">Published on</span> ' . get_the_date( 'F j, Y' ) . '</span>';
if( $updated > ( $date + WEEK_IN_SECONDS ) )
$output .= ' <span class="entry-date-modified"><span class="label">Updated on</span> ' . get_the_modified_date( 'F j, Y' ) . '</span>';
return $output;
}
add_shortcode( 'be_published_modified_date', 'be_published_modified_date' );A Code Option
echo be_published_modified_date();Article type for posts, but you can extend this using plugins or your own custom code.
Review type. I developed a plugin for:Install the plugin
Filtering schema pieces
wpseo_schema_graph_pieces filter. /**
* Adds Schema pieces to our output.
*
* @param array $pieces Graph pieces to output.
* @param \WPSEO_Schema_Context $context Object with context variables.
*
* @return array $pieces Graph pieces to output.
*/
public function schema_piece( $pieces, $context ) {
require_once( plugin_dir_path( __FILE__ ) . '/class-be-product-review.php' );
$pieces[] = new BE_Product_Review( $context );
return $pieces;
}
add_filter( 'wpseo_schema_graph_pieces', array( $this, 'schema_piece' ), 20, 2 );BE_Product_Review class found in class-be-product-review.php in my plugin.Creating a class
WPSEO_Graph_Piece interface (see here). class BE_Product_Review implements \WPSEO_Graph_Piece {
}generate() for generating the graph pieceis_needed() for determining if this graph piece should be addedExtending an existing class
Article schema type as my base since a review is a more specific type of article.class BE_Product_Review extends \WPSEO_Schema_Article implements \WPSEO_Graph_Piece {
}Setup the $context in __construct()
$context variable is an object that contains important information about the current page. It contains site-wide data (site_name, site_url) and page-specific data (id is the post ID, canonical is the permalink).$context accessible in our class. Since we are extending another class, we need to pull the $context from the parent. $this->context = $context;class BE_Product_Review extends \WPSEO_Schema_Article implements \WPSEO_Graph_Piece {
/**
* A value object with context variables.
*
* @var WPSEO_Schema_Context
*/
private $context;
/**
* Product_Rating constructor.
*
* @param WPSEO_Schema_Context $context Value object with context variables.
*/
public function __construct( WPSEO_Schema_Context $context ) {
parent::__construct( $context );
$this->context = $context;
}
}Customize is_needed()
is_needed() is one of the two methods required by the WPSEO_Graph_Piece. Use this method to determine whether or not this graph piece is needed in this specific context.WPSEO_Schema_Article class, I could leave this method out of my class and it would use is_needed() from the parent class. But my review schema doesn’t apply in every instance that the article schema would, so I need to define my own display logic.BE_Product_Review class, I have a custom metabox that allows the editor to mark this as a product review using the be_product_review_include meta key.get_the_ID() to get the post ID, we’re using $this->context->id. /**
* Determines whether or not a piece should be added to the graph.
*
* @return bool
*/
public function is_needed() {
$post_types = apply_filters( 'be_product_review_schema_post_types', array( 'post' ) );
if( is_singular( $post_types ) ) {
$display = get_post_meta( $this->context->id, 'be_product_review_include', true );
if( 'on' === $display ) {
return true;
}
}
return false;
}
Generate the graph data
generate() method is where the actual magic happens. This is where you define the relevant schema data for this graph piece. itemReviewed, reviewRating, reviewBody, and more. @id so it can be referenced by other graph pieces, as well as isPartOf so Yoast SEO knows where to place it in the graph. In my case, the review is part of the article so I have:'isPartOf' => array( '@id' => $this->context->canonical . WPSEO_Schema_IDs::ARTICLE_HASH ),$data before returning it so plugins/themes can customize the output if needed.generate() method as clean as possible, you can move logic to separate methods which are referenced inside this one. get_review_meta( $key, $fallback ) method for retrieving the review metadata, and providing a fallback in case these required fields haven’t been filled out (name = post title; review body = post content).<?php
/**
* Class BE_Review
*/
class BE_Product_Review extends \WPSEO_Schema_Article implements \WPSEO_Graph_Piece {
/**
* A value object with context variables.
*
* @var WPSEO_Schema_Context
*/
private $context;
/**
* Product_Rating constructor.
*
* @param WPSEO_Schema_Context $context Value object with context variables.
*/
public function __construct( WPSEO_Schema_Context $context ) {
parent::__construct( $context );
$this->context = $context;
}
/**
* Determines whether or not a piece should be added to the graph.
*
* @return bool
*/
public function is_needed() {
$post_types = apply_filters( 'be_product_review_schema_post_types', array( 'post' ) );
if( is_singular( $post_types ) ) {
$display = get_post_meta( $this->context->id, 'be_product_review_include', true );
if( 'on' === $display ) {
return true;
}
}
return false;
}
/**
* Adds our Review piece of the graph.
*
* @return array $graph Review markup
*/
public function generate() {
$post = get_post( $this->context->id );
$comment_count = get_comment_count( $this->context->id );
$data = array(
'@type' => 'Review',
'@id' => $this->context->canonical . '#product-review',
'isPartOf' => array( '@id' => $this->context->canonical . WPSEO_Schema_IDs::ARTICLE_HASH ),
'itemReviewed' => array(
'@type' => 'Product',
'image' => array(
'@id' => $this->context->canonical . WPSEO_Schema_IDs::PRIMARY_IMAGE_HASH,
),
'name' => wp_strip_all_tags( $this->get_review_meta( 'name', get_the_title() ) ),
),
'reviewRating' => array(
'@type' => 'Rating',
'ratingValue' => esc_attr( $this->get_review_meta( 'rating', 1 ) ),
),
'name' => wp_strip_all_tags( $this->get_review_meta( 'name', get_the_title() ) ),
'description' => wp_strip_all_tags( $this->get_review_meta( 'summary', get_the_excerpt( $post ) ) ),
'reviewBody' => wp_kses_post( $this->get_review_meta( 'body', $post->post_content ) ),
'author' => array(
'@id' => get_author_posts_url( get_the_author_meta( 'ID' ) ),
'name' => get_the_author_meta( 'display_name', $post->post_author ),
),
'publisher' => array( '@id' => $this->get_publisher_url() ),
'datePublished' => mysql2date( DATE_W3C, $post->post_date_gmt, false ),
'dateModified' => mysql2date( DATE_W3C, $post->post_modified_gmt, false ),
'commentCount' => $comment_count['approved'],
'mainEntityOfPage' => $this->context->canonical . WPSEO_Schema_IDs::WEBPAGE_HASH,
);
$data = apply_filters( 'be_review_schema_data', $data, $this->context );
return $data;
}
/**
* Determine the proper publisher URL.
*
* @return string
*/
private function get_publisher_url() {
if ( $this->context->site_represents === 'person' ) {
return $this->context->site_url . WPSEO_Schema_IDs::PERSON_HASH;
}
return $this->context->site_url . WPSEO_Schema_IDs::ORGANIZATION_HASH;
}
/**
* Product review meta
*
* @param string $key
* @param string $fallback
* @return string $meta
*/
private function get_review_meta( $key = false, $fallback = false ) {
$meta = get_post_meta( $this->context->id, 'be_product_review_' . $key, true );
if( empty( $meta ) && !empty( $fallback ) )
$meta = $fallback;
return $meta;
}
}
Building the form
<?php
/**
* WPForms, include eBook download in confirmation message.
*
* @see https://www.billerickson.net/wordpress-ebook-optin-form/
*
* @param array $form_data
* @param array $form
*/
function be_wpforms_ebook_download( $form_data, $form ) {
$attachment_id = get_post_meta( get_the_ID(), 'be_ebook', true );
if( !empty( $attachment_id ) )
wpforms()->frontend->confirmation_message .= '<div class="wp-block-button aligncenter"><a href="' . esc_url_raw( $attachment_id ) . '" class="wp-block-button__link">Download Now</a></div>';
}
add_action( 'wpforms_frontend_output_before', 'be_wpforms_ebook_download', 10, 2 );Don’t let Google index your PDF
Disallow: /*.pdf to the end of the file and click “Save changes to robots.txt”.
primaryImageOfPage and will attach that to the Article graph piece. If there’s no featured image, no image is attached to the article.When an image is required
Article must have at least one image providedYoast SEO Default Article Image
/**
* Default image in Article schema
* If there is no featured image, or featured image is
* < 1200px wide, use the site logo instead.
*
* @see https://www.billerickson.net/yoast-seo-schema-default-image/
*
* @param array $graph_piece
* @return array
*/
function be_schema_default_image( $graph_piece ) {
$use_default = false;
if( has_post_thumbnail() ) {
$image_src = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
if( empty( $image_src[1] ) || 1199 > $image_src[1] )
$use_default = true;
} else {
$use_default = true;
}
if( $use_default ) {
$graph_piece['image']['@id'] = home_url( '#logo' );
}
return $graph_piece;
}
add_filter( 'wpseo_schema_article', 'be_schema_default_image' );Article graph piece. If you have other graph pieces that require a default image, add an additional filter to the bottom using the format wpseo_schema_{type}.What is AMP?
AMP WordPress Plugin
<!--
The style[amp-custom] element is populated with:
0 B: style[amp-custom=]
73 B (57%): link#amp-default-css[rel=stylesheet][id=amp-default-css][href=https://www.billerickson.net/wp-content/plugins/amp/assets/css/amp-default.css?ver=1.1.3][type=text/css][media=all]
998 B (14%): link#shared-counts-css[rel=stylesheet][id=shared-counts-css][href=https://www.billerickson.net/wp-content/plugins/shared-counts/assets/css/shared-counts.min.css?ver=1.3.0][type=text/css][media=all]
196 B (1%): link#wp-block-library-css[rel=stylesheet][id=wp-block-library-css][href=https://www.billerickson.net/wp-includes/css/dist/block-library/style.min.css?ver=5.2.1][type=text/css][media=all]
18786 B (50%): link#ea-style-css[rel=stylesheet][id=ea-style-css][href=https://www.billerickson.net/wp-content/themes/billerickson-2019/assets/css/main.css?ver=1559684395][type=text/css][media=all]
2664 B (23%): link#gistpress-css[rel=stylesheet][id=gistpress-css][href=https://github.githubassets.com/assets/gist-embed-a9a1cf2ca01efd362bfa52312712ae94.css?ver=5.2.1][type=text/css][media=all]
74 B: a.monsterinsights-outbound-link amp-wp-1982de1[href=https://gist.github.com/billerickson/6c9fa9c3bce739f551685cfa3b6bf369/raw/9c04eb1e7b1a1f82fea7f5d87b3b6acd9e8e8c79/navigation.php][class=monsterinsights-outbound-link amp-wp-1982de1][data-vars-category=outbound-link][data-vars-action=https://gist.github.com/billerickson/6c9fa9c3bce739f551685cfa3b6bf369/raw/9c04eb1e7b1a1f82fea7f5d87b3b6acd9e8e8c79/navigation.php][data-vars-label=view raw]
80 B: div.amp-wp-539b047[class=amp-wp-539b047]
Total included size: 22,871 bytes (35% of 65,101 total after tree shaking)
-->
Three AMP template modes
?amp to the end of a URL serves up the AMP version used in Google’s mobile SERPs. This is a good option if you’re not able to fully implement your website in an AMP compatible way but want a paired down AMP version that still looks like your website. It’s named transitional because you can use it until you can make a Native AMP version.Fixing Validation Issues
Plugins without JavaScript
Reject validation error, leave page invalidated
amp attribute is removed from the HTML element), but you can still benefit from all the performance improvements and AMP components already on the page. Disable JS in the plugin
add_filter( 'shared_counts_load_js', '__return_false' );add_filter( 'wpseo_local_load_jquery', '__return_false' );ea_is_amp() to only disable it if AMP is active./**
* Remove scripts
*
*/
function ea_amp_remove_scripts() {
if( ! ea_is_amp() )
return;
wp_dequeue_script( 'page-links-to' );
}
add_action( 'wp_enqueue_scripts', 'ea_amp_remove_scripts', 20 );Build the functionality without a plugin
amp-lightbox, amp-form, amp-moustache, and amp-recaptcha-input to build the email sharing popup and form. amp-lightbox script and wrap your modal content in <amp-lightbox layout="nodisplay">Navigation without JavaScript
AMP.setState(). Start by building your element in the default state. In this case, I have a mobile menu toggle button:<button class="mobile-menu-toggle"></button>[class] to specify how the class should change based on a variable mobileMenuActive. If that variable is true then the button should have a class of mobile-menu-toggle active, and if it is false it should have a class of mobile-menu-toggle.<button [class]="mobileMenuActive ? 'mobile-menu-toggle active' : 'mobile-menu-toggle'" class="mobile-menu-toggle"></button>mobileMenuActive to the opposite of its current value. In other words, if the mobile menu is inactive, on tap it should become active.<button [class]="mobileMenuActive ? 'mobile-menu-toggle active' : 'mobile-menu-toggle'" class="mobile-menu-toggle" on="tap:AMP.setState({mobileMenuActive: !mobileMenuActive})"></button>active if mobileMenuActive is true.<nav [class]="mobileMenuActive ? 'nav-primary nav-menu active' : 'nav-primary nav-menu'" class="nav-primary nav-menu"></nav>echo '<button' . ea_amp_class( 'mobile-menu-toggle', 'active', 'mobileMenuActive' ) . ea_amp_toggle( 'mobileMenuActive' ) . '></button>';echo '<nav' . ea_amp_class( 'nav-primary nav-menu', 'active', 'mobileMenuActive' ) . '></nav>';Submenu Toggles
walker_nav_menu_start_el to add my submenu toggle to any menu item that has children. /**
* Add a dropdown icon to top-level menu items.
*
* @param string $output Nav menu item start element.
* @param object $item Nav menu item.
* @param int $depth Depth.
* @param object $args Nav menu args.
* @return string Nav menu item start element.
*/
function ea_nav_add_dropdown_icons( $output, $item, $depth, $args ) {
// Only add to 'primary' menu.
if ( ! isset( $args->theme_location ) || 'primary' !== $args->theme_location ) {
return $output;
}
// Only add to items with children
if ( in_array( 'menu-item-has-children', $item->classes, true ) ) {
// Add SVG icon to parent items.
$icon = ea_icon( array( 'icon' => 'drop-down', 'size' => 24 ) );
$output .= sprintf(
'<button' . ea_amp_nav_dropdown( $args->theme_location, $depth ) . ' tabindex="-1">%s</button>',
$icon
);
}
return $output;
}
add_filter( 'walker_nav_menu_start_el', 'ea_nav_add_dropdown_icons', 10, 4 );.submenu-expand.expanded. We then display the sub-menu with the following CSS:.submenu-expand.expanded + .sub-menu {
display: block;
}Add Fallback JavaScript
! ea_is_amp(). Genesis makes it easier
genesis_register_responsive_menus() to tell Genesis to add it for you. // Registers the responsive menus.
genesis_register_responsive_menus(
array(
'script' => array(
'menuIconClass' => 'ionicons-before ion-ios-menu',
'menuIconOpenedClass' => 'ionicons-before ion-ios-menu',
'subMenuIconClass' => 'ionicons-before ion-ios-arrow-down',
'menuClasses' => array(
'combine' => array(
'.nav-primary',
'.nav-off-screen',
),
'others' => array(),
),
),
)
);Google Analytics with AMP
AMP Helper Functions
/inc/amp.php in both of my starter themes.ea_is_amp() A conditional to use when applying AMP-specific changes. For instance, for enqueuing a JavaScript file if ea_is_amp() is false. ea_amp_class( $default, $active, $state ) This adds all the code for toggling CSS classes based on a state variable.ea_amp_toggle( $state, $disable ) This adds the state variable toggle code, so when a button is clicked the variable toggles true/false. You can also pass an array of other state variables to set to false on click (ex: close the search form when opening the mobile nav)ea_amp_nav_dropdown( $theme_location, $depth ) Generates a unique variable name for submenu toggles, then uses it with ea_amp_class() and ea_amp_toggle().<?php
/**
* AMP functionality
*
* @package EAStarter
* @author Bill Erickson
* @since 1.0.0
* @license GPL-2.0+
**/
/**
* Is AMP?
* Conditional tag
*/
function ea_is_amp() {
return function_exists( 'is_amp_endpoint' ) && is_amp_endpoint();
}
/**
* Generate a class attribute and an AMP class attribute binding.
*
* @param string $default Default class value.
* @param string $active Value when the state enabled.
* @param string $state State variable to toggle based on.
* @return string HTML attributes.
*/
function ea_amp_class( $default, $active, $state ) {
$output = '';
if( ea_is_amp() ) {
$output .= sprintf(
' [class]="%s"',
esc_attr(
sprintf(
'%s ? \'%s\' : \'%s\'',
$state,
$default . ' ' . $active,
$default
)
)
);
}
$output .= sprintf( ' class="%s"', esc_attr( $default ) );
return $output;
}
/**
* Add the AMP toggle 'on' attribute.
*
* @param string $state State to toggle.
* @param array $disable, list of states to disable
* @return string The 'on' attribute.
*/
function ea_amp_toggle( $state = '', $disable = array() ) {
if( ! ea_is_amp() )
return;
$settings = sprintf(
'%1$s: ! %1$s',
esc_js( $state )
);
if( !empty( $disable ) ) {
foreach( $disable as $disableState ) {
$settings .= sprintf(
', %s: false',
esc_js( $disableState )
);
}
}
return sprintf(
' on="tap:AMP.setState({%s})"',
$settings
);
}
/**
* AMP Nav Dropdown toggle and class attributes.
*
* @param string $theme_location Theme location.
* @param int $depth Depth.
* @return string The class and on attributes.
*/
function ea_amp_nav_dropdown( $theme_location = false, $depth = 0 ) {
$key = 'nav';
if( !empty( $theme_location ) )
$key .= ucwords( $theme_location );
global $submenu_index;
$submenu_index++;
$key .= 'SubmenuExpanded' . $submenu_index;
if( 1 < $depth )
$key .= 'Depth' . $depth;
return ea_amp_toggle( $key ) . ea_amp_class( 'submenu-expand', 'expanded', $key );
}
parse_blocks()
post_content into an array of parsed block objects.$blocks = parse_blocks( $post->post_content );post_content of my Style Guide looks like:<!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size">Lorem <strong>ipsum</strong> dolor <em>sit amet</em>, consectetur <a class="map-link" href="https://maps.google.com/?q=Houston,+TX">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":1} -->
<h1>Heading 1</h1>
<!-- /wp:heading -->
parse_blocks(), it looks like:Array
(
[0] => Array
(
[blockName] => core/paragraph
[attrs] => Array
(
[fontSize] => large
)
[innerBlocks] => Array
(
)
[innerHTML] =>
<p class="has-large-font-size">Lorem <strong>ipsum</strong> dolor <em>sit amet</em>, consectetur <a class="map-link" href="https://maps.google.com/?q=Houston,+TX">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
[innerContent] => Array
(
[0] =>
<p class="has-large-font-size">Lorem <strong>ipsum</strong> dolor <em>sit amet</em>, consectetur <a class="map-link" href="https://maps.google.com/?q=Houston,+TX">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
)
)
[1] => Array
(
[blockName] =>
[attrs] => Array
(
)
[innerBlocks] => Array
(
)
[innerHTML] =>
[innerContent] => Array
(
[0] =>
)
)
[2] => Array
(
[blockName] => core/heading
[attrs] => Array
(
[level] => 1
)
[innerBlocks] => Array
(
)
[innerHTML] =>
<h1>Heading 1</h1>
[innerContent] => Array
(
[0] =>
<h1>Heading 1</h1>
)
render_block()
echo render_block( $block );Display blockquote from post
core/quote block, if one is found.be_display_post_blockquote() to display the quote.Table of contents from headings
core/heading ones.$block['attrs']['level'] to make a nested list based on the heading level (ex: h3 is subordinate to h2).anchor attribute, so you’ll still need to manipulate the HTML if you want to create anchor links (example).ACF block data
parse_blocks() to find all of the acf/service blocks, then building the links using the $block['attrs'] data.
Start The Engine
functions.php file that attempts to Start the engine:<?php
//* Start the engine
include_once( get_template_directory() . '/lib/init.php' );init.php within the lib/ sub-directory of the template directory (that’s the parent theme, aka Genesis, to you and me).What Does init.php Do?
init.php file within Genesis is the initialisation file. Here’s what it does (in Genesis 2.6 at least):genesis_pre action hook.genesis_i18n() function for loading Genesis language files, and hooks it into the genesis_init hook.genesis_theme_support() function for adding theme support for Genesis and WordPress features, and hooks it into the genesis_init() hook.genesis_post_type_support() function for enabling certain Genesis functionality for Posts and Pages, and hooks it into the genesis_init() hook.genesis_post_type_support_post_meta() function for enabling Genesis functionality for post meta on public post types that are not Pages, and hooks it into the genesis_init() hook.genesis_constants() function for defining PHP constants that Genesis uses within itself, and available to plugins and themes, and hooks it into the genesis_init() hook.genesis_load_framework() function for loading in all the files, and hooks it into the genesis_init() hook.genesis_init action hook, which therefore triggers calls to each function referenced above.genesis_setup action hook.Advantages of the Start the Engine Approach
functions.php file can reference Genesis functions, and the theme author doesn’t have to worry whether they are defined or not.The Alternative: A Setup Function
What is a Setup Function?
genesis_setup. Since Genesis itself also hooks into genesis_setup, we use a later priority of 15, to make sure the child theme adjustments come last.Advantages of the Setup Function Approach
Not including a file from another code base
file_exists() check, but if doesn’t exist, how will the rest of your code behave? Your code is still coupled to looking for that specific file name.Honouring the Default WordPress Load Order
functions.php file, which in turn loads the file we would have tried to load in our code.Fewer Function Calls in the Global Scope
<?php
function foobar() {
// This is in the function scope.
}
// This is in the global scope.functions.php file, that would be when WordPress is loading the (child) theme.Allows Functionality to be Hooked in Before Genesis Loads
What Should You Put Into Your Setup Function?
Action and Filter Additions
add_action() and add_filter() can stay outside. There’s nothing special about these functions that has anything to do with Genesis, even if the callback they reference does. Keeping these by the callback function definitions makes code considerably easier to read, rather than having the function in one place and the context (hook) under which that function is called several hundred lines away or in a different file.add_action() call and the function definition into the setup function? This would create nested functions.Nested Functions
function foo() {
// ...
function bar() {
// ...
}
}foo() more than once. Calling it a second time would make PHP attempt to define bar() again. Since a function by that name already exists from when foo() was first called, this would cause a fatal error.Action And Filter Removals
remove_action() and remove_filter() calls may need to be in the setup function. One of the common gotchas is calling a remove_action() in the global scope, before Genesis has had a chance to add_action() in the first place. By including the remove_action() in the setup function, which in turn is not called until we know Genesis has finished setting up, the remove_action() intent will work.WordPress Functions
add_image_size(), add_theme_support() and setting the global $content_width don’t need to be in the setup function, but equally, it makes sense to have them there, since they are part of setting up the theme behaviour.Summary
Include &noredirect in URL
&noredirect to the end of it. This tells Genesis to bypass the redirect.Disable the redirect
Install the plugin
get_the_modified_date() can be used to list this date, but there’s one small problem. It changes for any update, no matter how minor. Limit Modified Date
Gutenberg Compatible
Twitter counts using TwitCount
Social Interaction tracking with Google Analytics
Stats in the Admin Bar
Pinterest Addon Updates
Full Changelog
Added
shared_counts_display_services, see #69.fastcgi_finish_request when updating counts, see #12.services attribute (comma separated), see #69.Changed
needs_updating method, see #74.letter-spacing to normal on button labels, see #56.Fixed
