Setting up your theme

1) Creating theme pages

  1. Homepage: Create a page named Home. Apply to it the Homepage Template from the page attributes panel on the right side.
  2. Blog: This page will display your posts. Apply the default template to it.

(TIP: All page titles serve as examples. You can name your pages according to your needs.)

Once the pages are created, navigate to Settings > Reading, set the Home page to be your static front page and the “Blog” page to be your posts page, as demonstrated in the image below.

2) Populating your blog

To add new posts to your blog, go to Posts > Add new. Title your post and enter content in the editor. Upload a featured image by clicking Set featured image on the Featured Image panel, add a category and/or tag to the post from the respective panels and publish the post by clicking Publish.

3) Widgets

The entire front page of Potenza is built using widgets. The theme includes nine widgets to help you do it. You can access them either by going to Appearance > Customize > Widgets or by Appearance > Widgets.

Have a look at how they work:

Theme – Slider

This widget helps you create slider items. Add the widget to the Homepage sidebar, select the slideshow speed, toggle the automatic slide functionality and press the Add Item button to add your first slide.

potenza-widgets-slider-add-item

Fill in all the required information, like title, subtitle, button text and button URL and click the Select Image button to upload the slider image.

potenza-widgets-slider-item-added

Next click the Add Item again to add another slide, continue as instructed and when you are done click the save button.

Theme – Custom Content

This widget is built to help you add content to your front page. It can be an introductory text, a bio or any text you might want to include. Its functionality is pretty straight forward. You add the widget to the homepage sidebar, fill in all the info you need, click the Select Image button to upload an image (optional) and save the widget.

potenza-widgets-custom-content

Theme – Services

To display your services, follow the next steps. Add the widget to the homepage sidebar, fill in the title, subtitle, select the text alignment and click the Add Item button.

potenza-widget-services-add-item

Give the service item a title, add the text, select an image for it from the Font Awesome set. Continue adding all your services and when you are done, save the widget.

Theme – Team

Let’s introduce your team! Add the widget to the homepage sidebar, fill in title and subtitle and click the Add Item button.

potenza-widgets-team-add-item

Next, you ll need to fill in all the relevant info for each team member. You can add name, title or a small bio which will appear when the team item is clicked. You can also add links to four social profiles. Images for the profiles are provided by the Font Awesome set. Add as many items as necessary and save the widget.

potenza-widgets-team-member

Theme – Pricing Table

To create a pricing table, add the widget to the homepage sidebar, fill in the title, subtitle and click the Add Item button.

potenza-widgets-pricing-table-add-item

Set up the pricing item by filling all related information. Marking the item as featured will make it appear emphasized with a border surrounding it. You can add up to eight features for each pricing item. Placing a dash or minus sign before the text, will display it as not available or included in the package.

potenza-widgets-pricing-table-item

Theme – Clients

To display your clients on the front page, add the widget to the homepage sidebar, fill in the title, subtitle and click the Add Item button.

potenza-widgets-clients-add-item

Upload your client’s logo and provide the URL to their website. After you are finished adding the items, save the widget.

potenza-widgets-clients-client

Theme – Testimonials

To display your testimonials add the widget to the homepage sidebar, fill in the title, subtitle and click the Add Item button.

potenza-widgets-testimonials-add-item

Upload the testimonial author image, their name, role and testimonial text. Once you have added all the testimonials needed, save the widget.

potenza-widgets-testimonials-testimonial

Theme – Contact

Use this widget to let people know how they can get in touch with you. Add it to the homepage sidebar and fill in all the required information. Follow the instructions on the widget to help you find your location coordinates. The contact form shortcode can be provided by a contact form plugin such as Contact Form 7.

potenza-widgets-contact

Theme – Latest Posts

This widget will allow you to display your latest blog posts. Add it to the homepage sidebar, fill in the required information and save it.

potenza-widgets-latest-posts

Customize the widget appearance

At the bottom of each widget you will notice a blue button titled Customize. Click it and it will give you access to the widget customization panel.

potenza-widgets-customize

Here you can toggle various animation effects for the widget. Change text & background color, upload a background image with optional parallax effect, apply an overlay to the background image and add extra padding if you need your widgets further spaced out.

4) Customizing the appearance

All theme customization is done via the WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this:

potenza-customizer

TIP: Any changes you make in the tabs below will be previewed live on the website that appears in right side of the screen. However to save these changes you need to click the Save & Publish button on the top of the bar. If you have made a change but see the button grayed out, move the cursor outside the input box to the next input box. Then the button should be clickable again.

Let’s take a look at the options each tab gives you:

Header Options

You can toggle the tagline, sticky header and logo padding. Additionally you can modify the colors of your header elements.

Menus

You can create and assign menus to the theme. See below for more information on how to add items to your menu. To learn more about menu creation check out the Codex’s menu user guide.

Site Identity

In this tab you can modify the website’s title, tagline, logo, footer logo and website icon.

Layout Options

Here you can adjust the blog sidebar, configure the length of the automatic excerpt and choose between numbered and older/newer pagination.

Typography Options

Here you will find various options about the theme’s typography. You can change heading, body text and widget title sizes. You can also change the capitalization of multiple elements.

Content Colors

Do you want your own color scheme? Not a problem! This tab allows you to modify the colors of many content elements. Click the Select Color button and either use a hex color value in the box or use the palette provided to select a color.

color-picker

Sidebar Colors

This tab allows you to modify the colors of various sidebar elements to complete your color scheme.

Widgets

Through this tab you can add widgets to the theme sidebars.

Social Networks

Here you can fill in the URLs to your various social network profiles supported by the theme. They will appear on the footer automatically.

Posts Options

Here you can adjust multiple aspects of the single post, like the appearance of categories, tags, date, comments etc.

Footer Options

Customize the theme’s footer by changing its color scheme, shaping the social icons and adding your copyright text.

Static Front Page

If you don’t want to have your latest posts on the front page and wish to display static content using a normal page or want to use the looks template as your front page, you can do so here. Set the desired page as your static front page and save.

Titles

Change the default titles for the search results & 404 pages.

Other

In this tab you will find the Custom CSS panel. You can use it to insert styles for elements not covered by the rest of the tabs. Additionally you will find input boxes where you can place your Google Analytics tracking ID and Google Maps API key (if necessary).

5) Populating your menu

Once you are done adding widgets to your homepage, you will need to create a menu. To do that navigate to Appearance > Customize > Menus and create a menu.

  1. Check the box to make the menu your theme’s Main Menu.
  2. Click the Add Items button.
  3. Expand the Custom Links tab.
  4. You will see that there are links to each of your widgets here, select one.
  5. Click the Add to menu button.

Repeat steps 4 & 5 until all your widgets are added to the menu. Click the Save/Save & Publish button on the top of the customizer panel to save the menu.

potenza-customizer-menus

Additional Information

Useful plugins

  • Contact Form 7: Use this plugin to create a contact form, then copy the shortcode it generates and paste it in a page which will serve as your contact page.

Image sizes

The minimum recommended image sizes for Potenza are:

  • Post thumbnail: 850×500px
  • Hero Image, used in the custom content widget: 750×550px
  • Small Square (Team & Testimonials): 260×260px
  • Slider Image: 1920×800px
  • Blog Listing Square: 400×400px
  • Clients Widget: At least 120px tall, not limited in width