UPDATE: Although the following still exists and is available I have now released a WordPress plugin which gives the same output as the child theme but with the added benefit that it is hosted on the WordPress.org repository. The plugin can be downloaded here.
After reading about Jon Hicks implementation of media queries on his site to make it more responsive to user’s browsing context and the release of the (highly recommended) latest WordPress build I thought it was time to get my feet wet with Responsive site design.
After toying with the idea of implementing this on one of my client sites I thought “Hey! hold on I’m using WordPress 3.0 default theme on my blog… why not extend this?”. And so that’s exactly what I’ve done. I’ve created a child theme for TwentyTen which not only makes it fluid (up to 940px) but also makes it more responsive at smaller sizes. As well as these I’ve added some extra CSS to make it handle iphone and android browsers too thanks to some interesting articles by The CSS Ninja and riklaunim
The result of this the current 0.1 version of the Responsive Twenty Ten WordPress theme. It should be noted that this is a current work in progress which is one of the reasons that I’ve not published it to the WordPress.org themes directory just yet. There are a few known issues still too;
- IE fluidity is not implemented – seemed to cause issue with the CSS introduced to pick up mobile resolutions (portrait and landscape).
- Mobile (read Android and iPhone) have some issues dealing with the orientation. Still looking into this. Update – fixed 😉
- Requires use of some JS for IE (though I’ve disabled this at the moment.]
- Not got round to validating the CSS yet (naughty naughty, yes I know). Update – fixed 😉
The theme is essentially a fluid version of the default Twenty Ten theme with a fixed maximum width. The extra “responsive” magic comes in when the browser viewport width drops below 661px. What then happens is that the primary and secondary sidebars drop below the main content and appear just above the footer. Some tiny extra rules come into play for iphone and android browsers too to make the page layout flow better.
By all means download the theme in it’s alpha state and let me know your views. Of course you can just have a play with this site as I’m using it at present too.
this particular page doesn’t seem to look right on Chrome, but your other pages do. unusual…
Trenton,
Thanks for the comment… though the page looks OK to me. Could you give me some details about what you think is wrong?
Ta,
Todd
Flexible width is practical for the 21st Century.
Hopefully the child theme will grow into the core theme.
Thanks
Thank You!
I think your responsive child theme is great. I’m surprised there’s not more responsive themes out there.
On the IE fluidity…I don’t think it’s an issue. IE doesn’t support CSS media queries until version 9 anyways. And so what? The media queries are for browsers you’d find on most mobile devices (iPhone, Android) which all support the media queries.
This is nice. I am a fan of WordPress’ latest Twenty Ten theme and it is great to see other child themes out there. Would you have any demo site to showcase your new child theme? I would like to take a look before trying the WordPress template. Thanks in advance 🙂
Hey Towkay,
Thanks for the comment.
This site here actually uses this child theme… if you view it on a phone or resize it when viewing in chrome/firefox/safari etc then you should see the results.
Hi Todd,
Thanks for the plugin, this is the best mobile version I’ve found so far!
I found that if an image is not an inline element, it doesn’t scale.
Also, if there is a caption under this kind of image, it doesn’t scale.
Hey Seppo,
Ta very much for commenting… do you have a link to a page where you’re seeing this issue so I can see it in action please?
Thanks again,
Todd
Try here:
http://naatti.net/
It is a bit modified Twenty Ten theme.
Seppo,
Looks like I might’ve been a bit “eager” with using the latest and (un-released) greatest version of the twenty ten theme. I have released a 0.0.2 version of the plugin which should hopefully pull in some of the more useful CSS from alpha version of the theme and as such should hopefully result in a better display of images for you. This can be downloaded from the WordPress plugin repo.
Please let me know how things go.
Todd
Thanks Todd!
You were swift!
It works now. 🙂 Captions are readable & images scales.
Only tiny inconvenience is, that these no-inline images scale only horizontally, not vertically, so they’ll be squeezed. =:]
Seppo, I have uploaded a fix for this in version 0.0.3… seems that I wasn’t overwriting the img style if explicitly set inline. I have added an extra line to the css which should now mean that the image ratio is kept.
Todd, thanks again! Now it is perfect! Looks very nice via iPhone.
I will surely include this my own site too after I’ve updated it to Twenty Ten style. =:)
PS. The number of the version is still 0.0.1 in WP plugin directory & plugin list, so it won’t update straight away. I had to remove the plugin, and reinstall it. No big problem though.
Super great news about your site… and thanks for letting me know about the version issue… seems like I might not have tagged the files in the SVN repository correctly, I’ll look into it.
Great child theme, Todd. I love the way it works and hope you can add the dreaded IE to browsers that it works on.
One thing I want to do with my implementation of it is to remove the comments box from the Home Page and the Contacts page. Both pages are using the default template.
In the repository it has been suggested to do this by setting up a new template, but with the complexity of your CSS I’m hesitant to go that way. Perhaps it should be a function conditional on named page (“if is_home” etc.) Any ideas that might help me?
Thanks,
Peter
Hey Peter,
Thanks for the kind words.
Can you please explain further what you mean by “comments box”? Is this the “recent comments” on the sidebar or the option to leave a comment?
Thanks for your reply. This is the “Leave a Reply” form that I typing in right now. I want to remove this from the Home Page (for stylistic reasons) and from the Contact page (redundant). My site is peterwade.com. Any help is greatly appreciated.
Thanks,
Peter
Peter,
For the contact page this should be as simple as unchecking the “Allow comments” checkbox when in the admin screen for the contact page.
As for removing it from your home page I have had a look at your site and don’t see it displayed, so I take it you have fixed it there.
Ta,
Todd
Thanks, Todd. I keep forgetting that WP now hides that stuff under Screen Options.
Thanks! Simple and Clean theme!
Hi Todd! really awesome child theme you’ve built here!
I am trying it with a little mod: I pulled out a “home.php” which has the capability of displaying three columns containing the latest threes post each. The way I did this is by means of putting the loop inside a ul > li structure. I css’d the li’s which have a class “article” with the property “display:inline” which causes them to align horizontally side by side. The li ‘s are wrapped inside a ul classed with a fixed widht of 900px (if I give it 100% the li’s show up pancaked not inline) So far so good, but when I scale the browser, the li’s act as “overflow:hidden” that is, they don’t drop down and show in a vertical mood but go hidden to the right, and of course, horizontal bar appears at the bottom.
I am really a newbie here, so any input on the way to solve this would be more than appreciated!
here’s the html:
trim(strip_tags( $post->post_excerpt )),
'title' => trim(strip_tags( $post->post_title )),
);
$thumbID = get_the_post_thumbnail( $post->ID, 'background', $imgsrcparam ); ?>
<a href="" class="preview">
<a href="" title="">
Publicado: ˑ
And here’s the css:
.ncols{
width: 900px;
}
.article{
display: inline;
width: 300px;
float:left;
list-style-type: none;
padding:20px;
background-color: #efefef;
margin-right:10px;
}
Cheers and thank you for the good work!
Oh! the html didn’t come out complete!
Here is it (I hope)
trim(strip_tags( $post->post_excerpt )),
'title' => trim(strip_tags( $post->post_title )),
);
$thumbID = get_the_post_thumbnail( $post->ID, 'background', $imgsrcparam ); ?>
<a href="" class="preview">
<a href="" title="">
Publicado: ˑ
Hey Ferpont,
Do you have a link I could take a look at?
Actually it was a local installation… anyway, I solved the problem by giving the li’s a 100% width, then all came into shape!
Thank you for you excellent work!
A bug in style.css, to reproduce add widgets to all 4 footer-areas and resize, the fourth will be wrapped down much too soon because the margin-right: 20px; of first-third is not responsive.
Wrong:
#footer-widget-area .widget-area,
#site-generator,
#site-description {
width: 23.40425535%; /* 200px / 940px */
}
Fixed:
#footer-widget-area .widget-area,
#site-generator,
#site-description {
width: 23.40425535%; /* 220px / 940px */
}
#footer-widget-area .widget-area {
margin-right: 2.12765957%; /* 20px / 940px */
}
PS. Plugin has issues too, includes the style.css twice, and once from wrong location.
Three more similar “hardcoded px” bugs in style.css, fixed code (‘was:’ is old code) :
@media only screen and (min-width: 481px) and (max-width: 1024px){
#wrapper {
margin: 2.12765957% auto; /* 20px / 940px */ /* was: 20px auto; */
...
}
...
#content {
...
margin: 0 29.787234% 0 2.12765957%; /* 20px / 940px */ /* was: 0 29.787234% 0 20px; */
}
...
}
@media screen and (max-width: 660px) {
#wrapper {
margin: 0.53191489% auto; /* 5px / 940px */ /* was: 5px auto; */
...
}
Hey Wobble,
Really appreciate the feedback… I’ll include these changes and credit you in the next release. I hope to have the next version out at some point in June.
Ta,
Todd
Hey Todd, Quick question. It’s not clear if it’s a plugin or a complete theme.
Is this the download http://gingerbreaddesign.co.uk/responsivetwentyten.1.0.zip
Thanks
Hey C raig,
Sorry for the confusion… the truth is that it is available as either 😉
You can download it from the link you specified as a standalone theme of from the WordPress.org repo ( http://wordpress.org/extend/plugins/responsive-twentyten/ ) as a plugin.
I’d suggest going with the plugin route as it means you’ll still be getting the TwentyTen base theme updates from WordPress as well as any updates I make to the plugin.
Hope this helps,
Todd
The plugin does not really work, it tries to include the styles several times, also from wrong paths.
Private note: Please get in touch with my given email in this post before a new release (for correct credits), will also beta-test and fix the plugin if required.
I’ve downloaded the responsivetwentyten.1.0 file. But can’t understand how I will use it. Now I’m trying…
Hope it works perfectly. Thanks.
I had been trying to make a responsive theme for my technology website, but always left with some errors. Then I tried to search a ready made twenty ten responsive theme so that I won’t have to put strain on my mind. Finally I found your child theme and all I have to say is Awesome work ! Fantastic ! Thank You…