• Resolved jpl980

    (@jpl980)


    Can someone please let me know how I can add HTML5 support to a WordPress theme that was created pre-HTML5? Specifically, I’m using the WP-Adapt Theme. I understand I’m supposed to put this code somewhere in the functions.php file?

    add_theme_support( ‘html5’, array( ‘comment-list’, ‘comment-form’, ‘search-form’, ‘gallery’, ‘caption’ ) );

    Apologies, but I know very little about coding, so I was hoping someone could tell me exactly what to enter where.

    Also, if there’s anything I need to also do in conjunction with any other style sheets to maintain control of how each of these elements appear once HTML5 is turned on for my site theme, I’d welcome input on that too.

    Thanks!

Viewing 11 replies - 1 through 11 (of 11 total)
  • Jenny Beaumont

    (@jennybeaumont)

    Hi jpl980,

    Here’s an example of how it is inserted in the default underscores boilerplate :

    function example_setup() {
    
    	/*
    	 * Make theme available for translation.
    	 * Translations can be filed in the /languages/ directory.
    	 * If you're building a theme based on example, use a find and replace
    	 * to change 'example' to the name of your theme in all the template files
    	 */
    	load_theme_textdomain( 'example', get_template_directory() . '/languages' );
    
    	// Add default posts and comments RSS feed links to head.
    	add_theme_support( 'automatic-feed-links' );
    
    	/*
    	 * Enable support for Post Thumbnails on posts and pages.
    	 *
    	 * @link http://codex.wordpress.org/Function_Reference/add_theme_support#Post_Thumbnails
    	 */
    	//add_theme_support( 'post-thumbnails' );
    
    	// This theme uses wp_nav_menu() in one location.
    	register_nav_menus( array(
    		'primary' => __( 'Primary Menu', 'example' ),
    	) );
    
    	// Enable support for Post Formats.
    	add_theme_support( 'post-formats', array( 'aside', 'image', 'video', 'quote', 'link' ) );
    
    	// Setup the WordPress core custom background feature.
    	add_theme_support( 'custom-background', apply_filters( 'example_custom_background_args', array(
    		'default-color' => 'ffffff',
    		'default-image' => '',
    	) ) );
    
    	// Enable support for HTML5 markup.
    	add_theme_support( 'html5', array(
    		'comment-list',
    		'search-form',
    		'comment-form',
    		'gallery',
    		'caption',
    	) );
    }
    endif; // example_setup
    add_action( 'after_setup_theme', 'example_setup' );

    Notice that it’s within the theme’s basic setup function.

    Hope that helps!
    More info:
    http://underscores.me/
    https://codex.wordpress.org/Semantic_Markup

    best,
    -jennyb

    Thread Starter jpl980

    (@jpl980)

    JennyB, thanks so much for your quick response. So, to clarify, would I:
    1) copy & paste this entire code into the functions.php file? Can I also just copy & paste in the specific functionality I want a la carte, or does that break the code?
    2) replace the word “example” with the name of my theme? (do you know how I can find the name of my theme in the correct syntax?)

    Finally, does this need to go anywhere in particular in my functions.php file?

    For reference, I’ve attached my functions.php code here. Thank you so much!

    <?php
    /**
     * Adapt functions and definitions.
     *
     * Sets up the theme and provides some helper functions
     *
     * When using a child theme (see http://codex.wordpress.org/Theme_Development
     * and http://codex.wordpress.org/Child_Themes), you can override certain
     * functions (those wrapped in a function_exists() call) by defining them first
     * in your child theme's functions.php file. The child theme's functions.php
     * file is included before the parent theme's file, so the child theme
     * functions would be used.
     *
     *
     * For more information on hooks, actions, and filters,
     * see http://codex.wordpress.org/Plugin_API
     *
     * @package WordPress
     * @subpackage Adapt
     * @since Adapt 2.0
     */
    
    /*--------------------------------------*/
    /* Define Constants
    /*--------------------------------------*/
    define( 'WPEX_JS_DIR', get_template_directory_uri().'/js' );
    define( 'WPEX_CSS_DIR', get_template_directory_uri().'/css' );
    
    /*--------------------------------------*/
    /* Globals
    /*--------------------------------------*/
    if ( ! isset( $content_width ) ) $content_width = 980;
    require_once( get_template_directory() .'/functions/theme-setup.php');
    
    /*--------------------------------------*/
    /* Admin Panel
    /*--------------------------------------*/
    require_once ( get_template_directory() .'/admin/index.php' );
    require_once( get_template_directory() .'/functions/return-smof-data.php' );
    
    /*--------------------------------------*/
    /* Include functions
    /*--------------------------------------*/
    require_once( get_template_directory() .'/functions/widgets/widget-areas.php' );
    require_once ( get_template_directory() .'/functions/helpers.php' );
    
    if ( wpex_get_data( 'portfolio_post_type' , '1' ) == '1' ) {
    	require_once( get_template_directory() .'/functions/post-types-taxonomies/register-portfolio.php' );
    	require_once( get_template_directory() .'/functions/helpers.php' );
    }
    if ( wpex_get_data( 'highlights_post_type' , '1' ) == '1' ) {
    	require_once( get_template_directory() .'/functions/post-types-taxonomies/register-highlights.php' );
    }
    if ( wpex_get_data( 'slides_post_type' , '1' ) == '1' ) {
    	require_once( get_template_directory() .'/functions/post-types-taxonomies/register-slides.php' );
    }
    
    require_once( get_template_directory() .'/functions/post-types-taxonomies/taxonomies-labels.php' );
    require_once( get_template_directory() .'/functions/post-types-taxonomies/post-type-labels.php' );
    
    if( is_admin() ) {
    	require_once ( get_template_directory() .'/functions/meta/usage.php' );
    } else {
    	require_once( get_template_directory() .'/functions/scripts.php' );
    	require_once( get_template_directory() .'/functions/excerpts.php' );
    	require_once( get_template_directory() .'/functions/posts-per-page.php' );
    	require_once( get_template_directory() .'/functions/external-plugins-support.php' );
    	require_once( get_template_directory() .'/functions/comments-callback.php');
    	require_once( get_template_directory() .'/functions/image-default-sizes.php');
    	require_once( get_template_directory() .'/functions/pagination.php');
    	require_once( get_template_directory() .'/functions/aqua-resizer.php');
    
    	if ( wpex_get_data ( 'builtin_retina', '0' ) == '1' ) {
    		require_once( get_template_directory() .'/functions/aqua-resizer-ratio-check.php');
    	}
    
    }
    Jenny Beaumont

    (@jennybeaumont)

    Hey,

    So, it looks like there’s a functions folder with a theme-setup.php file. That’s where you’ll find your theme setup, and it’s probably a good spot to add this support.

    No, don’t copy paste the whole thing above, and yes, “example” is the theme name I gave the boilerplate before downloading it. Looks like your theme/text domain is “wpex”.

    You want to look for the closing bracket of your theme setup function, then just add this bit :

    // Enable support for HTML5 markup.
    	add_theme_support( 'html5', array(
    		'comment-list',
    		'search-form',
    		'comment-form',
    		'gallery',
    		'caption',
    	) );

    🙂

    Thread Starter jpl980

    (@jpl980)

    JennyB,

    All makes sense. I’ve edited the theme-setup.php file in that folder path, so I put it there, and everything seems to be working. Thank you so much!

    On a somewhat related note, once I do add HTML support into my theme, the only issue I now have is that I seem to lose control of caption text, which seems to default to the text treatment of my body paragraph text. In the past, I was able to modify my style.css file to adjust caption font sizes, line height, etc, but now with the new HTML5 active, I can’t seem to modify the caption text styling. Do you know how I can regain control of how caption text looks in WP 3.9? I noticed WordPress discussed how 3.9 captions changed here: <a

    As reference, I’ve pasted that portion of my style.css sheet here.

    /*captions*/
    .wp-caption { border: 1px solid #c6c6c6; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
    .wp-caption img { margin: 0; padding: 0; border: 0 none; }
    .wp-caption p.wp-caption-text { font-size: 11px; line-height: 15px; padding: 0 4px 5px; margin: 0; }

    I can also post this as a separate discussion if more appropriate. Thank you for your help!

    Jenny Beaumont

    (@jennybeaumont)

    hey, glad that helped 🙂
    can you post a link to a page with captions?

    Thread Starter jpl980

    (@jpl980)

    Sure. Here are two:
    http://ilumity.com/media/press/
    http://ilumity.com/services/speaking/

    Before adding the HTML5 theme support, the caption text appeared like what you see right now, which I like. However, if I update it to the HTML5 version (making live the modifications you suggested above), the caption text seems to be really large, and if I try to adjust in style.css, there’s no affect on the caption text size. I am, however, able to control the padding. Just seems the text size is locked. Not sure if this is forced by the HTML5 WP 3.9 formatting?

    Feel free to let me know if you want me to also let you see the version w/HTML5 active, and I can upload that version of the php file to make my site live under that condition. Thank you so much!

    Jenny Beaumont

    (@jennybeaumont)

    the style element is locked on to the p tag, which is probably stripped out with the html5 markup…yes, please post the implemented version so I can see! 🙂

    Thread Starter jpl980

    (@jpl980)

    Okay, I’ve implemented the HTML5 version with the code above in the theme-setup.php file. The site is now live with this rendering.

    What you’re describing with the p tag locking up the caption tag seems to be what’s happening. They seem to have the same font treatment, and for some reason, I can’t seem to control them individually anymore as I could pre WordPress 3.9/HTML5. Perhaps 3.9 doesn’t allow this control?

    Thanks so much for all your help.

    Jenny Beaumont

    (@jennybeaumont)

    ok, so two options:
    1) remove captions from the html5 implementation
    2) edit the style sheet, changing p.wp-caption-text to .wp-caption-text

    either should do the trick 🙂
    -jennyb

    Thread Starter jpl980

    (@jpl980)

    Jenny,

    You are a genius! I followed step #2, and it worked exactly as I hoped. FIXED! You helped me solve two issues I’ve been wrestling with for the past 24 hours with no progress, and in your notes here, you’ve 100% fixed my issues. Thank you so much for your help. I really appreciate it.

    Jenny Beaumont

    (@jennybeaumont)

    Glad I could help! 🙂

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘How to add HTML5 support to WordPress theme?’ is closed to new replies.