How To: Change the Default Doctype in Genesis Themes

Just yesterday i was looking for a way to change the default doctype in genesis themes. Here is a quick tutorial on how to get it working in themes designed by studiopress by following some simple steps.

What are Doctypes and why do we need them?

First of all let me tell you what a doctype really is. Doctype refers to the format of your site’s html. It tells the web browser which version of html your site is using and how the content should be displayed. It is a must to include the doctype in your site’s header.

Is there a Need to Change the default Doctype in my theme?

Certainly Not! Normally you don’t have to change the doctype in your theme. The Standard Doctype works fine and is compatible with all the browsers.

Nonetheless sometimes when you are using social sharing buttons on your site such as Facebook, there arises a need to include certain tags to tell the browsers that it can expect languages other than HTML, such as FBML (the markup language used by Facebook) too.

cover.png How To: Change the Default Doctype in Genesis Themes

So to make sure browsers pulls the right information from your sites you need to edit your doctype and include the FBML tags.

The Problem with Genesis Themes

All the themes by default have the doctype codes included in RAW format but since some theme frameworks such as genesis and thesis uses a different technique to output doctype in the site header’s its not possible to manually insert the code in plain text.

The Genesis Child theme that you are using calls the doctype format from its Parent theme so its not recommended to make any changes to the Parent theme since any changes you make will not be saved in the future updates.

So the only way to go is, to make the browser call the doctype from the child theme and not the parent theme.

The Solution

Here’s a tutorial on how to edit your Child theme and change the default doctype in genesis themes:

Step 1: Go to Appearance > Editor from your WordPress Sidebar and open the Functions.php file.

Step 2: Insert the Code provided below, at the very end of the file

/** Include Facebook Open Social namespaces */
remove_action( 'genesis_doctype', 'genesis_do_doctype' );
add_action( 'genesis_doctype', 'child_do_doctype' );
function child_do_doctype() {
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo( 'html_type' ); ?>; charset=<?php bloginfo( 'charset' ); ?>" />
<?php
}

Step 3: Save the file.

Thats it! You have successfully customized your default doctype format.

P.S. this is a slightly edited version of Gary’s Code. I have also included the FBML tags as recommended by Yoast but if you want to edit it further to include some other attributes, you can make the changes.

Note: Many people stress on using the Strict doctype but i recommend using a Transitional Doctype instead, because although the strict doctype is error free, it doesn’t support many attributes and elements compared to transitional.

 How to Check if everything is working correctly?

Before making the changes in your functions.php file visit your site’s homepage and then right click and select View Page Source. After making the changes do the same thing and make sure both those source pages match, specifically the first four lines.

Screen+Shot+2012 07 24+at+7.38.50+PM How To: Change the Default Doctype in Genesis Themes

Click image to enlarge

You can also further validate your html markup by checking with the W3C markup validation service. Don’t worry if you have lots of errors, just make sure there aren’t errors pertaining to your site’s doctype.

If you encounter any problems or require any personal assistance please feel free to drop by and express your thoughts.

Want more such tutorials? Subscribe to our weekly newsletter to make sure you never miss ‘em again!

Subscribe to our Weekly Newsletter

I take your privacy very seriously

Comments

  1. GaryJ Reply

    What syntax errors were you having with my original code?

    Note that your display of code here isn’t copy and paste-able, as the single and double quotes have been converted to curly equivalents.

    • Gautam Doddamani Reply

      hi gary thanks for your comment here is the error that i was getting..i think it has something to do with the starting php tag…

      Parse error: syntax error, unexpected ‘<’ in /Applications/XAMPP/xamppfiles/htdocs/wordpress/wp-content/themes/news/functions.php on line 93

      PS i tried to make these changes on my XAMPP localhost first before going live.

      • Gautam Doddamani Reply

        i have also enabled the syntax highlighter plugin to remove the curly thingies…thanks for the heads up! :)

      • GaryJ Reply

        To highlight the syntax correctly, Github gists require that an opening PHP delimiter is added – most of my target audience would know enough about PHP to know not to copy and paste that particular line :-)

        • Gautam Doddamani Reply

          bwahaha..wat an idiot i am lol. sorry i will remove that syntax error line from the post…ur code is perfecto :) and many thanks for adding the trackback on ur post dude..keep rockin and its nyc meetin ya :D

  2. Michael Reply

    In researching a problem with a client website using Genesis and Serenity child theme I came across this post.

    My client claims he’s seeing lines through text on a certain page of his website. Using ghe developer tools in IE10 I was able to see the lines he described only when in IE7 compatibility mode. I called my client, accused him of using IE7 and he checked. He’s using IE9. So I had him check the developer tools and lo and behold, his browser mode was IE9 but his document mode was IE7. When he switched his document mode to IE8 or IE9 the lines went away.

    But the real problem is when he quits the browser and restarts and revisits the page, it reverts back to IE7 standards document mode.

    So does that indicate that Genesis is the cause of this? Would your fix work for me?

Leave a Reply

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail.