Twenty Twelve

Recently the new WordPress theme Twenty Twelve became available.

twentytwelve screenshot

The new Twenty Twelve theme is fully responsive and mobile-friendly:

  • The theme contains a mobile-friendly menu

    On small screens the menu is displayed as a button. Clicking on this button results in a horizontal menu that fits on smaller screens.

  • Images in posts are fully responsiveI have added an image post where the width and height of the image are (automatically) set (to 580px and 484px respectively). With the Twenty Twelve theme this image scales beautifully to smaller sizes on screens with a lower resolution. Because Twentye Twelve makes the images in our posts responsive – even if we have set the width and height – we can simply import older posts without having to make any changes manually.
  • The layout is responsive. No surprises here obviously. This feature was already introduced in the Twenty Eleven theme.

Integration with jQuery Mobile

I have integrated jQuery Mobile into the new Twenty Twelve theme. The integration of jQuery Mobile has the advantage of introducing listviews of posts and collapsible widget-lists into the Twenty Twelve theme. And of course the other features of jQuery Mobile that are specifically tuned to mobile screen.

In my post Tutorial about integration of jQuery Mobile into WordPres theme I already explained how you can integrate jQuery Mobile into a WordPress theme. Because that tutorial can also be used to integrate jQuery Mobile into TwentyTwelve I will nog repeat the explanation here. I will simply show you the files of the theme and provide you with a download link to the source files.

But first I will show you what the finished theme looks like on a mobile screen.

You can click on elements and/or scroll the theme in the iphone-image below:

In keeping with the style of the Twenty Twelve theme I have chosen to set the style of the integrated theme with theme swatches c, d and a. If you prefer more lively colors you can easily change this by setting another theme swatch with the property “data-theme” in the header, index and sidebar files.

The Twenty Twelve theme default settings do not display a header image. I have chosen to do so as well for the integrated theme that you can see on the iphone above. If you want to display a header image you can easily do so (Dashboard -> Appearance -> Header) where you can upload (and crop) one or more header images.

Header

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7 | IE 8]>
<html class="ie" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).delegate("#jqm-page","pageinit", function() {
$.mobile.ajaxEnabled=false;
 });
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div class="hfeed site" data-role="page" id="jqm-page">
	<header id="masthead" class="site-header" role="banner">
    	<div data-role="header" data-position="inline" data-theme="c">
		
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"data-icon="home" class="ui-btn-right">Home</a>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</div>
		<nav id="site-navigation" class="main-navigation" role="navigation" data-role="navbar">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<div class="skip-link assistive-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->

		<?php $header_image = get_header_image();
		if ( ! empty( $header_image ) ) : ?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
		<?php endif; ?>
	</header><!-- #masthead -->

	<div id="main" data-role="content">

Index

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * For example, it puts together the home page when no home.php file exists.
 *
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */

get_header(); ?>

	<div id="primary">
		<div id="content" role="main">
		<?php if ( have_posts() ) : ?>

            <ul data-role="listview" data-inset="true" data-theme="d">

			<?php /* Start the Loop */ ?>
			<?php while ( have_posts() ) : the_post(); ?>
				<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
			<?php endwhile; ?>
			</ul>
			<?php twentytwelve_content_nav( 'nav-below' ); ?>

		<?php else : ?>

			<article id="post-0" class="post no-results not-found">

			<?php if ( current_user_can( 'edit_posts' ) ) :
				// Show a different message to a logged-in user who can add posts.
			?>
				<header class="entry-header">
					<h1 class="entry-title"><?php _e( 'No posts to display', 'twentytwelve' ); ?></h1>
				</header>

				<div class="entry-content">
					<p><?php printf( __( 'Ready to publish your first post? <a href="%s">Get started here</a>.', 'twentytwelve' ), admin_url( 'post-new.php' ) ); ?></p>
				</div><!-- .entry-content -->

			<?php else :
				// Show the default message to everyone else.
			?>
				<header class="entry-header">
					<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentytwelve' ); ?></h1>
				</header>

				<div class="entry-content">
					<p><?php _e( 'Apologies, but no results were found. Perhaps searching will help find a related post.', 'twentytwelve' ); ?></p>
					<?php get_search_form(); ?>
				</div><!-- .entry-content -->
			<?php endif; // end current_user_can() check ?>

			</article><!-- #post-0 -->

		<?php endif; // end have_posts() check ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Sidebar

