NOTE: While this tip is written 2010 specific, the concepts here apply to ALL themes, let’s read on!
OK, it’s time for another little WordPress tip. This one won’t be full of all sorts of code or anything. Just some general guidance, from me to you! Stop, I repeat STOP editing the twentyten theme. You know, the one that ships with WordPress. All kinds of people use it. And I have repeated myself about 30 times on the forums this week. Once and for all, stop editing this theme. Your changes are not safe, and will be LOST! Let’s discuss your options, they are so easy!
So why aren’t your changes to twentyten safe? WordPress needs a default theme. It needs one to work, and it needs one to fall back to if you make a mistake on your own theme. That’s right, if you wreck your site because of some problem with a theme, you can delete the problem theme and automatically revert to twentyten. Since WordPress relies on having twentyten available, that theme is considered ‘core’. When you upgrade WordPress, all core files are replaced. It’s why nobody recommends ever editing WordPress core files. But this rule applies to the twentyten theme as well. So the basic thing to remember here is: If you edit the twentyten theme, all your edits will be lost at some point.
Now for your options. You basically have 2. The simpler copy and rename method, or the Child Theme method. I recommend the child theme method, as do most other WordPress folks I know. But I’ll discuss both. You can also do these things with any other theme to keep your changes safe from a theme upgrade. That’s another thing to consider, themes other than twentyten do NOT get replaced during a WordPress update. But many theme authors put out updates to their themes. They fix things, or add cool new features. If you have directly edited their theme, you will lose your changes on a theme upgrade.
Option #1, simple copy and rename. It’s just like it sounds! Download the theme you are using to your computer. Unzip it. On a Windows machine that’s a right click and unarchive. There are many ways to unzip an archive. If you are unfamiliar with it, Google is your friend. Now once unzipped you will have a folder. Rename the folder to whatever you want to call your new theme. That’s right, these simple steps are basically creating a new theme! After renaming the folder, open it up and find style.css. Open that with a plain text editor. Wordpad will work fine. Just right click, open with wordpad. You will see at the top of the file, a header which looks like this:
/* Theme Name: Twenty Ten Theme URI: http://wordpress.org/ Description: The 2010 theme for WordPress is stylish, customizable, simple, and readable -- make it yours with a custom menu, header image, and background. Twenty Ten supports six widgetized areas (two in the sidebar, four in the footer) and featured images (thumbnails for gallery posts and custom header images for posts and pages). It includes stylesheets for print and the admin Visual Editor, special styles for posts in the "Asides" and "Gallery" categories, and has an optional one-column page template that removes the sidebar. Author: the WordPress team Version: 1.1 Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style */
The only thing you really need to change here is the theme name. You are welcome to change the other things too, but you must change the theme name. That’s it! Once you have done this, save the style.css and close it. Now you can rezip the newly renamed folder containing the theme. Again, usually a right click, send to->compress(zip)folder on a Windows machine, but Google if you need to learn.
Once you have zipped up the newly renamed and slightly edited theme, you install it just like any other theme. Done! Now it’s an exact copy of twentyten (or whatever other theme) but since its renamed it is safe from upgrades, edit it all you like. You can also do all this using ftp or a file manager if you prefer. Just by copying the existing twentyten theme and making the edits online. Also, after doing this, never delete the twentyten theme. It’s very important it stay online.
OK, that’s the simple copy and rename method. Let’s look at the Child Theme method. I’m going to attach the most basic examples of a child theme for twentyten just for example here. We’ll discuss what’s up with it. But if you were to install this theme right now, your site would be running Voodoo Child theme, but it would look identical to twentyten. You can create your own now, or use mine. It’s just the most basic jumping off point. This is so simple it’s crazy! So let’s make this theme!
First, just make a new folder on your desktop and name it what you like, I called mine voodoochild (its best to keep the folder name lowercase, all one word). Next you want to make a plain text document, using any plain text editor. I use wordpad since my options are limited at work, where I usually create my files. In that document you want to put this:
/*
Theme Name: Voodoo Child
Theme URI: http: www.rvoodoo.com/projects/wordpress/wordpress-tip-stop-editing-twentyten-theme-use-a-child-theme
Description: Child theme for the Twenty Ten theme
Author: Rev. Voodoo
Author URI: http: //www.rvoodoo.com
Template: twentyten
Version: 0.1.0
*/
@import url("../twentyten/style.css");
And that is it! Obviously you would want to change up any of those details to match your preferences. The only line you wouldn’t change is Template: twentyten. That is telling WordPress that this is a child theme to twentyten. Now you can save this file. Quick note again. This is important, it has to be saved as style.css, you have to be careful in windows or you’ll get style.css.txt. Go to Save As in the file. At the bottom where it says ‘Save as Type’ change it to all files. then name it style.css and save it.
You now have your style.css file in a folder. Just zip it up and install it! Bam, instant child theme! You are free as a bird! Oh wait, you don’t know how to use it? OK let’s talk some more. We’ll start with basic css edits.
First, this line here:
@import url("../twentyten/style.css"); What is it? What does it do? That tells your child theme to go grab all the css from twentyten and use it. Once again you have options. You can leave that line there, and add your own rules. CSS that you add to the style.css in your child theme under that line will take precedence over twentyten’s css. So you can just add your changes under there and be done. But what if you have a tonne of edits you want to make? Easy. Just delete that line. And instead copy all of the css from twentyten, and paste it into your style.css. Just the actual css, not that header. You need to keep your header in place. Now you can freely edit the css as you wish.
So you can either import twentyten’s css and just add your own rules, or paste all of twentyten’s css into your file and edit it. Got that?
So what’s next? What if you want to alter the loop? Or change the single.php layout? It’s all very easy. Just grab the file you want to edit, put it into your child theme and edit it! You can do this with any file. Basically with your child theme, WordPress checks your theme first for any templates. If they are there, WordPress uses them. If not, WordPress runs over to twentyten and uses it’s version.
The exception to this rule is style.css which we have already talked about working with, and functions.php. Style.css is only loaded from your child theme. Unless you have that import rule in place. Functions.php is a bit different. BOTH are loaded. So twentyten’s gets loaded, and yours gets loaded. This means you can’t just copy twentyten’s functions.php over and edit it. You have to take special care. You can just add your own custom functions into your child functions.php and they will work. But to edit a function in twentyten’s functions.php you may need to unregister the function first and register your own. I won’t get into this so much here, you can read more on the codex.
And then of course you can add files to your child theme which don’t even exist in the parent and they will be used. Special templates like loop-index.php or taxonomy-product.php or custom page templates, etc. These are all beyond the scope of this tutorial though.
So there you have it. A very basic guide to why you need child themes. And why you need to never touch the twentyten theme ever again!
UPDATE: For lots of great tips on working with a twentyten child theme, check out my new site, VoodooPress. It’s my WordPress help site, the current series of articles deals with all the ins and outs of child themes. Since I’m making one for the first time, each time I finish something I post about it!
You are crazy. I love hacking up my 2010 theme and then when I upgrade I loose all my changes and have to upload my backup of 2010 every single time. It keeps me in a constant state of anger against wordpress dev for them screwing up my websites every time.
Who wants a “child theme” anyway. My rehashed, hacked up theme is the adult that I really want it to be.
Lol! Thanks for your angst-ridden explanation of the benefits of not using a child theme!! You make my child theme feel sad…..
To Quote “nobody recommends ever editing WordPress core files. But this rule applies to the twentyten theme as well.” I’ve asked my server provider, googled & wordpress.org the following question, register 365 don’t answer word press queries. To date I have not gotten a relevant answer from the other sources.
I recently migrated a word press site to a new server as a result some issues that the arrival of twenty ten theme solved when it overwrote the original wordpress theme have re risen. Im not using the theme twenty ten at the moment. I’d like to use the Twenty ten, child theme weaver 2010 or weaver but when I activate them and try to alter them the changes don’t take. Colours don’t change also on Weaver the menusrunintoeachother the menus run into each other no spaces (I have used weaver 2010 & Weaver on other word press installations) I think the twenty ten theme is corrupt on this site. (I have the most recent wordpress update installed)
1. Elsewhere it says twenty ten should not be removed? To clean install it must be. (the website is currently using another theme). Is twenty ten such an essential component to the wordpress system? Can it be removed via FTP then reinstalled as per installing any other theme with out doing untold damage?
Thank you
Deirdre
Yes, if you are having problems, you can replace twentyten. Just like other core files. They need to be there, but you can replace them. Twenty ten needs to be there as a safety net, in case something goes wrong. Sometimes something can get wacky in WP, and you can’t get in. Or sometimes you edit a theme and something goes wrong and you can’t get into WP. The troubleshooting steps are always to deactivate all plugins and switch to the twentyten theme to rule out problems from external files. But if you can’t log in, how do you do that? Well, you rename your plugins folder to something else, and make a new empty folder named plugins. That deactivates all your plugins. Then you can delete/rename your theme which automatically sets WP back to twentyten and normally allows you access back to your site. But if you don’t have twentyten installed, it won’t work.
So basically yes, you can delete twenty ten by ftp, as long as you replace it with a fresh copy.
Thank you VoodooPress
That reads simple enough. If it solves my problems would you mind if I post your answer on the query I made to wordpress.org, credited to you of course.
Thank you
Deirdre
Of course not! You can quote me wherever you like! I’m surprised I didn’t see your post on the forums, I’m always on there. Of course it’s pretty busy, easy to miss some questions!
Thank you so much for this blog post! I had installed TinySlider and punched it into the theme’s functions.php and BLOOMP, my site was unaccessible. It’s gonna suck reinstalling my plugins one-by-one, but without this fix, I would have just let the damn thing rot. You’re a lifesaver!
You shouldn’t have to reinstall your plugins. If you broke something in your theme, you should just be able to delete the theme, and then reinstall it. Everything you had should still be there!
I currently installed twenty eleven, will the child theme work with twenty eleven? I changed 2011 accordingly match your style.css file. Where should I store it to the core theme?
A child theme works with any theme. It just has to be set up properly. In the example above, it says Template: twentyten, so for 2011 it would say Template: twentyeleven. And then the @import rule would need changed to refer to twentyeleven. The child theme files go inside a folder in your themes directory, just like twentyeleven. The easiest way is often to make the child theme on your computer, make a zip file out of it, and install it through the WP installer. But you can also use ftp to upload the theme.
If I ftp the child theme into the theme directory on my site, don’t I still have to install it somewhere in the WP dashboard?
Yessir. You can either zip up your theme, and install it through the admin panel, or upload via FTP (make sure you unarchive it on the server – it can’t be a zip) and then activate it from appearance -> themes.
I’ve been spending hours searching for a basic recipe for creating a child theme for twentyeleven. I created a folder (manotickchild2011) and created a file style.css in it (below). Then I compressed the folder into a zip file.
Then from the Dashboard > Appearance > Install Themes tab, I tried to upload/install the zip file. I got this error message:
The package could not be installed. The theme is
missing the index.php file.
/* Theme Name: Manotick Child 2011 Theme URI: http: www.manotick.net/wp/wp-content/themes/manotickchild2011 Author: Pat Drummond Author URI: http: //www.manotick.net Description: Child Theme of the WordPress 2011 theme Version: 1.4 Text Domain: twentyeleven */ /* Overrides style.css of parent theme -----------------------------------------------*/ @import url("../twentyeleven/style.css");One very simple error, if you look over the examples again. See where your css says Text Domain? Notice in my example? If you look real closely – there is nothing about Text Domain, you want Template … fix that, and you are good to go!
I used the WordPress dashboard to upload my Child Theme:
Dashboard > Appearance > Themes > Install Themes (tab)
Then I noticed it in the Theme list and clicked on it. It seems most settings from 2011 were still there except the Header image. You can’t set this from Themes > Customize. You have to use:
Dashboard > Appearance > Header
At this point I made an FTP connection to my site and discovered that I could not locate my new theme anywhere! Where did WordPress put it?! For now, I can copy/paste the contents of the style sheet here:
Dashboard > Appearance > Editor
Wow, I forgot to thank you for your very helpful comments. I hope my notes help update your “recipe” for setting up a way to change the “style”. Remember it’s only the geeks who will bother digging for the missing pieces. (Just years of community network help desk speaking) Let’s face it, you have to understand CSS to bother spending the time.
Hey Mr Voodoo
Love your site and getting your rss feeds, can you help me to clarify something with functions.php, I’m always a little unclear of how to start and end the functions.php, I always base my sites on twenty ten and mostly just copy and paste functions from my other sites(functions that I’ve spent countless hours tracking down) to new sites Im working on but I still don’t understand the basics of a functions.php, how should it start and how should it end. It seems like there’s just not much documented about it, can you help me clarify, keep up the great work, you really help a lot us out a lot.
Sure, that’s really simple! It just opens with an opening PHP tag
It doesn't need to end with anything. Some people say it should end with a closing PHP tag
?>
But I've read pretty solid reasons why it should not close that way. So I simply don't put in the closing tag.
My functions.php file simply ends with whatever the last function or bit of code I need in it is. Just always make sure there are no blank lines or characters at the beginning or end of the file.
Feel free to ask more if I can be of further assistance.
Also, I hope you are also reading over on VoodooPress. That's where I keep my WordPress content now. Tryin to sort my WP content from my personal and music stuff.
I appreciate that, that clears some stuff up. It seems that this subject is barely touched on, and I know it must be a huge source of confusion for people without much knowledge of php but who love to hack their child themes up I wish there was somebody *aham who could do a nice write up for the community *aham lol.
One source of my confusion is this
if ( !function_exists( 'child_theme_setup' ) ):function child_theme_setup()
In what situations would this be necessary, filters are another source of confusion. Thanks
well the small snippet of code you provided really just says if the child_theme_setup doesn’t exist, do it. It keeps conflicts out. I would assume that just like twentyten has a twentyten_setup function, that child theme has a child theme setup. Dunno how important it is in a child theme… I always wrap my functions in a functions exist just to preclude conflict. The important usage of that is a parent theme….. When theme’s load, the child theme stuff loads first, then the parent. This includes functions.php. So wrapping a function in a functions exists statement allows for child theme functions to have the same name, and then only the child theme function loads, rather than the one in the parent AND child theme which would cause conflict.
I’m continually trying to add new and useful stuff over on voodoopress.com, my site dedicated to WP. Feel free to comment here, or over there, or even request an article or something over on voodoopress. I’m always looking for stuff to write about.
I’ll be honest, I don’t know a thing about PHP outside the bounds of WP. I just really like to work with WP, and to pass on anything I learn. I’ll try to get a basics of functions.php type article up on voodoopress soon, maybe it can help some folks!
Thanks for the excellent guide, voodoo. I’ve had this same issue myself and typically have just re-added the mods I’d made to the original style sheet.
Now I have to get back to solving the problem I have currently…
I’m glad you found the article useful. I couldn’t see any issue with your site. Either it’s solved, or something I can’t see (I’m stuck using IE7 at work, so a lot of stuff is not apparent)
thanks for that. clear and concise explanation on what to do. I was about to completely hack up my twentyten install and never realised how many problems I might create for myself in the future!
I’m glad you found my article before running into trouble! As a rule of thumb, I always use child themes on my sites. Even when I use a non-core theme. It just keeps things nice and safe! I just overhauled a site I had, and I haven’t had time to create a new theme, so I downloaded a theme to use. I like it as is, but I still made a child theme. It only takes a couple of minutes, but now I am safe in case I want to modify anything in the future.
You answered a post I made on the WordPress forums. I’m the guy who wants to make the content wider. I followed your directions about the child theme, at least as far as this. I copied the text that ends with ‘@import…’, zipped and installed in my site. When I try to activate there is this message ‘The parent theme is missing. Please install the “twentyten\par” parent theme.’ I suspect that ‘par’ is causing a problem but I don’t know where it came from. Also, do I need to add more to the style.css than what is in the box above? You mentioned copying, do I need to copy just the style.css from the parent?
hmm…that is a strange problem. Occasionally I have seen issues with people using text editors with improper encoding. Other than that, I am not sure where that could come from. What are you using to make your files? As for the style.css, It just needs the header info above, and the @import rule. You really have 2 options for the css. You can NOT put in the @import rule, and copy over ALL the css from twentyten. That’s a bit overkill, really only recommended if you plan to really overhaul the entire theme. The way I do it, is to put in that header, put in the @import rule, and then anything you want to edit, you copy over that particular rule to your child theme and make your edits, or create your new rules. I’d recommend that you give that child theme one more try. If you can’t get it, let me know, I can whip one up for you real quick to install as a starting point.
Can’t you just ignore the option to update twentyten ?
(It offers updates so often, but how do I know I will like the changes it makes ?)
Even if you created a theme and spent a lot of time on it, don’t updates often cause conflicts with plugins or other problems ?
Well, especially with established WP themes like twentyten and twentyeleven, the ones that ship with WP, the themes aren’t just arbitrarily updated. The updates include bugfixes and security updates only, usually. So you should never ignore the updates. The best solution is to make a child theme for your mods, then you can still benefit from the updates. Or you make a copy of the theme and rename it which will remove it from being updated. The problem with that solution is removing yourself from the ability to benefit from the updates. I’ve only rarely had a theme update cause a conflict, which I resolve by contacting the plugin author. It is still better to update. You are better off updating, and deactivating a plugin temporarily. I mean think about it, deactivate a plugin and lose a little functionality, or don’t update, open your site to a security vulnerability, and risk losing everything.
Thanks for the heads up! Also… You scared the crap out of me!!! I made a copy of the twentyten theme and renamed it, and completely modified it, and when I’ve reached 99% of my work, I’ve read your article. :)) So I guess I’m on the safe side, and I did the right thing. Thanks a lot for the tip!
Also… Please, oh please!!! Stop recommending people to use word processors! Word processors like Microsoft Word ads formatting to the text, and when you save it and rename it, it will not work! Advice people to use instead text processors like Notepad, which use plain text, with no formatting. I personally use Dreamweaver, so no problem for me.
HI there. You are on the ‘safe’ side…. maybe not the ideal side. The problem with copying and editing is that, in the future, if twentyten gets updated for bugfixes or security reasons, you will not benefit from the update. Not a big deal though, if there is ever a major problem, it will be announced, and you can investigate to see if it affects you. Also, if you read through my article, I NEVER recommend a word processor! I stress a PLAIN TEXT editor. A plain text editor, by definition, is NOT a word processor like Word. A plain text editor is notepad, wordpad, etc. I personally use notepad++, it’s free and open source. It has line numbering and syntax highlighting. Very lightweight too. But thanks for the tip, it’s always good to stress that people should NOT use word processors like Word. Even copying and pasting simple posts from Word can blow up your site.
Thanks very much for this helpful post. I followed your instructions and successfully installed TwentyEleven renamed to Rasala theme. Even after I activated the new theme it seemed to retain my previous settings, which was good. Now that the theme will no longer be automatically updated by WordPress, do I need to manually update and if so how do I do that? And when I manually update will I lose my old settings? Thanks again for your help.
I’m glad you were able to set up a new theme. Here’s the trade-off, and how it affects you. A child theme is best in my opinion, as in essence, it builds off of the parent theme. When the parent theme gets updated, you benefit from the updates.
A whole new theme will no longer get any updates, so there will be no way for you to ‘update’ the theme. Basically what you would need to do is read any changelogs that come out if 2011 gets updated, to see what was updated and why, and manually copy the code to your theme, if you feel the changes are something you need. For instance if it’s some security fix, or bugfix or something.
Now a child theme would have the same problem in a sense. If you get into heavily customizing a child theme, you get to the point where you may need to copy a file from the parent to the child. Obviously when the parent theme gets updated, it wouldn’t also update your child theme. And you couldn’t just copy the whole file over, as the reason you moved it to your child theme was to customize it. So again, it would me a manual inspection and copy of the code.
When 2011 gets updated, a link is provided to trac. It’s a bit hard to figure out at first, but you can get in there and do a comparison on old/new files to see exactly what changed. It’s even highlighted so you don’t have to try to read entire files. Plus they give reasons. This will help you track down if you need to take any action.
Thanks again for your advice. I’ve now switched to a child theme based on twenty eleven. I am not planning to make many if any changes to the code so if I leave it pretty much intact will it benefit from automatic updates or will I need to manually update? And if it does get automatically updated when twentyeleven is updated then I presume because it’s a child theme any widgets installed/changes made are safe from being overridden? Thanks again – I am very new to this and learning.
Welcome to the world of child themes!! When updates are pushed through for twentyeleven, you will get a notice in your admin panel, just like when a plugin needs updating, or when WordPress itself does. You can safely update twentyeleven. Since you now have a child theme, any customizing you do within the child theme is safe. Your child theme will never be overwritten. Since your child theme calls to twentyeleven, when you update twentyeleven, you benefit from the update without losing any of the customization in your child theme. Your widgets are all safe too, however, widgets are pretty much always safe. Theme updates don’t normally affect widgets in any way.
You explained it very well. I just created a child theme for twentyeleven as well. It works great. Thanks for the articles. You are a great teacher!
I’m glad you found this article useful, and that you like my writing style! Now that you have a 2011 child theme, maybe you’d like to check out my other website at http://voodoopress.com. It’s all about WordPress, with lots of articles about customizing a 2011 child theme!
why i don’t edit style if i leave oryg infos? can i change color?
I’m sorry, I don’t quite understand what you are asking? You can change colour of anything safely from a child theme. Never edit the original style.css.
yes, edit child.css and all is ok. i made this. works.
Voodoo – Just wanted to say thanks for this article. I’m a WP newbie and luckily read this article early in my learning curve. Thanks again!
I’m glad the article helped you, and that you found it early on!!
Good write…just did it and works perfect.
When you are speaking about the TwentyTen theme in your article Stop Editing TwentyTen I am wondering if the TwentyTen theme is in anyway affected if I have installed another theme which is my site? Do I need a child theme if I never touch TwentyTen for any reason?
I don’t know where to start and have read the Codex as best I can, Googled, etc. Making the right choices before one even starts is not simple.
When I install a theme with a child theme and use the basic admin setup for the theme do I start by working on my page setup choices in the main theme or the child theme? In other words when I have a child theme do I copy over the pages etc and work on any setup of pages there or do I work within the main theme (assuming I use it as is with no changes)?
I am not likely to change any css or whatever at this point but as I learn and work on this, my first WP site, I probably will. I just don’t know where to begin.
At first I thought that we are only using a child theme for css changes but it seems from your article there is more to it than that since entire pages can be involved if we alter them.
Thank you.
A child theme is for any editing you would do to a theme, not just 2010. So, if your site is using 2010, and you wanted to modify the theme, you would make a child theme of 2010. If your site was using 2011, you would make a child theme of that! This particular site is currently using a theme from DevPress called Fanwood, so I have made a child theme of that. Basically, if you were going to modify any file in the theme at all, you would make a child theme. Now, anything you do on the backend that isn’t code editing – menu setup, widgets, making posts or pages, setting up theme options, etc… you don’t need a child theme for that. That doesn’t actually modify the theme in any way… it just sets options. The cool thing is that you can do all that stuff. In the future if you were to want to modify code, you can make a child theme for your code modifications – all of your pages, options, menus, widgets, will be safe.
Great post… it’s just a shame that I read it after upgrading WordPress and finding my changes overwritten. Oh well, sometimes we learn these things the hard way…
I’m sorry you had to learn about child themes the hard way! A lot of us do unfortunately! I’m glad you found my article eventually, and hope it was helpful for you.
Great post, personally I normally use a framework when build WordPress sites, but have always wanted to know what direction would be better, child theme or modify the theme. Child theme it is!
Yep, child themes are the way to go! Especially when working with frameworks. Any good framework should be fully pluggable, and easy to modify through a child theme
this was very helpful for trouble shooting a problem i had on implementaiton for the child theme. I was receiving “broken – missing style.css and template message. Your reference above to ‘all lower case and one word for file / folder names was the solution. I’d created my folder with a single word but title case “Style.css” which wasnt recognized or able to line up with the @import url(“../twentyten/style.css”);. I hope this is helpful to someone else.
Thanks for reporting back for others! I’ve learned over the years that simple, single word, lower case file and folder names are simply the best, for maximum compatibility. I’m glad you got your problem sorted out!
Oh boy… wish I had found this sooner. Maybe all is not lost though.
After installing my first WP site and a long week of configuring Twenty Eleven I thought it was all ready to go, but then checked my site on other browsers, mobile etc. to find that things weren’t so perfect after all. I did all of the work in Chrome and it looks exactly the same in Firefox -perfect as I want it), but in IE and via mobile its squashed and mangled… in IE the header logo is huge and distorted and the page looks like it doubled in width -side by side the nav menu is now parallel to the right of the image :// The latest WP update came out a few days ago and after days of searching forums to find solutions convinced myself I need to start over fresh. I just went ahead and installed the WP update thinking I would probably lose all my work.. but no, everything is the same. My site still works perfectly in Chrome and Firefox, but again is still mangled in IE and via phone. I’m new to WP and completely lost.
My question to you is, from what I have explained at this point should I delete everything and start over or is there a way to copy everything I have, re-install a fresh “adult” Twenty Eleven and then upload what I have as a “child” theme to then attempt fixing the re-sizing/mangled issues?
Thanks for any help and suggestions!
Oops..forgot to tick the notify/follow up boxes…
Since I wrote this article, WP has been upgraded to change behaviour. It used to be on every upgrade, the entire WP install was replaced – all files, to include default themes (2010, 2011). Now that only happens on major upgrades (say 3.3.4 to 3.4), but on minor upgrades (say 3.4.1 to 3.4.2) only the changed files get replaced. So this time you lucked out, but that won’t always be the case. In the future, if the theme gets an update, it will be replaced. Likewise, when version 3.5 comes out, the theme will be replaced.
I would definitely recommend starting over, since your changes aren’t working as expected anyway – it might be easier that continually trying to rework what you have. I’d reinstall the theme, make a child theme, and get going. The problem you are seeing is something many people run across – many browsers are more forgiving than IE. Your code is probably not completely correct, many other browsers will let that slide, but not IE – it’s a picky beast!
Hopefully you can work through it! It I can be of more help you can find me here, or at my WP specific site, voodoopress.com!
After installing my child theme for twenty-eleven, my Ajax Calendar is now empty! I thought that it was a theme change, not a database wipe-out!
Ah well, I’m gradually reducing white space using zero padding and 100% widths. Any suggestions are welcome.
Also I can’t figure out how to get the home page to point to the “real” one. Click on the header image goes to the wordpress home (event calendar) instead of the website it’s part of.
See results here: http://events.manotick.net
style.css excerpt:
/* Theme Name: Manotick Child 2011 Theme URI: http: www.manotick.net/wp/wp-content/themes/manotickchild2011 Author: Pat Drummond Author URI: http: //www.manotick.net Description: Child Theme of the WordPress 2011 theme Version: 1.4 Template: twentyeleven */ /*----------------------------------------------- Child Theme overrides style.css of parent theme 12Sep26 color:#373737 to #111111 12Sep26 Today's date colour #FF6 -----------------------------------------------*/ @import url("../twentyeleven/style.css"); /*_____COLOUR #373737 to #111111_____*/ body, input, textarea, input[type=text]:focus, textarea:focus, #access li:hover > a, #access a:focus, .page-link a, section.recent-posts .other-recent-posts a[rel="bookmark"], #reply-title {color: #111111;} /*_____STRIP SPACING_____*/ #main, .entry-content, .singular.page .hentry, .entry-title {padding-top:0;} #primary {padding:1em 0 0 0} .singular .entry-content, .singular footer.entry-meta, .singular #comments-title {width: 100%;} /*_____CALENDAR "today" (must change in theme style - doesn't work_____*/ .fc-state-highlight {color:#111111; background: #FFFF66; !important} #aec-menu {float:right; padding:0}Solution to online calendar events/content disappearing after a theme change (even though events still show in the editor):
http://wordpress.org/support/topic/plugin-ajax-event-calendar-calender-stopped-showing
Your other post got hung up in my spam queue, I just let it out! And thanks for coming back with a solution, I always appreciate that!
Hi Voodoo,
I have followed your initial instructions to create a child for the “Third-Style” theme. But after installing it does not appear on the dashboard. What have I missed.
After installation I can see the following:
1. A new folder “../themes/third-style-child”
2. A file “../themes/third-style-chid/style.css”
The new “style.css” file has the code
/* Theme Name: Third Style Child Template: third-style Version: 1.0.0 20-Oct-2012 */ @import url("../third-style/style.css");I gather the template name above needs to match the original “Third Style” theme folder name spelling, which is “third-style”?
The “Theme Name” in the original style.css is “Third Style”.
Can you see a problem with what I have done?
Thanks
PS, what about protecting changes to other files being overridden by upgrades, such as changes to “login.php”, “header.php”, etc?
Everything above looks fine…. your child theme just doesn’t install for you? How did you install it? Through FTP? If you zip your child theme and use the built in WP installer, does that work? If you are making changes to other files (except functions.php) you simply copy the file from the parent to the child, then edit the file in your child theme. For example, header.php. If it exists in the child theme, that copy gets used. If it is not in the child theme then the parent theme copy gets used.
Hi Voodoo,
I have managed to make the child theme to work by manually creating the theme folder rather than via an install from the dashboard.
I have another problem. You have another blog where you show how to insert a login/logout link to the wp-nav menu by adding a block of code in functions.php. I tried to do this with the child theme but it doesn’t work.
This login/logout thing works with the original “Third Style” theme but not when I switch to the child theme. So far the child theme only has the files style.css and page.php. The modified functions.php files remains in the “third-style” theme folder. I have tried moving functions.php to the “third-style-child” theme folder but that doesn’t work either.
any ideas?
thanks
Functions.php is a special file. It loads from the child theme and the parent theme. That’s why you leave the original one in the parent heme, and you do any custom stuff in the child theme. You cannot copy the file from parent to child though, that will cause conflicts. I do know the login/out link in the menu works from a child theme in general, because it is working on this site! I just have:
//ADD LOGIN LINK TO MENU add_filter('wp_nav_menu_items', 'voodoo_loginout_link', 10, 2); function voodoo_loginout_link($items, $args) { $voodooredir = htmlspecialchars($_SERVER['REQUEST_URI']); $loginoutlink = wp_loginout($voodooredir, false); $items .= '<li>'. $loginoutlink .'</li>'; return $items; }In my child theme’s functions.php. If you were to have it in both the parent and child, it wouldn’t work because it would conflict.
Hi,
I am a newbie in its most pure sense. In short, I’m an idiot with WordPress. I like the idea of copying the Twenty Ten theme (your first option) but how do I download it to my computer? I do not know where to get started with that move. (I told you I was an idiot).
http://wordpress.org/extend/themes/twentyten Your best bet would be to just download a brand new copy and work on that! However, I noticed the website URL you left with your comment references a website which uses wordpress.com – you cannot upload themes, use plugins, or edit themes on wordpress.com, only wordpress.org self-hosted websites.
Now I leave the parent copy of functions.php alone. Create a brand new functions.php in the child theme folder with just the login-logout code in it. I have also added code to remove the Admin Bar. Everything is working beautifully, thank you.
In your code above you have an extra line which is not in your original blog. Is it to do with security? Can you explain it’s purpose cause it works without it.
$voodooredir = htmlspecialchars($_SERVER['REQUEST_URI']);I don’t know what to say but really, you saved my day. Thanks
Thank you so much for your tutorial. It helps me a lot. You explained it step by step. Great.
So will changes that you make in text editor remain after theme updates? For example, I have copied and pasted text using text editor and have changed the font family using the text editor. Will this be saved when the theme gets updated? The newer font family does not show up in the visual editor but does on the actual website. Is this common?
Thanks,
Deb
I feel like Im regularly seeking interesting features you just read about a number of subjects, but I handle to add in the blog among our translates every day when you ceceddefcbgcdeab
Thank you so much for your great tutorial. I’m more comfortable with WP after reading your posts.
Question: with the child theme not using the ‘@import url’ command but copying the whole style.css and then modifying (assuming heavy modifications being the reason) doesn’t this then lose any future updates from WordPress?
Thanks again buddy.
Yup, that is a danger! Rarely do WP templates get updated with major changes, but it is a risk. I would usually go through the theme any time it is updated to see if anything changed that affected me.