It's actually quite simple. In the Executive Pro child theme folder, you'll find a file named archive-portfolio.php. The source code for archive-portfolio.php is below. Just add itemprop=“image” to the img tag in line 37 as highlighted in the source.
', get_permalink(), $image, the_title_attribute( 'echo=0' ) );
}
}
//* Remove the post meta function
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
genesis();
Search engines like Google, Bing, Yahoo, and Yandex want to be in the know. They want to know what your content means, not just what it says. As a result, Google, Microsoft, and Yahoo came together in June, 2011 to announce a collaboration to create and support a standard set of schemas for structured data markup on web pages. The site they developed is Schema.org.
Schema markup is one of the latest evolutions in Search Engine Optimization (SEO). Schema markup is a vocabulary—a semantic vocabulary. It is code that you put on your website to help search engines return more illuminating results for users. These vocabularies represent entities, and the relationships between entities and actions. Schema markup can easily be extended through a well-documented extension model.
Why Good Schema Markup is Important
Websites that use schema markup rank better on Search Engine Results Pages (SERPs) than sites without markup. One study published by Searchmetrics determined that websites with markup rank an average of four positions higher in the SERPs than those without schema markup. This evidence may turn out to be anecdotal though and these results should be treated with caution. While there is apparently some correlation, it is not entirely clear that this higher result is due to the markup alone. However, if I can rank my sites four positions higher than my competitors by having proper schema markup, I'll take that any day of the week.
WordPress and Schema.org
There's no doubt that WordPress is the world's most popular web platform. Unfortunately for the millions of WordPress powered websites, it does not directly support schema markup. However, WordPress can be extended to include schema markup through plugins, or themes, or popular theme frameworks such as the Genesis Framework.
Genesis and Schema.org
Just as WordPress is the world's #1 web platform, the Genesis Framework is the #1 professional web developers' tool for building custom themes. There's good reason for its wide spread support. It's code is progressive, tight, and fast executing. It generates the latest standards of schema markup, and as of the Version 2.2.2 release, is fully Section 508, WCAG 2.0, and A11Y compliant. This means your content, when processed through the Genesis Framework, is accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these.
So What Problem Are We Trying To Solve?
While Genesis is superior in every way when it comes to adding schema markup to your content, there is one thing it doesn't do. It might be best to let Genesis lead developer Nathan Rice explain:
Images that are inserted into the content of a post will need to have that property [itemprop=“image”] added manually. Genesis doesnât generate the markup for anything in the post content, so that bit is up to you.
With that being said, if you are using the Genesis Framework on your site, you have three options.
You can edit all of your posts and pages to manually add the schema markup to every one of your image tags.
You can update the wp_posts table directly with SQL to add the schema markup to your content's image tags
You can add the little snippet of code below to your theme's functions.php file and not worry about it again
/**
* Add itemprop image markup to img tags
* @author Victor M. Font Jr.
* @link //victorfont.com/
*/
add_filter('the_content', 'vmf_add_itemprop_image_markup', 2);
function vmf_add_itemprop_image_markup($content)
{
//Replace the instance with the itemprop image markup.
$string = '<img';
$replace = '<img itemprop="image"';
$content = str_replace( $string, $replace, $content );
return $content;
}
A common modification made to Studio Press Genesis Framework powered themes is changing the size of the logo to fit a specifically sized image. The following example is based on the Streamline Pro theme, but the process can be applied to *any* Genesis theme by Studio Press.
The first step is to change the image size in functions.php. Find the following code block:
This change allows you to upload a 300Ã300 image through the theme customizer. Next you have to change the size of the image in the header in style.css. Find the following code:
I am trying to add a a class to the images in the featured post widget. What would I use to achieve that. I tried genesis_attr_entry-image it did not work. Thanks
Adding the following code to the Genesis/Theme Settings header script area solves his problem:
How This Works
You may not be familiar with the selector used in the jQuery example above. This is a wildcard selector that targets all div elements with an id beginning with âfeatured post widgets". Wildcard selectors are extremely useful for targeting elements of a specific type. Wildcard selectors work for jQuery and CSS. To learn more about wildcard selectors, please visit http://api.jquery.com/category/selectors/
A common request I receive regularly from my clients is to replace the “Howdy” from the WordPress admin bar with something more professional sounding like “Welcome”. WordPress doesn't provide a configuration option to do this, but if you add the following code to your theme's functions.php, you can easily replace Howdy with your choice of a new word.
add_filter( 'admin_bar_menu', 'replace_howdy', 25 );
function replace_howdy( $wp_admin_top_bar ) {
$wp_my_account=$wp_admin_top_bar->get_node('my-account');
/* change 'Welcome' below to your choice of word */
$replacetitle = str_replace( 'Howdy', 'Welcome', $wp_my_account->title );
$wp_admin_top_bar->add_node( array(
'id' => 'my-account',
'title' => $replacetitle,
) );
}
This site's Website Portfolio page displays portfolio custom post types. Actually, I borrowed the portfolio code from the Genesis Executive Pro theme and customized it to work with the Parallax Pro theme that we use on this site. While copying the php code, CSS, and templates from the Executive Pro theme is a pretty straight forward affair, I wanted the portfolio custom post types to be ordered alphabetically instead of the WordPress default reverse chronological order. To achieve this effect, I added the following code to the theme's functions.php file:
//* Sort the portfolio thumbnails alphabetically
add_filter("posts_orderby", "vmf_orderby_filter", 10, 2);
function vmf_orderby_filter($orderby, &$query){
global $wpdb;
//figure out whether you want to change the order
if (get_query_var("post_type") == "portfolio") {
return "$wpdb->posts.post_title ASC";
}
return $orderby;
}
We only use analytical cookies on our website that allow us to recognize and count the number of visitors, but they do not identify you individually. They help us to improve the way our website works. By clicking Accept you, agree to cookies being used in accordance with our Cookie Policy.
As a follow-up to our previous article, Add itemprop=“image” to WP Content Images, we thought we'd show you how to add itemprop=“image” to the Genesis Executive Pro portfolio archive. We use a modified version of that page on this site that is built with the Genesis Parallax Pro theme.
