Thesis Mobile is a child theme for use with the Thesis WordPress theme. Thesis Mobile automatically formats your site to a more mobile friendly format.
Thesis Mobile is a true child theme, so it uses all your Thesis settings, but also has its own custom folder so that you can make customisations especially for your mobile site.
This child theme is most effectively used with a mobile theme switching plugin, such as Mobile Smart. I use Thesis Mobile + Mobile Smart on kristarella.com (click to view mobile theme).
Get it while it’s cheap! Only $2.99
Features
- Removes sidebars for streamlined viewing
- Makes whole post excerpts clickable for easier navigation on small screens (only with javascript enabled browsers)
- Uses the Thesis options you’ve already set up
Installation instructions
- Upload Thesis Mobile to your themes directory
- Make sure that you have Thesis version 1.8 or above installed in the themes folder (only version 0.2 of the child theme works with Thesis 1.8.3), either with the folder name “thesis”, or edit ThesisMobile/style.css one line 7 “thesis” to your Thesis folder name
- Activate and configure your mobile theme switcher to use Thesis Mobile on mobile devices
- If you’re using a caching plugin, check the settings to make sure mobile devices and regular browsers use different cache files (if you’re using W3TC this is in the User Agent Groups settings)
Copying your modifications to Thesis Mobile
- Copy layout.css from your active Thesis custom folder to ThesisMobile/custom/
- If you are using custom CSS and functions with Thesis you can add these to Thesis Mobile in one of two different ways
- Use the following code in ThesisMobile/custom/custom_functions.php to use the custom files directly from your main Thesis folder
include_once(TEMPLATEPATH.'/custom/custom_functions.php'); wp_enqueue_style('thesis-custom-css', get_bloginfo('template_url').'/custom/custom.css'); - Copy the custom files from your Thesis custom folder to the Thesis Mobile custom folder to be able to edit them especially for use with Thesis Mobile.
- Use the following code in ThesisMobile/custom/custom_functions.php to use the custom files directly from your main Thesis folder
Use a mobile menu
To use a slimmed down menu on your mobile site (highly recommended) you can use the WordPress Menus feature to create a separate menu and then swap the menu by adding the following code to ThesisMobile/custom/custom_functions.php
function custom_nav() {
?>
<div id="nav_area" class="full_width">
<div class="page">
<?php wp_nav_menu( array('menu' => 'Mobile menu' )); ?>
</div>
</div>
<?php
}
remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_html','custom_nav');
Mobile menu is the name you gave to the menu in the Appearance Menus admin page, so either name your menu that, or change the name in the code to the name you used when you set up your menu.
Sidebars and widgets
You can re-add your sidebars by pasting add_action('thesis_hook_after_content','thesis_sidebars'); into ThesisMobile/custom/custom_functions.php, or you can add new content areas using hooks and filters in the usual Thesis way.
That’s it! Enjoy!
Please ask your questions and make your feature requests below. Thanks!
{ 125 comments… read them below or add one }
Congratulations!! This is FANTASTIC…. :-)
A couple of questions on the child theme:
a) Does this support analytics?
b) Does this support Adsense?
Avinash — Yep, it all works the same way Thesis regularly works, so your analytics code can be added via a hook, or if it’s already in the Thesis Options, then it’s already included. Same with Adsense except if your only ads are in the sidebar you’ll either have to add the sidebars back in or pick a new place for the ads and insert with a hook.
Hi There Kristen,
Thanks for this fantastic mobile theme! I was just looking at Analytics and noticing the percentage of people that were using mobile browsers to access my site. So this is just in time for me.
One question though, when I access my site using a mobile browser it cuts about 1/4 off of my header, and the text does not extend across the full length of the page. Any suggestions to resolving this problem?
Thanks!
What a great theme for Thesis! Thank you very much!
By the way, I found it to be easier to set it up with the mobile switcher in the old WordPress Mobile Pack. I’m not a patient code editor, and I couldn’t find a way to select your theme with the Mobile Smart plugin. Probably my fault for just overlooking the right setting or something.
Chris — I think the reason it’s not extending the full -width is because it thinks that the page should only be 960px wide (or the width of the browser you’re using, which I think is 960px on newer iPhones), but
#header #logo ais set to be much wider than that in your CSS. I would recommend making a smaller version of the header and changing that width for the mobile theme, or you could just try making the width of the logo link 100% rather than a specific numeric value, which should at least help with not filling up the page.There are some quirks in the way mobile browsers with zoom & scale functionalities treat stuff like this. I haven’t quite worked out all the kinks, particularly because each will affect a different site a different way, depending on the content… if I get them all figured out I’ll release an update or a blog post about it.
Tim — Hey, whatever works for you! the Mobile Pack looks like a good plugin. The Mobile Smart settings are in the WordPress settings menu under “Mobile Smart”; I think it took me a few minutes to find them too— never know whether a plugin wil put its settings under settings, or Tools, or Appearance if it’s theme related.
This is absolutely fantastic :) Good work…
Kristen…thanks so much! I’ll give that a try!
Hi Kristen,
Your suggestion of 100% worked. I still need to work on resizing the header, but that can wait for a little bit.
Great work! And thanks again!
I currently use the Thesis Grunge theme from Thesisthemes.com – it has it’s own custom css and php files that it uses. Any idea if this will work in conjunction?
Thanks!
have you done any testing as to any slow-down in page speed caused by the mobile switching plugin or any adverse seo impact? thank you very much for making this child theme – last time i used one (apparently developed by nokia) it somehow corrupted wordpress, and before it did, looked terrible and was clumsy to use.
Jeremy — It should work, but you may need to include the files as demonstrated in the instructions.
Dave — I haven’t done any particular testing regarding speed with the plugin on or off. In terms of SEO, Google should appreciate having a slimmed down site on mobile platforms: it should make the site faster to load on mobiles (I’m not sure if Google actually crawls mobile sites that have the same URL as the main site though). This chid theme is definitely not clunky; it should just work with all the pages on your site. I’ve noticed some width quirks on my site, when there’s code blocks that are wider than the page; I need to add some CSS to fix that. And in the comments above you can see the issue Chris had with the header width, but otherwise it’s all been working smoothly.
I uploaded and tried to install, but got the below message. I have never before installed a child theme. It is just like installing a parent theme?
Dave
——-msg below —–
Broken Themes
The following themes are installed but incomplete. Themes must have a stylesheet and a template.
Name
Thesis Mobile Child Theme
Description
The parent theme is missing. Please install the “thesis” parent theme.
Dave — (answering from my mobile) the install instructions should be above… You need Thesis in your themes folder as a template/parent theme and the Thesis folder either needs to be called “thesis” or you need to edit the template name in the child theme’s CSS to the name of your Thesis folder.
I was getting the same error message as Dave…about the theme being broken.
After some fiddling, I realized that if you change the folder name from thesis to something like thesis_182, you have to change it in BOTH places inside the style.css file that is located in Kristarella’s mobile theme.
Line 7 where it says Template…and around Line 11 in the path to the parent css file.
Thanks again for putting this theme together…I can’t wait to see how it looks on one of my client sites.
Yep, it pays to read the instructions!
Hello Kristen, sorry for the silly question, but when I activated the mobile child theme from Themes–> Mobile Child Theme, my site is showing all the content in the mobile version.
Also I installed the Smart Plugin but it doesn’t allow me to use the child theme, just the parent Thesis. Any idea? Thanks for your help!
Miguel
Miguel — You don’t activate the child theme in the Themes admin; you only tell the mobile switching plugin (whichever one you are using) to use it. If you have the child theme activated then it possibly won’t show up in the mobile switcher menu because it will assume you want to use something other than the currently active theme. And if it is active as the main theme, you will get the mobile view all the time.
Note that once it is set up properly, if you click the link to see the mobile view on your desktop, it remembers your choice even if you close the tab, so you need to click the link back to the desktop view.
Hello Kristen, It’s working now. Thanks for all your help. I am always learning from you. Take care!
Miguel
Do you have a developper’s license or can one down load be used many times?
Thank you.
Anna — I have no specific licensing at this point in time (which essentially means that you are free to do what you want with the current child theme, but also means you’re not necessarily guaranteed to upgrades etc) because I haven’t really settled on whether I want to or need to do something like that. All I can say is that you’re free to use the current child theme on as many sites as you like, but if you’ve found it super useful, please consider donating more (link in the sidebar).
Hello Kristen, I used your plugin on one of my site and i have set up a custom landing sales page on my home page. Problem is, i am not getting video when i switch to mobile version of theme using link in footer. Check it at here: http://love.tipzy.net/
How have you added the video, how have you made that post the home page, and how did you include the landing page functions (eg include same functions file or copy code over)? I’ll try to replicate it when I have a chance.
Hello, i have made a page and set it as home page in wordpress setting’s reading pane. I have shifted Posts page to ‘Blog’ page (http://love.tipzy.net/blog). I applied ‘Custom Template’ to the home page and i set it as a Front Page in my Front page display setting in reading pane.
Here is Code of Functions.php file. My page id is 17 in it.
/*——:[ Custom Landing Page Style ]:——*/
function custom_remove_defaults($content) { return false; }
function landing_page() { if(is_page(’17′)) {
add_filter(‘thesis_show_header’, ’custom_remove_defaults’);
add_filter(‘thesis_show_sidebars’, ’custom_remove_defaults’);
//add_filter(‘thesis_show_footer’, ’custom_remove_defaults’);
} }
add_action(‘template_redirect’,'landing_page’);
/*—:[ end of code ]:—*/
function landing_header() { if(is_page(’17′)) { ?>
< ?php } }
add_action('thesis_hook_before_html', 'landing_header');
/*------:[ Custom Footer after HTML ]:------*/
function landing_footer_home() { if(is_page('17')) { ?>
Contact email: info@tipzy.net
Disclaimer: Tipzy Network have affiliate relationship with some of the product reviewed on this site.
Tipzy Network is not responsible for any kind of good or bad effect of the program or the product offered
or promoted on any pages. The trademark of any product is solely property of the respected company.
The above statements are a representation of vendor’s experiences, and are narrated by a third party voice actor.
< ?php } }
add_action('thesis_hook_after_html', 'landing_footer_home');
function landing_footer() { ?>
Copyright © 2011 Tipzy Network
add_action(‘thesis_hook_after_html’, ’landing_footer’);
remove_action(‘thesis_hook_footer’, ’thesis_attribution’);
/*—:[ end of code ]:—*/
function remove_nav() {
if (is_page(’83′))
remove_action(‘thesis_hook_before_title’, ’thesis_nav_menu’);
}
add_action(‘thesis_hook_before_html’,'remove_nav’);
Here goes the css for the page having id 17 that is my home page and i have given it a class as ‘landing’
/*——:[ Custom Landing Page Style ]:——*/
body.landing { background-color: #fff; }
.landing #header { background-image: none; }
.landing .page { width: 85em;}
.landing #header, .landing .headline_area, .landing #footer { text-align: center; }
.landing .headline_area h2 {display: none;}
/*—:[ end of code ]:—*/
And i have used FV Wordpress Flowplayer plugin to show video files that is hosted in my webspace. I am using self hosting of my video in my hosting space. And i make it show up using shortcode like this:
[flowplayer src='media/Get-Loved.flv' width=640 height=355 controlbar='hide']
Hi Kristen — thanks for making this theme, and offering it at such a reasonable price. I just have one question before I buy and install, and sorry if it’s a silly one. Still getting my head around mobile theming, and I’m still fairly new to Thesis itself.
My question is about theming for tablets, and how the Thesis Mobile child theme handles that. The normal version of my site actually looks fine on my 10-inch Android tablet, but when I installed a generic mobile theme (I think I used Mobile Pack) it displayed the phone-sized version of my site on my tablet — which looked pretty crap.
I see that Mobile Smart includes support for tablet devices; does that mean if I use it as the mobile theme switcher for Thesis Mobile that my site will detect and display properly for tablets? Or are additional code tweaks/alternate versions of graphics necessary for that?
Thanks!
Jess — You’re welcome!
The redirection depends on the plugin, and Mobile Smart does automatically redirect tablets to the mobile view. The author says he’s working on an admin interface for including & excluding certain devices. Or there might be other plugins that already have that feature. In the mean time for Mobile Smart, it is possible to set a cookie that the plugin responds to in order to get it to display the desktop version. This seems to work for me:
function desktop_tablet() { global $mobile_smart; if ($mobile_smart->DetectTierTablet() && !isset($_COOKIE[MOBILESMART_SWITCHER_COOKIE])) setcookie(MOBILESMART_SWITCHER_COOKIE,'desktop'); $current_page = $_SERVER['PHP_SELF']; header("Location: $current_page"); } add_action('template_redirect','desktop_tablet');Thanks Kristen — I’ll give that a go!
Hmmm. I think I might be missing something really basic here. I’ve installed everything according to the instructions above (excluding the bypass code for tablets you offered — waiting to get the rest working before I tackle that), and in theory it seems to be working. (I’m basing this on the fact that I enabled the manual switching option with footer link in Mobile Smart, and that link is showing up when I view my site on mobile devices. The plug-in has also confirmed, when I saved my options, that it’s using the Thesis Mobile child theme.)
But the mobile version of my site isn’t rendering at a scale that seems very useful for phones — it’s still really tiny. And my sidebars are showing up too, which leads me to believe that something funny is going on.
Any idea what I might have missed?
Site is here: http://half-light.net
(The only pages with sidebars are my blog landing page, which is currently hidden but can be found here: http://half-light.net /blog, and individual post pages.)
Thanks for any help you can offer!
Ack — you can ignore/delete my last comment, Kristen. Looks like it was just a propagation issue. Checked the mobile version again just now and it looks great — no sidebars, proper scaling. Sweet as!
No probs Jess, glad it’s fine :-)
In case anybody else is interested in a mobile theme switcher that easily lets you designate different themes for handheld and tablet devices, I just discovered Device Theme Switcher and it seems to be working like a charm with Thesis Mobile:
https://www.plugpress.com/plugin/device-theme-switcher
Cheers,
Jess
Hello Kristern,
As mentioned in comment 25th, i am still having problem with it. Did you figure out anything helpful?
One more thing i am facing with my site Make him love you
and it is, i am not able to see mobile version of the theme when i manually use the link displayed in the footer.
Minesh — Sorry for the delay: been in holiday mode.
I’m afraid I can’t replicate the issue you are having with the content not showing on the mobile landing page. It’s not just the post content that isn’t showing, but the whole #content div is missing… I can only assume that there’s some other code or plugin incompatibility. Have you tried turning off all other plugins apart from Mobile Smart to see whether it shows the post content (I realise the video shortcode won’t be translated to a video, but it should be visible anyway if it was another plugin interrupting).
As for the other site: not seeing the mobile version on the desktop; I can’t open the site on my mobile. I said “Safari cannot open the page because too many redirects occured.” Try making sure WordPress and all you plugins are up to date, check the mobile smart settings, and if it’s still not working try one or two of the other switching plugins in the comments above to see if they work better.
Hey there, so I’ve tried a bunch of things to get this theme recognized but I’m having trouble. I uploaded it again and this is the message I get from the Theme manager:
~~~~~~
Broken Themes
The following themes are installed but incomplete. Themes must have a stylesheet and a template.
Name Description
Thesis Mobile Child Theme The parent theme is missing. Please install the “thesis” parent theme.
~~~~~
My thesis folder is named “thesis_182″ so I modified the style sheet to reflect this but all that does is change the ‘please install the “thesis” line to ‘please install the “thesis_182″.
One more piece of info and it’s totally my fault. When I installed Thesis I didn’t extract the folder from within the folder so my path to the Thesis theme actually looks like ../thesis_182/thesis_182
I’m not sure if that’s affecting the situation so I’m going to move my theme up a directory and remove the redundancy.
Am I missing a step somewhere to get your child theme recognized by my Wordpress install?
Nevermind. I’m a moron. My mistake was not changing lines 7 and 11 both to reflect the screwy install location of ../thesis_182/thesis_182 . Following directions is so difficult sometimes ;-)
Thanks for this theme! Our InMenlo.com hyperlocal blog now looks great on the iPhone, etc. But I just noticed an issue and can’t figure out what’s happening. If I do a Google search for a page on InMenlo and click on the search result, the article page URL shows briefly but then redirects to the InMenlo home page. Any suggestions as to why that redirect might be occurring?
Scott — do you think the redirect is related to the mobile theme or do you think it’s just coincidence you noticed it at this time? I’m pretty sure there’s nothing in the theme that could cause that; can’t speak for the plugin.
What plugins do you have installed? And what redirect rules do you have in .htaccess?
I don’t think it’s just from a google search: clicking on a post on the home page just goes back to the home page too.
The best way to test is probably to disable all plugins and see if the redirect still occurs then reenable them one at a time to find the culprit.
Oh, I see now that the redirect back only happens on the mobile version. I see you’re using W3TC. Have you got mobile caching set up properly for that?
I found the problem – had added the desktop_tablet function to custom_functions.php – and that seemed to be the culprit. I removed that and everything is now working as it should. Thanks for your help!
Scott — Ew, you’re right. The tablet function should work and not cause that issue if it’s like:
function desktop_tablet() { global $mobile_smart; if ($mobile_smart->DetectTierTablet() && !isset($_COOKIE[MOBILESMART_SWITCHER_COOKIE])) { setcookie(MOBILESMART_SWITCHER_COOKIE,'desktop'); $current_page = $_SERVER['PHP_SELF']; header("Location: $current_page"); } } add_action('template_redirect','desktop_tablet');That’s how I had the function – your code looks identical – but when I removed it, the redirects went away. I’m using W3TC to handle iPads differently from the rest of the mobile devices – anyway, seems to be working great now that I removed that function/hook.
Scott — The code I just posted is different to the code I posted before. The brackets are different.
This child theme shows the images added by custom field post image?
PFF — This child theme just makes Thesis more mobile friendly, so it does the same thing with images that Thesis does. So, it uses the Post Image fields that Thesis provides.
Thanks! I’ll try it!
I have a thesis theme, looks terrible on iphone.
I have a mobile theme, using a theme switcher and detector. I have a menu item for people to view “Blog” posts/pages. But, when viewed, it looks terrible.
Is it possible to:
1. Have user go to mobile theme.
2. When Blog menu item is clicked, it goes to mobile thesis child theme.
Mark — I don’t know. It would depend on your switcher plugin, or the other mobile theme.
Hi Kristen,
I love your site and all of your amazing tips! They’ve really helped me achieve greater things in the design of my site. I am thrilled with ThesisMobile, but have a couple of questions…
1. How did you get thumbnail images to appear in your mobile site? I cannot figure that one out. My blog is a style blog and is very image heavy and I would rather use thumbnails for post teasers rather than text or a combination of both like you seem to have on your page.
2. I am having the same header image issues listed above and could not figure out the proper solution. You suggested creating a smaller header for the mobile theme, but I’m not sure where I would put that in once it’s created. Also, you mentioned 960px width, but my header is currently 906px width so I’m assuming it should work as is…?
Would love your help in finalizing my ThesisMobile design.
Thanks so much!
Lindsay
Hi Kristen
Is there any way to sync the “Mobile menu” pages with the pages that are selected with the Thesis proprietary menu?
My end goal is to see if there’s a way to manage 1 central page selector for the 2 menu systems.
Thanks again!
Hi Kristen, I customized my thesis site using your tutorial, and with prior knowledge with css and html, I was able to get the look I want… i’m still a baby on how mobile theme works so I bought this theme ermmm, mind if I dissect it? :D
This child theme is awesome and the installation is a breeze.
1. change directory to reflect theme directory,
2. install smart mobile plugin and choose the child theme
Optional: you can make it similar with the desktop version or totally different from it. Highly customizable! Great work!
Lindsay — Great question! I have a little custom function that is grabbing the first image that is attached to the post. You can do it my way, or if you’re using Thesis thumbs or WP featured images you can fetch them instead. My function is:
function mobile_thumb() { if (is_home() || is_archive()) { global $post; $images =& get_children(array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'numberposts' => 1, 'post_mime_type' => 'image', 'orderby' => 'ID', 'order' => 'ASC') ); if ($images) { foreach ($images as $image) $img = wp_get_attachment_image_src($image->ID, 'thumbnail', false); echo '<img class="thumb frame alignleft" src="' . $img[0] . '" alt="Thmbnail image ' . get_the_title() . '" />'; } } } add_action('thesis_hook_before_post','mobile_thumb');I can’t really comment on the header issue without seeing/testing it.
Pat — If you want to use the exact same menu on both then you can make Mobile menu the primary menu on your regular Thesis install as well, or just don’t take my recommendation to use a different menu and it will use the original Thesis menu… I make that recommendation because most sites have way too many menu items to be effective on mobile.
Everything was great, now I only have a white screen. What have I done (:
Anna — Don’t know, what did you do? Any number of things can cause a blank screen. Would need to know all the steps you have taken and under what circumstances it is blank (since the site looks fine on my laptop).
Hi Kristen,
I really only wanted to come back and tell you how great I think your plugin is, but of course I hit a snag and need to ask for your help. I followed the steps in your instructions to the letter. I’m using the Device Theme Switcher, (thanks Jess @ #33) and I don’t have cache on at the moment.
My problem is that the menu buttons are all on top of one another. (There are only 4 so it’s not that it’s especially crowded, even for a mobile device).
I love the plugin, it works great except for this little glitch. Hope you can help me figure it out.
Thanks,
Denise
Okay, so maybe I need more help than I first thought. The text on the mobile version is still horribly small and when you zoom in then you need to scroll right and left, which of course totally defeats the whole purpose of having a mobile child theme….
Denise — As discussed in some other comments, it looks like the header is too big for the mobile view. I will see what I can do about making this less of an issue since a few people seem to have it. What mobile are you using? The font size looks fine on my iPhone 4, but also the header is stretching the page, which could be affecting the apparent font size… And now that I’m looking at the source files on my mobile the font size has been changed in the mobile theme’s style.css — there’s a reason it was at 1.2em rather than 1em, because mobile fonts seem smaller than computers.
I’m afraid I can’t troubleshoot the menu any further from my phone. If I could see the mobile view from my laptop, then maybe, but I can’t see an obvious cause for the menu going back to a dot-point list.
I’m using a Samsung Droid Charge Kristen.
I’m not really sure why the font has changed in the mobile style.css file. I used the path, option #1 to copy my modifications to the mobile file.
Is there some way I can get you a mobile view to your laptop? How did you recreate it for your link in the post? Obviously I don’t want to change my main website to the mobile view. What I can do is switch to mobile for the tablet. Right now I’m kind of hoping you have one of them. (I’ll switch it when I’m done writing this on the off chance you do have one).
I appreciate your help. I’m testing this on my secondary website for now and want to transfer it to my main RE site when it’s ready for public viewing. (I have LOTS more traffic there). I see you take on smaller jobs so if this does end up taking up too much of your time we will need to talk about that. You shouldn’t be troubleshooting in the wee hours for $2.99!
Denise — I’m in Australia, so it’s the middle of the day ;-)
Does the mobile switching plugin you’re using have an option to add a link to the footer to switch between views? On kristarella.com I have that using Mobile Smart.
Hi Kristen ~ I wondered about the time stamp on your comments, now I know. Guess it’s the wee hours where you are now!
The plugin I had did not have the option you mentioned, I’ve installed Mobile Smart so it’s there now.
Kristen ~ I got help from Phil in the forums and he gave me some CSS code that took care of the menu problem. I still have a minor issue to take care of though. In the Chrome browser and on my mobile phone, (Samsung Charge), my name, which should be in the footer appears on the right of the screen on the same line as the navigation menu.
Here’s the link to the mobile site: http://denisehamlin.com/?mobile_switch=mobile
Any idea why that is happening? It’s okay in IE + FF. Also, I’d like for the text to be larger. It looks fine on the desktop, but tiny on my phone. Don’t know why that is.
Thanks.
Denise — Try changing the font size in ThesisMobile/style.css to 1.2em on the first line after
/* dimensions */to make the font bigger. That’s what it is in my version.I can’t isolate the issue with your name being up near the nav, but if you add
.custom #footer {clear:both;}to your mobile custom.css it will fix it.Thanks Kristen. My name is back where it should be in the footer. The font still looks a bit small on my mobile phone, but I figure it might be me. I’ll ask my sons to look at it and let me know what they think.
I still need to do something about how the pictures show, but it’s looking much much better than it was. Thanks a lot for all your help.
Hi Kristen ~ I’m back again. I was hoping to figure out the picture thing on my own. No such luck. I’m stumped again. Here’s a link to a post on my mobile site:
http://denisehamlin.com/winterfest-in-coralville-iowa-january-22-2011/?mobile_switch=mobile
As you can see, the picture is not aligned to the right as it should be. I’m adding my photos using the WP insert tab and not inserting them through Thesis. I don’t think that makes a difference, but figured I should mention it. When I look at the source I see the align right command, but it’s not happening. Any idea why?
Denise — It turns out that the address of your thesis_182/style.css is wrong, which is probably why the menu wasn’t styled properly to being with and also why the image isn’t floated properly.
I guess it’s because of the double folder thing you have going on in your themes. Try
@import url(../../thesis_182/thesis_182/style.css);instead.Thanks Kristen. That was it. Looks great now.
I’m back. Again. Hopefully for the last time this time Kristen. I’ve installed the plugin on my RE site, (which is where I wanted it all along, my other site is where I test everything).
Anyway, I’m still having the same styling problems as with the other install, (without the funkiness of two folders). I’ve managed to fix most of them, but am struggling with my logo. It’s supposed to be in the top right hand corner and I can’t get it to go there. Suggestions?
Here’s a link to the site. Thanks. (Sorry to be such a pest).
http://ichomesforsale.com/?mobile_switch=mobile
Hi Kristen,
Thanks for the great theme!
For some reason, my setup is using the main Thesis custom_functions.php and custom.css. I’ve copied both files to the mobile theme custom directory, but edits to the copied files don’t change anything. When I edit the main Thesis custom files, the changes display on the mobile site too.
Here’s a link to my mobile version: http://www.andrewflusche.com/services/virginia-dui-lawyer-defense-tactics/?mobile_switch=mobile
I’m wondering if my mobile theme install files are incomplete. When I downloaded them, a couple had a strange character at the end, where I assumed the closing PHP tag was supposed to be.
Can you help at all?
Thanks!
Andrew
Thank you so much! Instructions were clear and so easy to implement. Appreciate your hard work!
For anyone with the same problem as mine above (editing custom_functions.php in the mobile theme has no affect), try adding these lines to the top of your child theme’s functions.php:
define(‘THESIS_CUSTOM’, STYLESHEETPATH . ‘/custom’);
define(‘THESIS_CUSTOM_FOLDER’, get_bloginfo(‘stylesheet_directory’) . ‘/custom’);
define(‘THESIS_SAMPLE_FOLDER’, get_bloginfo(‘stylesheet_directory’) . ‘/custom-sample’);
That did the trick for me. It appears to tell the child theme to use its own custom files.
Andrew — Sorry for not replying sooner. It makes no sense to me the errors you’re mentioning… Are the weird characters still occurring? I am not in the habit of using closing PHP tags unless they’re absolutely necessary: they are not necessary at the end of files. Also, it’s very weird that adding those lines enabled the custom files in your mobile theme, because Thesis already uses the custom files in the stylesheet directory and I’ve already called the Thesis functions file at the top of the ThesisMobile/functions.php file. Also, I use this child theme and haven’t had that issue, so not sure where it would come from. Which mobile switching plugin were you using? Which version of Thesis? Maybe if it’s an earlier version of Thesis it didn’t have the custom folder relative to the stylesheet, thats was a relatively recent change.
Hi, Kristarella!
After update my Thesis theme to the 1.8.3 version (and edit the style.css at child theme), I have this error on mobile site:
Fatal error: Cannot redeclare thesis_multisite_support() (previously declared in /home/vootatico/public_html/wp-content/themes/thesis_183/functions.php:96) in /home/vootatico/public_html/wp-content/themes/thesis_183/functions.php on line 101
How can I fix it?
Getting a strange error when enabling the Thesis Mobile Child Theme via Mobile Smart :
On the mobile version, the page shows with a php error -
Fatal error: Cannot redeclare thesus_mutlisite_support() (previously declared in ……../thesis_183/functions.php:96 in …………../thesis_183/functions.php on line 101
I am not using multisite in any way.
Hey guys,
I have an idea why this is occurring, but I have not even downloaded the new version of Thesis yet. I’ll try to get it fixed up today, but until then your only options are to use Thesis 1.8.2 or disable TheisMobile until I fix it.
Can you tell me, is the error only occurring on mobiles? That would make the most sense, but you weren’t clear.
Kristen – I’m using Thesis 1.8 and Mobile Smart. It seemed crazily weird to me too. I thought I’d report that fix just in case someone else encounters the same issue.
Regardless, it’s working now. Thanks for your work on this awesome theme!
It is only happening on mobiles. Otherwise, it is just fine.
Having the same problem with cannot redeclare. Am using Thesis 1.8.3
Hi all, I have just uploaded a new version of the Thesis Mobile child theme for use with Thesis 1.8.3. You have 5 downloads on your original purchase, so if you have that original email with your download link and code please use that. I will try to contact previous customers to let them know about this update. If you have used up all your downloads either purchase again or contact me with a propsal on what you think is fair. I haven’t quite come up with a plan on upgrades yet, but given that this child theme is so cheap and you get 5 downloads for it I don’t think repurchasing is unfair… but I’m open to suggestions.
The same error yet, Krista.
It seems that nothing has changed. I am receiving the exact same error.
Did you all get a version that was named ThesisMobile.zip or ThesisMobile_02.zip?
Kristella,
It appears that your download page doesn’t offer the choice of obtaining _02. I just tried (I have 4 remaining downloads) and the only option I had was to download Thesis Mobile.
Kristella,
Now I have 3 remaining downloads and I confirmed that it is ThesisMobile.Zip
Hello all, the shop keeps record of which downloadable you’ve purchased in terms of the file version, not just the product, so I was wrong: your previous downloads won’t give you the new version. Please either repurchase or contact me.
_02 works. Thanks.
Do you have any php script that would disable a plugin (in my case a background rotator) when using your theme?
Thank you,
Michael
Michael — You might be able to use something like
deactivate_plugins( '/plugin-folder/plugin-name.php', true );in the custom_functions.php file of your ThesisMobile, but that might potentially disable it from that point on, in which case you’d need to add a correspondingactivate_pluginsfunction somewhere else… It would probably be better to target whatever action the plugin is taking and disable that, but it would depend entirely on how the plugin does what it does. In the case of your background plugin, it seems to add an image and javascript to thewp_footerhook; so you would useremove_action('wp_footer','FUNCTION_NAME');in your custom_functions.php file to stop it adding that to the footer in the mobile theme…I just downloaded the Better Backgrounds plugin to check what was needed, you’ll actually need:
Thank you for the code. It works very well. Check your email…
Hey, I bought the child theme yesterday but didn’t get the download link anywhere in the process. How should we proceed? :)
Hi Kristen,
I just bought, great deal, I’ll report, if you’re interested.
THX,
Dankobert
Hi Kristen,
I downloaded and installed the Thesis Mobile theme over the weekend and think it is absolutely wonderful!
I also had some problems with Mobile Smart recognising the Thesis Mobile theme, but thanks to previous comments above and also your clear instructions, I had to amend the style.css file in the ThesisMobile folder to reflect the name of my parent Thesis folder.
I also installed your code above to display the post images on the mobile version but I might have to play with the code a bit to change the size of the images. Otherwise, I love how the Thesis Mobile theme is so much more streamlined and easy on the eye than using the desktop version on mobile phones. Thank you for sharing this theme at such a reasonable price!
A problem which I had before and which still exists is that a small end of my header image is cropped whenever I view my site on my iPhone or my iPad. Right now, it’s not bothering me too much, but I might contact you directly for some assistance.
Thanh — Yeah, I get a bit of space on the side of my mobile site too, which I haven’t fixed yet, but I think on my site it’s because of
<pre>blocks that have code in them, and by nature those blocks don’t wrap text, so I think those blocks of text are pushing the size of the page out, but the header etc don’t expand. Long-lined pre blocks are not very mobile friendly, so I think I want to just force them to wrap the text on mobiles, but I haven’t done that yet. So in summary, I would say there’s probably an element on your page that is not being scaled and is wider than the site wants to be. If you find that element you can resize it manually (probably in ThesisMobile custom.css) and that should fix things.Hi there I have installed the child theme and everything seems to be working except the header image doesnt show up. Can anyone help me with this?
Ethnic — How is you header image added? CSS, function, via the dashboard? And have you followed the steps to add your own customisations in to the ThesisMobile custom folder?
After getting things to work, I noticed that the header is not showing up in the mobile version. Do you have any suggestions? I do have custom.css and functions, and can include them if you are interested in looking at them. Thank you.
Michael — same question as previous commenter, please see my response… I can see your header is added via layout.css, so the Thesis header uploader. Seems you probably didn’t copy layout.css over since adding the header.
You were right! Thanks!
Hi Kristarella, Its working now. I think it was a caching issue as i was using Supercache and Cloudflare at the same time. thats probably why it didnt show up after I copied the layout.css
thanks
Hi all,
The current downloadable version of Thesis Child Theme works with Thesis 1.8.3 and 1.8.4, the old version will work with 1.8.4, but not 1.8.3. I recommend using either versions with 1.8.4, rather than trying to stick with Thesis 1.8.3.
Is there a certain page width that I should be using. My pages will have tables in them with data and I want to make sure that the table width is at the correct width. What would that be?
There’s not a specific page width in the chid theme: I pretty much have it set so that the mobile device can choose the page width and flow the text accordingly. This works in most situations, but sometimes (e.g., code blocks on my site) they are a bit wide… Do you need to set a table width? If you don’t set a specific width it will adjust to the contents. If you do have to set a width, you can try setting it to a width that suits the resolution of the most common mobile devices visting your site… Unfortunately mobiles vary significantly: iPhone 4 and 4S are 640px wide, older iPhones are 320x480px.
I have read everything but can’t imagine how to solve the problems with header, footer, and contacto (contact) section. Everything there seems weird. I have allowed to change to mobile theme in footer, would you be so kind to see if you see something I don’t?? Thanks so much Kristarella!!!
Pepa — The header issues are because the background image size is set on #header (layout.css line 314) and the height is set too large on #header #logo a (layout.css line 315). I’ve never seen Thesis add the header like that, but it’s in layout.css, so either Thesis is adding header images in a new way, or you’ve (or someone else you’ve had working on it) edited layout.css. Either way you can fix that up by changing those sizes via custom.css in your Thesis Mobile theme.
I don’t see anything wrong with the footer.
Your contact form background is of a fixed width and at the left of a page, but the mobile page contents is centered and is the width of the viewport, no matter the size. You can mostly fix that up with
.contacto_ .wpcf7 {width:710px;}. 710px is the width of the images used on the contact form, but I’m not sure how that will go on mobiles since it is wider than a lot of mobile resolutions…Thanks so much. I have managed to put everything in place. One more thing, I have looked at the site in an iPhone and an iPad, both look great but in both devices my footer and header won’t go from side to side of the screen. They start at the very left but then, at the right I see some white space, like if the body has a fixed width. Any chance I can solve this too? Thanks again!!!
Pepa — There probably *is* something in your content that has a fixed width and is causing that gap. Looks like the Slidedeck is giving the slide contents a specific width, even though the outside of the deck has width 100%. Not sure what the best way to go about fixing that is: make the contents smaller, or override the width in the mobile css (you would have to use the !important pseudo-value in order to override inline styles)… it would probably need experimentation.
Thanks. I am going to try to fix it.
I am thinking about the possibility of disabling the slidedeck for mobile theme so the home page is different from the desktop view. Anyway I can do this? Telling somewhere that if homepage is being viewed from a mobile device it should not show the slide but a different content. Thanks again for your patience Kristarella
Pepa — it depends how the SlideDeck is added… If added via the page editing page, then the best way to remove it is with the Thesis Custom Loop (http://diythemes.com/thesis/rtfm/). But if it’s added via custom_functions.php you can add it in the parent custom functions file, but not the mobile one.
Thanks!!! My #content had a fixed width, I put 100% and now everything is pretty and neat. I have a last (I hope) question. I have managed to change the front page content through the loop with function front() but now I am trying to replicate the same for the about me page. I have tried with function page() and then if(is_page(‘About’)) then close PHP, my code and reopen PHP, but no way to have my new content displayed. Any idea about this? Thanks again.
Pepa — When using
if(is_page('About'))you need to use the page name or ID, your page name is “Acerca de mi”, not “About”.I am actually using the page ID. My code is as follows:
$loopty_loop = new my_loops;
class my_loops extends thesis_custom_loop {
function page() {
if(is_page(’150′))
{ ?>
<img src="http://www.pepandblog.es/whatever.jpg"; />
<p>Whatever</p>
<p>Whatever</p>
<?php }}
}
Uhmmm. I don’t know if it’s right
Never mind!! I have found out what was happening. I had assigned the same class (my_loops) to the first function for the front page and for this one. Now I have changed the name of this second one and everything is working!!
Pepa — I wondered if that was the case, but I hadn’t had a chance to reply yet… You don’t need to create a new class for each page; you can just use one class and a new function for each page type inside that.
Confused: I’m getting a blank screen when viewing on an iPhone or switching to mobile on my computer. I read the earlier comment about changing the name of the thesis folder in BOTH places in the thesis mobile style.css – line 7 and line 11. In my style.css, there are only 9 lines and all are commented out:
/*
Theme Name: Thesis Mobile Child Theme
Theme URI: http: //kristarella.com/
Description: Child theme for the Thesis theme
Author: Kristen Symonds
Author URI: http: //kristarella.com/
Template: thesis_184
Version: 0.2
*/
I have no error messages and I’m using version 0.2. What am I missing?
Michael — please set Wp_DEBUG to true in your WP-config.php files and then try the switch again. This will allow error messages to be displayed; any error messages should help me figure out what is wrong.
If there isn’t anything that already says
define('WP_DEBUG',false);in the config file, add it and change to true.All set. Lots of mentions of Mobile Smart there.
Michael — those notices for mobile smart aren’t great and I’ll mention them to the author, but notices don’t cause blank pages. There’s two warnings for the contact form plugin, perhaps that is the problem. “header already sent” can cause blank pages.
Not sure why that would only be on mobile, and not the desktop, but it’s worth turning off just to check.
Happy to report all went well and it does everything it claims to do. I used WP Mobile Detector for switching and it had no problem. One suggestion for others is to upload video to YouTube and use the new iFrame embed code on your posts and pages. My device won’t play Flash/SWF but it detected the iFrame on another site then played the video with Real Player.
Dennis — Glad it’s going fine. Always glad for more mobile detecting plugins, so thanks for that.
I thought YouTube had non-flash alternatives for devices without flash.
That was true until lately. The new iframe embed holds a HTML5 player with fallback. Only stumbled on this last week http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html
Would appreciate the code to add the thesis thumbs, as I use them in my blog. I have lots to do as my blog is heavy on design so I want to streamline the mobile version a lot.
Link to test site:
http://www.sandboxes.kashmirhouston.com/sandbox31
Ian — You can use this function
function excerpt_thumb() { $post_image = thesis_post_image_info('thumb'); if (!is_single()) echo $post_image['output']; } add_action('thesis_hook_before_post','excerpt_thumb');Thanks that’s a start but the images do not resize as they do in the thesis main theme.
Ian — Do you mean the post images aren’t becoming thumbnails? It worked fine in my test on both Thesis and ThesisMobile. Have you checked to make sure the permissions on cache folder are correct?
I’d have a look at it, but you’re using a different mobile theme at the moment.