<?php
/**
 * The sidebar containing the main widget area.
 *
 * If no active widgets in sidebar, let's hide it completely.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?>

        <div id="secondary" data-role="collapsible-set" data-collapsed="true" data-theme="a">

			<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar')) : else : ?>

            	<aside id="widget-search">			
						<?php get_search_form(); ?>
				</aside>

				<aside id="widget-archives" class="widget widget_archive" data-role="collapsible">
					<h3 class="widget-title"><?php _e( 'Archives', 'twentyeleven' ); ?></h3>
					<ul>
						<?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
					</ul>
				</aside>

                <aside id="widget-categories" class="widget widget_categories"  data-role="collapsible">
					<h3 class="widget-title"><?php _e( 'Categories', 'twentyeleven' ); ?></h3>
					<ul>
						<?php wp_list_categories(array(
						'show_count' => true,
						'title_li' => '',
						)); ?>
					</ul>
				</aside>

				<aside id="meta" class="widget" data-role="collapsible">
					<h3 class="widget-title"><?php _e( 'Meta', 'twentyeleven' ); ?></h3>
					<ul>
						<?php wp_register(); ?>
						<li><?php wp_loginout(); ?></li>
						<?php wp_meta(); ?>
					</ul>
				</aside>

		</div><!-- #secondary -->
	<?php endif; ?>

Searchform

<form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get">
<div data-role="fieldcontain">
<input type="search" id="s" name="s" value="" placeholder="Search" />
</div>
</form>

Functions

<?php

if ( ! function_exists( 'twentytwelve_content_nav' ) ) :
/**
 * Displays navigation to next/previous pages when applicable.
 *
 * @since Twenty Twelve 1.0
 */
function twentytwelve_content_nav( $nav_id ) {
	global $wp_query;

	if ( $wp_query->max_num_pages > 1 ) : ?>
		<nav id="<?php echo $nav_id; ?>">
			<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
			<div class="nav-previous alignleft"><?php next_posts_link( __( 'Older', 'twentytwelve' ) ); ?></div>
			<div class="nav-next alignright"><?php previous_posts_link( __( 'Newer', 'twentytwelve' ) ); ?></div>
		</nav><!-- #<?php echo $nav_id; ?> .navigation -->
	<?php endif;
}
endif; // twentytwelve_content_nav

add_filter('next_posts_link_attributes', 'jquerymobile_next_posts_link_attributes');
add_filter('previous_posts_link_attributes', 'jquerymobile_prev_posts_link_attributes');

function jquerymobile_next_posts_link_attributes(){
	return 'data-role="button" data-icon="arrow-l"';
}
function jquerymobile_prev_posts_link_attributes(){
	return 'data-role="button" data-icon="arrow-r"';
}

Style

/*
Theme Name: Twenty Twelve with jQuery Mobile
Theme URI: http://www.webdesignforbeginners.info
Author: Theo
Author URI: http://www.webdesignforbeginners.info
Description: Child theme for the twentytwelve theme and integration with jQuery Mobile
Template: twentytwelve
*/

@import url("../twentytwelve/style.css");

/* Structure
----------------------------------------------- */

div#jqm-page {
	position: relative;
    margin: 2em auto;
    max-width: 1000px;
	margin-top: 0;
}
#primary {
	float:left;
    margin: 0 2.6% 0 0;
    width: 60.4%;
}
#secondary {
    float: right;
    margin-right: 2.6%;
    width: 31.8%;
}

/* Typography 
----------------------------------------------- */

body {
	font-family: "Open Sans",Helvetica,Arial,sans-serif;
}
.ui-body-c .ui-link {
    color: #666666;
}

/* Header 
----------------------------------------------- */

header .ui-header > a.ui-btn {
    display: inline-block;
    margin-top: 6px;
}
.site-header h2 {
	color: #666;
}

/* Navigation pages
-----------------------------------------------*/

.main-navigation {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999999;
}
.main-navigation li a {
	line-height: 1;
}

/* Navigation posts
----------------------------------------------- */

.nav-previous, .nav-next {
	width:45%;
}

/* Searchform 
----------------------------------------------- */

input#s {
	background:none;
}
#searchform .ui-field-contain input.ui-input-text, 
#searchform .ui-field-contain textarea.ui-input-text, 
#searchform .ui-field-contain .ui-input-search {
	width: 100%;
}

/* Widgets 
----------------------------------------------- */

.widget-title {
	text-transform: none;
}
#secondary .ui-btn-hover-a { 
	text-decoration: none;
}
.widget-area .widget p, .widget-area .widget li, .widget-area .widget .textwidget {
    line-height: 1.84615;
}
.ui-body-c .ui-link {
    font-weight: normal;
	line-height: 1.84615;
}

/* Footer
----------------------------------------------- */

.site-info {
	text-align: center;
}

/* Responsive
----------------------------------------------- */

@media (max-width: 600px) {

body {
	padding: 0;
}
.nav-previous .ui-btn-inner, .nav-next .ui-btn-inner {
	padding: 0.6em 0px;
}
#primary {
	float:left;
    margin: 0;
    width: 95%;
}
#secondary {
    float: left;
    margin: 0;
    width: 95%;
}
header .ui-header > a.ui-btn {
    display: inline-block;
    margin-top: 6px;
	margin-right: 25px;
}
@media (max-width: 1060px) {

div#jqm-page {
	margin: 0;
	padding: 0;
}

}

Write a comment and like my Facebook page and I will send you the source files for this theme.