Setting up your theme

1) Creating theme pages

  1. Homepage: Create a page named Home and apply to it the Homepage Template from the page attributes panel on the right.
  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 frontpage and the Blog page to be your posts page, as demonstrated in the image below.

reading-settings

2) Populating your blog

To add new posts to your blog, go to Posts > Add New, title your post, enter the content in the editor and 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.

add-new-post

3) Widgets

The entire front page of Roxima is built using widgets. The theme includes several custom widgets to help you do that. You can access them by going to Appearance > Customize > Widgets or Appearance > Widgets.

roxima-widgets

Let’s have a look how they work.

Theme – Slider

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

roxima-widgets-slider-add-item

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

roxima-widgets-slider-select-image

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, whether it is an introductory text, a bio or any other text you might want to include. Its functionality is pretty straight forward. You add the widget to the homepage sidebar and fill in all the info you need. Click the Select Image button to upload an image (optional) and save the widget.

roxima-widgets-custom-content

Theme – Services

Let’s see how to display your services. Add the widget to the homepage sidebar, fill in the title, subtitle and select the text alignment. Click the Add Item button.

roxima-widgets-services

Give the service item a title and add your text. Select an image for it from the Font Awesome set and proceed with adding your next service. When you are done, save the widget.

Theme – Team

Add the widget to the homepage sidebar, fill in title and subtitle and click the Add Item button.

roxima-widgets-team

Next step is filling in all the relevant information for each team member. You can add a name, a title, and small bio which will appear when the team item is clicked. Also you can connect links to four social profiles. Images for the profiles are provided by the Font Awesome set. Add as many items as you want and save the widget.

roxima-widgets-team-member

Theme – Pricing Table

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

roxima-widgets-pricing-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 whether it is not available or included in the package.

roxima-widgets-pricing-item-information

This is how the above pricing item will look like

roxima-pricing-item

Theme – Clients

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

roxima-widgets-clients-add-item

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

roxima-widgets-clients-item-information

Theme – Testimonials

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

roxima-widgets-testimonials-add-item

Upload the testimonial author’s image, their name, role and testimonial text. When you add all testimonials, save the widget.

roxima-widgets-testimonials-item-information

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 required information. Follow the instructions included on the widget to help you find the coordinates of your location. The contact form shortcode can be provided by a contact form plugin like Contact Form 7.

roxima-widgets-contact

Theme – Latest Posts

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

roxima-widgets-latest-posts

Customize the widget’s 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.

roxima-widgets-customize

Here you can toggle animation effects for the widget, change text & background color and upload a background image with optional parallax effect. Also you can apply an overlay to the background image and add extra padding if you need your widgets to be 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

roxima-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 (for example changed the font size of a heading), 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

Here you can toggle the tagline, sticky header and logo padding. Additionally you can modify the colors of various 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 site icon.

Layout Options

Through this tab you can toggle the blog sidebar. You can also configure the length of the automatic excerpt and choose between numbered and older/newer pagination.

Typography Options

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

Content Colors

Are you looking to create your own unique color scheme? This tab will help you do it by allowing you to modify the colors of multiple elements the content has. To do that 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 will allows you to modify the colors of various sidebar elements, in order to complete your custom color scheme.

Widgets

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

Social Networks

Fill in the URLs to your various social network profiles supported by the theme. These will appear on the footer automatically.

Posts Options

Toggle various 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 and toggling the social icons. Also you can add your copyright text.

Static Front Page

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

Static Front Page

Through this tab you can change the default titles for the search results & 404 pages.

Other

In this tab you have 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 add the 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.

roxima-customizer-menu-creation

Additional information

Useful Plugins

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

Image Sizes

The minimum recommended image sizes for Roxima are:

  • Post thumbnail: 850x400px
  • Hero Image, used in the custom content widget: 750x500px
  • Latest Posts widget featured: 750x420px
  • Small Square (Team & Testimonials): 165x165px
  • Slider Image: 1920x800px
  • Blog Listing Square: 400x400px
  • Clients Widget: 0x80px (at least 80px tall, not limited in width)