Make Your WordPress Site Look Like Our Breeze Demo

The OSTraining Breeze theme for WordPress is our training theme. We use it for many of our sample classes. We also wrote on the GoDaddy blog about our experiences getting Breeze published on WordPress.org.

Breeze is super easy to use and it allows you to customize key features such as the logo, colors and widgets.

In this tutorial, I’m going to show you how to recreate the homepage from our original demo.

Step #1. Install the OSTraining Breeze Theme

• Go to Appearance > Themes > Add new.
• In the search field type “OSTraining Breeze”.
• Click Install.

• Once the theme is installed, click the Activate button.

Step #2. Customize the header and logo

1. Go to Appearance
2. Themes
3. Customize

• To set a custom logo, go to Customize > Logo.

1. Browse and upload
2. Save and publish
3. Click back button

Note: if you don’t upload a logo, the Site title will be displayed instead. More details in the next step.

To set a custom Tagline:

• Click Site Identity:

• Choose your “Tagline”.
• Choose your “Site title”.
• Click Save and publish

Step #3. Set the color scheme

Choose any color scheme that will be reflected in important elements from the site, such as menu and links.

• Customize
• Theme color

• Set Main color, for main menu and links
• Main menu active color, for active links in main menu

• Save and publish.

Step #4. Assign the Menus

Let’s display the two available menu positions:

• Customize
• Menus
• Menu locations

• Assign Main and Footer menus

• Save and publish.

Step #5. Remove widgets from Top sidebar

By default, a few widgets will be displayed in top sidebar. To remove them:

• Customize
• Widgets
• Top

• Click on the widget
• Remove

Repeat the process for the rest of widgets. Don’t forget to save and publish.

Step #6. Add icons

You can add icons to posts, pages and text widgets.

• For widgets, use the example code:

<span class="fa fa-question-circle"> </span>

The class “fa-question-circle” would render the question icon:

• For posts and pages switch to Text mode
• Then add the code below:

<span class="fa fa-fw">[paste-icon]</span>

Replace [paste-icon] with an specific icon:

• Copy the icon from the Font Awesome site

• Paste in your post or page

• Update or publish the page or post to preview the result:

To add a bigger icon size, include one of these classes:

• fa-lg
• fa-2x
• fa-3x
• fa-4x
• fa-5x

Step #7. Add a text widget in Top sidebar

• Customize
• Widgets
• Top
• Add a widget
• Text
• Type the custom text

• Save and publish.

Step #8. Add text widgets in Showcase sidebar

• Customize
• Widgets
• Showcase
• Add a widget
• Text
• Type the custom text

<span class="fa fa-check fa-5x" style="float: left; margin-right:12px;"> </span>
Add some text here.

• Repeat the process to add more widgets.
• Save and publish when you’re done.

Step #9. Add widgets in Footer sidebar

• Customize
• Widgets
• Footer
• Add a widget
• Choose the widget type
• Fill the required settings

• Save and publish.

Step #10. Create the page for home

• Create a page through Pages > Add new.
• Set a title.
• Type some text.
• Set a Featured image. In our demo we use 700 x 355 pixel size.

• Page attributes > Template: Page Showcase.

Note, the template only removes the title from the page, so, if you want to display the page’s title leave this field as default.

• Publish or Update.

Step #11. Set the new page as Front page

• Customize.
• Static front page.

• Front page displays: A static page
• Front page: choose the page you just created

• Save and publish.