I’ve been using this for a boilerplate lately, it’s pretty nice, and not all that different from the piece of HTML I’ve had saved on Dropbox for the last 10 years.
It provides a bare, standards-compliant starting point for your websites, giving you just enough to get started, making it easy to add your own stuff in.
There are a few things you may want to customize before you start writing a bunch of content, though. This is taken straight from the README on GitHub. Take these points into consideration, especially page titles, css includes, and javascript includes.
The last post I made on this topic was a bit too specific to the Independent Publisher theme and was more editorial like, which made it really hard to follow. So, at the request of Manish Suwal ‘Enwil’, I’ve decided to write a more generic version that should apply to most, if not all, WordPress themes.
Please note that the class names used below could be different in the theme you’re using, so it’s mostly important to just pay attention to the HTML tags themselves, unless you’re doing something with a div, span, etc.
There’s 6 steps, although step 6 has a few different parts to it.
1. First, you’re going to want this PHP function, a slightly modified version from Paul Lund. This function defines the schema type based on the type of content being displayed (article, author profile page, search results page, etc). Add this function to your themes functions.php file. The function is named html_tag_schema(). You can find it here:
2. Find the <html> section of your theme and add our html_tag_schema() function. This will output the proper result from html_tag_schema(). It should look like the following:
3. The page title tag is usually the same as the title of the page, so you can add this to your titletag:
<title itemprop="name"><?php wp_title(''); ?></title>
4. Now you’ll need to find the part of your theme that contains the_content() function. It could look something like this:
5. It’s generally a good idea to let Google (and other search engines) know when an article/post was published. You can also tell them if/when an article has been updated. Both of these can be taken care of with schema.org markup:
6. You can apply schema.org markup to any image, but it’s easiest when your theme supports featured images. I think most themes do support Featured Images now, and if your theme doesn’t, just add Featured Image support yourself, or kindly ask the theme developer to add support. I could probably help you out, too.
6a.If your theme supports Featured Images, it should make use of the the_post_thumbnail() function. Find that function in your theme and replace it with this:
the_post_thumbnail( ‘thumbnail’, array(‘itemprop’=>’image’ ) );
6b.If the ‘thumbnail’ parameter value in your existing the_post_thumbnail() function is something other than ‘thumbnail’, make sure to keep that original paramater value. For example, if your the_post_thumbnail() call looked like the_post_thumbnail( array( 700, 700 ) );, adjust your the_post_thumbnail() function call to the following:
the_post_thumbnail( array( 700, 700 ), array(‘itemprop’=>’image’ ) );
6c.The array( 700, 700 ) piece can be replaced by whatever size you want. The first array value is the width, and the second is the height. There’s a variety of image sizes pre-defined by WordPress:
The default image sizes of WordPress are “thumbnail”, “medium”, “large” and “full” (the size of the image you uploaded). These image sizes can be configured in the WordPress Administration Media panel under Settings > Media. This is how you can use these default sizes with the_post_thumbnail() and schema.org markup: the_post_thumbnail(); // without parameter -> 'post-thumbnail'
the_post_thumbnail(‘thumbnail’,array(‘itemprop’=>’image’ )); // Thumbnail (default 150px x 150px max)
the_post_thumbnail(‘medium’,array(‘itemprop’=>’image’ )); // Medium resolution (default 300px x 300px max)
the_post_thumbnail(‘large’,array(‘itemprop’=>’image’ )); // Large resolution (default 640px x 640px max)
the_post_thumbnail(‘full’,array(‘itemprop’=>’image’ )); // Full resolution (original size uploaded)
the_post_thumbnail( array(100,100), array('itemprop'=>'image' ) ); // Other resolutions (100x100)
That’s it!
If you want to know more about schema.org, have a look at my original post. Schema.org is also a wonderful resource, their documentation is excellent and would advise that you read through the Getting Started Guide, it provides a great overview of the concepts behind structured data and schema.org.
That’s all there is to adding basic schema.org structured data to your WordPress theme. You could obviously extend it to support more schema.org “things”, but I’ll leave that for you. If you did every step in this post, you’ll have schema.org markup for featured images, article publish and update time, main content declaration and structured data enabled title and head HTML tags.
Loading ...
Have any questions, comments, or maybe even praise? Comments are open, as usual.
Google also has a Structured Data Markup Helper that helps you add structured-data markup to a sample page. Just give it a URL, select an element and choose which structured-data to apply.
It’s not like there’s no WordPress themes without schema.org markup built-in, but there’s certainly not many. I don’t even have this built into my WordPress themes, I should update Rootdip with schema.org markup. Unwakeable, however, hasn’t been maintained in forever, and schema.org didn’t even exist back then.
There’s plenty of plugins for adding schema.org markup to your WordPress site, but I think it makes sense to just integrate it right into the theme. The theme developers know exactly where their tags are, preventing the need to add additional info to the end of the post that’s wrapped in schema.org markup.
I tried out the All In One Schema.org Rich Snippets plugin, but it would require me to enter duplicate content (title, description, etc). It would also display a box at the end of each individual post page containing that extra, unnecessary content.
Because of that, I decided to just add the schema.org markup myself. It’s really very simple and only took about 15 minutes to do. Google likes schema.org data, and making Google happy is important to the ranking of your site. 15 minutes is definitely worth the time to do it right.
Anyway, here’s what I’ve put together as a basic starting point for integrating schema.org into your WordPress theme. Stuff is probably missing, some stuff may be incorrect. If so, please let me know in the comments.
Loading ...
Before you begin
If your theme doesn’t include some of the tags mentioned below, like <header>, <footer> , <article> , and <time> , you can use regular <span> tags instead. Just make sure you keep the itemscope attributes and their values.
Modify single article file
This is usually single.php, content-single.php, or something similar. Find the <article> tag and add the following to the end: itemscope=”itemscope” itemtype=”http://schema.org/BlogPosting” itemprop=”blogPost”
If your theme supports post thumbnails, find the_post_thumbnail(); function and replace it with something like this: the_post_thumbnail( ‘thumbnail’, array(‘itemprop’=>’image’ ) );
Now find where the post date/time is being displayed. You’ll want to wrap it in a <time> tag like below. You can also use a regular <span> tag as well, just be sure to add the itemprop=”datePublished” and pubdate attributes. <time class=”entry-date” datetime=”<?php the_time(‘Y-m-dTH:i:sO’); ?>” itemprop=”datePublished” pubdate><?php the_time( get_option( ‘date_format’ ) ); ?></time>
Next find where the title is printed, usually between h1 tags, add an itemprop attribute with a value of name, like so: <h1 class=”entry-title” itemprop=”name”><?php the_title(); ?></h1>
Now add another itemprop attribute wtih a value of mainContentOfPage to the div containing the_content(); WordPress function: <div class=”entry-content” itemprop=”mainContentOfPage”>
Modify header.php
Only a few easy changes in this file. First, change your <html <?php language_attributes(); ?>> to look like this: <html <?php html_tag_schema(); ?> <?php language_attributes(); ?>>
Next, change your <body> tag to this: <body <?php body_class(); ?> itemscope=”itemscope” itemtype=”http://schema.org/WebPage”>
If your theme has a <header> element, change it so it’s similar to this: <header id=”masthead” class=”site-header” role=”banner” itemscope itemtype=”http://schema.org/WPHeader”>
Modify footer.php
If you theme has a <footer> element, modify so it resembles the code below: <footer id=”colophon” class=”site-footer” itemscope=”itemscope” itemtype=”http://schema.org/WPFooter” role=”contentinfo”>
functions.php addition
Paul Lund wrote this function to define the schema type automatically for the type of content being displayed (ie: article, contact page, etc). You can see the <html <?php html_tag_schema(); ?> <?php language_attributes(); ?>> function in the functions.php file in the demo repo.
Ideal Implementation
Don’t modify the core files of the theme you’re using. It’s seriously wrong and makes upgrading your theme almost impossible. Instead, create a child theme. It’s really, really easy to do and will inherit all the functionality and styles of the parent theme. For your convenience, I’ve put an example child theme up on GitHub, tlongren/wordpress-child-example.
Since it’s a child theme for Independent Publisher, you’ll want to fork it and modify it to fit your theme. If you’re already using Independent Publisher, you should be good to download the repo, upload it to WordPress, and activate the new theme from the WP dashboard.
Historically, we’ve supported three different standards for structured data markup: microdata, microformats, and RDFa. Instead of having webmasters decide between competing formats, we’ve decided to focus on just one format for schema.org. In addition, a single format will improve consistency across search engines relying on the data. There are arguments to be made for preferring any of the existing standards, but we’ve found that microdata strikes a balance between the extensibility of RDFa and the simplicity of microformats, so this is the format that we’ve gone with.
It also helps you define the default image that’s pulled when sharing a link on Google+ or Facebook. Users will still have the option of choosing another image, but probably won’t when the featured image from your post is automatically there. And this is just one example of why you should at least consider implementing schema.org markup.
As usual, comments are open, so please let me know what I got wrong and what could be improved. I appreciate whatever feedback people offer.
If you’re using Firefox, you may notice the long lines in my Digg Integrator fix post. It’s not really a problem for me having those really long lines in Firefox. Why? Because Firefox still displays my sidebar correctly. Internet Explorer is a totally different story though. When there’s long lines like that, my sidebar will appear at the very bottom of the page in IE.
The long lines are caused by use of the pre html tag. The pre tag preserves spaces and line breaks in a chunk of text. Perfect for displaying snippets of code. However, some lines of code are quite long and will run off the page. This is exactly why my sidebar was getting pushed to the bottom of the page in IE.
So, I set out looking for a method to wrap text contained within pre tags. Google found exactly what I was looking for. Wrapping text inside pre tags is quite easy, all that’s required is a simple addition to your css:
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Quite simple. After adding that CSS, the text in pre tags still doesn’t wrap in Firefox, but I don’t care because Firefox displays the rest of my page as it should. Now, when you view a page in IE with a long line, the text is wrapped and my sidebar content appears at the top of the page instead of the bottom.
For consistency sake, let’s make these long lines wrap in Firefox too. This is extremely simple. It only requires adding a few characters to the CSS shown above. For text wrapping in Firefox, use this CSS:
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Notice the only difference between the first and second examples is the addition of “!important” to the third line in example 2. After adding that little bit, your text between your pre tags should wrap well in basically every browser that’s currently in use.
UPDATE 3/10/2007
If you can’t seem to get the css above to work, give the css below a shot. I just set a width on the pre tag. When the width is set to 100%, you’ll get a horizontal scrollbar when viewing in IE7. That’s why I’ve set the width to 99%. The code will display just fine in IE6, IE6, and FireFox when width is set to 99%. I have not tested Opera. Try this updated CSS if you’re having issues with the original CSS from above.
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
width: 99%;
}
UPDATE 6/4/2008
Markku Laine posted some css in a comment that seems to work better than the original css I posted. It works in IE, Safari, and FireFox. Try using Markku’s css below if the previous examples don’t work for you.
pre {
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
/* width: 99%; */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Update 1/20/2011
Some code Max posted in a comment also seems to be working well for many people. It may be worth trying as well:
height: 120px;
overflow: auto;
font-family: “Consolas”,monospace;
font-size: 9pt;
text-align:left;
background-color: #FCF7EC;
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
margin: 0px 0px 0px 0px;
padding:5px 5px 3px 5px;
white-space : normal; /* crucial for IE 6, maybe 7? */
Loading ...
