Weaver II Theme, Child Themes and Jetpack Tiled Galleries
In my quest to make the tiles photo gallery that comes as part of the Jetpack plugin work I found I had to create a child theme for my theme of choice, Weaver II.
This was quite the saga and since I couldn’t easily find documentation to make this happen I decided to write it. So here it is, step by step.
References:
http://codex.wordpress.org/Child_Themes
http://wordpress.org/support/topic/jetpack-tiled-galleries?replies=9#post-3842343
http://codex.wordpress.org/Content_Width
Creating a child theme for a new installation.
1. Install Weaver II theme. Don’t customize anything yet. Create the child theme first.
2. With your FTP browser navigate to /wp-content/themes/weaver-ii/ and look for a folder called “weaver-ii-child-demo”.
3. Copy this folder to your local hard drive.
4. The child only needs style.css and any files you want to change. The png file is the thumbnail that will show in the themes section of WordPress. You might want to replace it with a png that means something to you, but you don’t have to.
5. If you are using the free version of Weaver change the style.css so it looks like below. Remove anything after “ Add specific style overrides here…” I put some stuff in bold for you to notice.
/* Theme Name: Change this line to give it a meaningful name. Theme URI: http://weavertheme.com Description: Change this line to give it a meaningful description. Author: Bruce Wampler Author URI: http://weavertheme.com/about Version: 1.2 Tags: custom-header, custom-colors, custom-background, custom-menu, theme-options, left-sidebar, right-sidebar, fixed-width, three-columns, two-columns, black, blue, brown, green, orange, red, tan, dark, white, light Template: weaver-ii
!!!!!!!!!!!!!!!!! IMPORTANT: Change above from weaver-ii to weaver-ii-pro for Pro version !!!!!!!!!!!!!!!!
This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 2 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with this program. If not, see <http://www.gnu.org/licenses/>. */
/* Use the following @import for parent Weaver II theme.
IMPORTANT:
For free weaver, the @import line should use: url('../weaver-ii/style.min.css')
For Weaver II Pro, you MUST make two changes.
For the @import, use: url('../weaver-ii-pro/style.min.css')
AND
Change the above line "Template: weaver-ii" to be "Template: weaver-ii-pro"
*/
@import url('../weaver-ii/style.min.css'); /* alternatively, you can use style.css instead of style.min.css */
/* Minified version: You can create a minified version of this file for your child theme directory called style.min.css. If you do that, you MUST have both the child style.css and the child style.min.css. The style.min.css version will be used automatically if it is defined.
------------------------------------------------------ Add specific style overrides here...
6. If you happen to be also trying to make the Jetpack tiles gallery expand to the full width of your site then you need functions.php with the following modification added.
<?php /* This is the main function.php override file - it controls most of the stuff happening with the theme */
/* Anything you need to actively do, put here. This is the first code that will get run whenever the child theme is activated and used. This example just re-defines a function, but you could do anything. */
/** * Set the content width based on the theme's design and stylesheet. */ if ( ! isset( $content_width ) ) $content_width = 865;
?>
865 works for me. If your default site width as set in the Weaver options is different that 940 you will want to change this accordingly. Any margins you have set may make a difference as well. The width of your site is set in Weaver II Admin -> Main Options -> Layout.
Be sure to remove the code that changes your “continue reading” message.
7. Rename the directory weaver-ii-child-demo to something meaningful to you. Upload it to your /wp-content/themes directory.
8. In WordPress navigate to Appearance → Themes. Your new child theme should be there. Activate the theme and customize away.
But wait, what if you have already customized Weaver II? You don’t wanna start all over setting things up. You can save and import many of your settings but some things are going to be lost. You will have to reconfigure your header image, background image and a few other things.
Here is how to do it.
1. Go to Plugins → Add New and install Weaver II Theme Extras and Weaver II Maintenance plugins. You’ll be glad you did.
2. Go to Appearance → Weaver II Admin → Save/Restore.
3. Hit the button that says Save Settings. You will not be restoring from here when you create your child theme, but having your setting saved is a good idea in case things go wrong. You can can go back us using Weaver (not the child theme) and if anything happened to your settings you can restore them here.
4. The click on “Download – All current settings to file weaver-ii-backup-settings.w2b on your computer. (Full settings backup.) “ Save this file where you can find it on you local hard drive.
5. Back to Appearance → Themes. Switch to your child theme. Look at your website to see that all your work is gone. Be sad about that.
6. Back to Appearance → Weaver II Admin → Save/Restore. Find “Upload file saved on your computer Select theme/backup file to upload:” Select the file you saved in step 4 with the browse button, then hit Upload Theme/Backup.
7. Take a look at your site. Things should be better. You will have to fix (if you have customized them):
Your header image.
Your menus.
Your background image.
So far in my experience all your other settings should transfer over.
Let me know if this works for you. And if you find any errors in this post let me know.