Learn How to Redesign Your GPL WordPress Theme in About 15 Minutes

Jeremy Blackwood

9 years ago

You've probably heard that TemplateMonster has released a number of GPL-compatible WordPress themes. WildRide was the first of them, and the most popular one. But some of our customers get confused about what websites to use it for. Although its demo is styled as a website about bicycles, this theme is capable of much more.

We have redesigned this WordPress theme to show you its flexibility. Each quick redesign took about two hours, so you will be able to create your own unique website in about a day.

Have a look at this theme. We are going to transform it into a fresh-looking blog for adherents of a healthy diet, and a stylish gallery of graphic design freebies. You will see the final result in the end of this post, and now let’s move to the fun part.

Demo | More Info

Preparations

After you successfully install the theme it will offer you to download some free plugins as well. Here is a short overview of them:

Cherry Sidebar Manager – helps you create and manage custom sidebars.

Contact Form 7 – adds improved feedback functionality to your website.

Easy Twitter Feed Widget and Facebook Widget – lets you deeply integrate your website with the most popular social networks by adding dynamic widgets.

Give – Donation Plugin – enables you to accept donations via flexible forms.

Track Kickstarter Project – shows the summary of your (or any other) Kickstarter project in a form of a widget.

We recommend that you install at least Cherry Sidebar Manager, Easy Twitter Feed Widget and Facebook Widget. The other plugins mentioned are either very specific and/or rarely used (Give or Track Kickstarter Project), or have more preferred alternatives (such as Disqus).

Step by step

Now, when all your plugins are ready, let’s discover what’s under the hood of this theme, and how it can be customized. Go to the Appearance > Customize in the dashboard. Here you will find a long list of categories. This tab covers pretty every aspect of your website, so it’s basically a wizard that allows you to go to any step at any moment. With its help you can completely redesign the theme without closing this page even once.

Site Identity
Here you can change the name of your blog, and enable or disable an animated preloader and a back-to-top button. We switched off the preloader, but you can keep it if you want.

General Site Settings

Logo & Favicon
In this section you can manage the look of your logo. We’ve chosen a simple transparent image, but you can also upload a high-definition variation for retina displays, and a favicon. It is possible to make a text-based logo with one of the available Google Fonts instead of using an image.

Breadcrumbs
Here you can tune up the breadcrumbs, which are very useful for SEO and usability. We have disabled the breadcrumbs on the homepage, but they are still present in posts.

Social Links
Manage the blocks with social links and social sharing buttons. Leaving everything as is won’t hurt.

Page layout
In the ‘Page Layout’ tab you can change the basic settings such as type (fullwidth/boxed), width in pixels, and relative width of the sidebars. We have changed the width of the sidebar to 1/4 in order to allocate more space for content.

Color Scheme
This section is for changing the color of your website’s elements. You can either use a visual color picker, or input hex triplets directly. We’ve picked a darker and more saturated green color than the blue used in the original WildRide design.

Typography
Here you will choose the fonts for body text, headings and breadcrumbs, and also their size, weight, line height and other styling options. We decided to go with the default settings, as they are pretty well balanced (except for the H2 title, which now uses Lobster Two font).

Note: if you can’t apply a certain font, try to decrease its weight – it should help.

Header

Header Styles
Here you can choose a header layout, its background color, or background image/pattern. We have chosen Style 1 with a white background.

Top Panel
In this tab you can change the topmost area of the header – the one where the contact info is placed in the original demo. We removed it completely, as we don’t really need it for a simple non-commercial blog.

Main Menu
If you want make your top menu sticky, you can do this in the Main Menu tab – just check the respective box. In our example we will go with a static, non-sticky menu bar.

Background Image
This button does exactly what it says. In our example we don’t use any background image, but you can apply a large photo, or better, a pattern. Just make sure that your website doesn’t look garish – choose low-contrast images for this purpose.

Menus
This section provides the same functionality as the Appearance > Menus tab, but is more convenient, as you can browse all the changes in real time with the Live Customizer. WildRide offers 4 menu positions: Top, Main, Footer and Social. We have created a simple dropdown menu with categories and supporting pages, and set its position as ‘Main menu’.

Sidebar
Choose the sidebar position in this tab. The following options are available: right sidebar, left sidebar, two sidebars and no sidebar. For our test blog we’ve chosen the ‘sidebar on right side’ position.

Mailchimp
If you use MailChimp for email marketing, this tab is for you. Simply input your Mailchimp API key and list ID, and later go to Appearance > Widgets, create a newsletter form, and place it in one of the widget areas.

Widgets
This tab is an alternative way to manage widgets. There are 7 areas where you can adjust them; you can see all of them on the screenshot above.

We tried to keep things as simple as possible to not overwhelm you with dozens of widgets, that’s why our Organic Blog includes only the most essential of them: Search, About Author, Carousel Widget, Categories, Image Grid and Smart Slider.

Footer
Here you can change the appearance of your footer: choose one of 3 layouts, customize the copyright text, set the number of widget area columns and upload an alternative logo. The logo we’ve chosen for the header contrasts well both with light and dark backgrounds, so we’ve decided to apply it to the footer as well.

Blog Settings
In fact, you should start the customization of your blog with this tab. It allows you to choose from 5 blog layouts and to fine tune the appearance of your post previews. Our choice is the 2-Column Grid layout. We have also kept all the metadata such as comments, publishing date, author and social buttons.

Static Front Page
This is the final step of the customization process. Choose the ‘your latest posts’ option to get a blog layout, or ‘a static page’ to display a landing, or any other static page.

The fruits of labor

Organic Food Blog

Our first specimen is a simple blog executed in a juicy green color palette. It has a two-column grid layout with a sidebar, a large page-wide slider, and a custom font of post titles.

Go to the demo

In a nutshell:

Theme: WildRide;
Layout: 2-Column Grid;
Sidebar: Left sidebar (1/4 width);
Header: Style 1;
Footer: Style 2;
Widgets: Search, About Author, Carousel Widget, Categories and Image Grid in the Sidebar Primary; Smart Slider in the Full Width Header Area;
Colors: Various shades of green;
Typography: Mostly default, Lobster Two for post titles.

What else can be done:

You can improve your sidebar with Social widgets;
You can add banners, email subscription forms and other marketing-oriented elements;
You can make the main menu sticky and add dropdowns in order to improve the navigation of your website.

Design Freebies Blog

As a bonus, we would like to share with you another custom redesign of WildRide. This one is a blog about graphic design freebies – just like GraphicBurger or Freebiesbug. It features a very popular grid layout, a large, clearly visible search form, and a sticky menu. Take a look at the result:

Go to the demo

In a nutshell:

Theme: WildRide;
Layout: 3 Column Grid;
Sidebar: No sidebar;
Header: Style 2;
Footer: Style 1;
Widgets: Search in the Before the Content Area;
Colors: Various shades of purple;
Typography: Default fonts.

What else can be done:

You can add a narrow 1/4 sidebar if you need additional widgets to be displayed;
You can connect your website with your social media accounts, and display their feeds in the footer, or in the sidebar;
You can add Mailchimp subscription forms, and run email marketing campaigns;
You can personalize your blog by adding an About the Author widget.

Wrapping up

As you can see, the number of possible layout and color combinations is virtually infinite, especially if you know CSS. And don’t forget that you can boost the possibilities of this theme with third-party plugins not included in the basic installation.

So, why hesitate? Grab the WildRide theme and launch your awesome blog right today! (Or tomorrow. I'm not here to tell you how to live your life).