This is a beginners guide to Whimsy Framework that will help you style your WordPress website. With this Whimsy Framework guide, I hope to help even non-technical people create a beautiful website.
The Whimsy Framework Guide was written for users with an already-functioning self-hosted WordPress website installed. If you need help getting your website up and going for the first time please read my Newbie Guide to WordPress.
Step 1: Backup and update your website
First, backup your files and database. You can do this from your host online file manager. Or, use FTP to backup your files.
The Reliable Way
You can backup your entire website file structure to be safe, but I tend to only save my wp-content folder. This is where all my website’s plugins and theme live. I install WordPress, import my database, and replace the wp-content folder.
Access your database using PHPMyAdmin from your hosting account center (such as cPanel). You’ll need to login to PHPMyAdmin and navigate to your WordPress database. Then export and download your background as a .sql file.
The Easy Way
Updraft Pro is a free plugin that makes backups of your files and database and sends it to your choice of storage. Google Drive and Dropbox are a few options available.
Some people have had issues restoring backups, so it’s not as reliable as a manual backup. But, it is active on 1+ million sites and has a 4.8-star rating. It’s a valuable tool and an easy way to backup your site if you’re not all that tech savvy.
Update your Plugins and Themes
Now that everything is safe and backed up, make sure WordPress and all your plugins are up to date.
Step 2: Install and activate Whimsy Framework
Whimsy Framework is available on the WordPress theme repository. That means you can install it by searching from your WordPress dashboard.
Search for Whimsy Framework from your dashboard
From your dashboard, go to Appearance > Themes > Add New and search themes for “Whimsy Framework”. Install and then activate Whimsy Framework.
Step 3: Make a child theme or use Whimsy + Child, a free starter theme
No matter which WordPress theme you use you should start your customizations with a child theme. Child themes protect the modifications you make to your theme. A child theme keeps your parent theme secure and updated without losing changes.
Step 4: Customize the colors, menus, images, and widgets
Don’t like editing CSS and HTML? There’s plenty of ways to customize Whimsy Framework with the Customizer.
Add your logo
Whimsy Framework is responsive. That means it changes layout based on the screen size it’s viewed from. There are two different ways to display your logo — desktop, and mobile.
Your desktop logo is the full-size logo that can be center-aligned or aligned to the left.
Around the size of the portrait view on an iPad (980px), the menu collapses into a mobile menu. The desktop logo is changed to a compact mobile logo, or if left empty, your site title.
Tweak the display options
There are options for which side your sidebar should be on and how many widget columns in your footer.
There are also tweaks you can make to pages and layouts.
Change your colors
Change the background color for the entire website.
Change the color of links and buttons on hover.
This is the background color for your main navigation.
This is the background color for links that drop down in your main navigation.
Choose a different color for all links and buttons.
Change the color of all normal body text.
This is the color of the main links in your navigation.
This is the color for text links that drop down in your main navigation.
Load your menus
The Whimsy Framework has two menu areas — Primary, and Footer.
The Primary menu is at the top of the page. It is mobile friendly, and you can add secondary pages that drop down.
The Footer menu is a list of pages located near the bottom of the page, above the footer widget area.
Choose your widgets
Whimsy Framework includes two widgets made with bloggers in mind. An About Me widget, and a Social Network widget. You can see them in action in my sidebar here.
Step 5: Show it off with #madewithwhimsy on social
When you’re ready to launch your beautiful new website, use #madewithwhimsy on social media so I can see your beautiful website!