Modesto installation

Once you purchased the theme, begin installation process:

  • download theme package from Downloads section of your Themeforest account;
  • unzip it;
  • open THEME IN THAT FOLDER! directory and find installable modesto.zip archive in it.
  • Log in your domain with freshly installed WordPress and:
    1. go to Appearance>Themes;
    2. On the next page, click the Add New button and then Upload Theme;
    install-m0
    3. Choose modesto.zip and press the Install Now button;
    install-m1
    4. Activate the theme.
    install-m2
    5. Upon activation, there appears a pop up offering to install required theme plugins. Press Begin installing plugins link to start installation.
    install-m3
    6. Select all plugins in the list, select Install option and press Apply.
    install-m4
    7. Upon installation press Return to Required Plugins installer link
    install-m5
    8. Activate required plugins.
    install-m6
    9. After you have installed and activated all theme plugins, there appears Install theme compatible extensions link. Click on it.
    install-m7
    10. There appears a window with the list of all extensions required for the theme. Press Yes, Install these extensions button.
    install-m8
    11. When done, return to the Dashboard. The theme is ready to work.

Demo data import

By installing demo content, your theme will look like the one you see on our demo. This install is not necessary but will help you get core pages, categories, and meta setup correctly. This action will also let you understand how the theme works by allowing you to modify a content that is already there rather than creating it from scratch.

IMPORTANT: After you have imported demo data, all content you had on your site will be deleted and replaced by the theme demo content. That’s why it is strongly recommended to impot demo data on a clean WordPress installation.

KEEP IN MIND: Images from demo site are not imported, since they are copyright protected. Instead of the demo images, there will be imported a dummy image, that you will be able to replace by your own images.

  1. With the theme installed and activated go to Tools > Demo Content Install.
  2. Press the Install button for the Modesto theme and confirm the action in the pop up window.
    install-m10
  3. Installation process has started and it may take a while. The page looks like that while installing demo data:
    install-m11
  4. After setup you will be redirected to the front-end.

 

 

What are Parent and Child Themes?

A WordPress child theme takes the functionality of another theme, named parent theme. It gives you the possibility to customize an existing theme. Instead of modifying the theme files directly, you can activate the child theme and work within it.

All customizations are stored in the child theme and anything in the child takes priority over the parent. So if the same file exists in both child and parent, the file from the child will control that aspect of the theme.

Working with child themes, your customizations are safeguarded from future upgrades because you only upgrade the parent theme, which you never edit, while the customizations are protected in your child theme which you don’t upgrade.

Why use a Child theme?

Safe Updates. You can easily modify your website using child themes without ever changing the parent theme. When a new version of the parent theme appears, you can safely update it as all your modifications are saved in the child theme.

Easy to Extend. A child theme has a great flexibility. It does not require writing a lot of code. You can modify only those template files and functions that you need.

ATTENTION: When you install Modesto theme you must upload both parent and child theme folders to /wp-content/themes/ but you should only activate the Child theme via Appearance > Themes.

Modifying files from the Parent theme folder

While you should never edit files in your Parent theme, if you really must, the safest way to do it is to download a copy of the file you want to modify on your computer, make the changes, and then upload it into your child theme folder.

INFORMATION: This way of modifying the files can be used for any files from the parent theme — note that you must re-create the same folder structure in your child theme that exist in the parent theme in order for the modifications to take effect.

Staying up to Date

Manual updates

Automated updates option for Modesto theme was added in version 1.1.

If you are using an older version, please, follow instructions on manual updates:

  1. Download Modesto theme package from your Themeforest account.
  2. Unzip the package and find modesto.zip archive in ‘THEME IN THAT FOLDER !’ directory.
    updates-m3
  3. Unzip it and upload ‘modesto’ folder via your FTP client to wp-content/themes directory replacing the old files.
    updates-m4

After that automated updates option will be enabled and you will be able to update to future versions as described in this section.

Automated updates

The Dashboard Update Screen provides information on available updates. The number of available updates appears as a notification bubble next to the Updates menu item.

  1. Click on the Dashboard panel
  2. Click the Check Again button to check for the latest available updates.
    updates-m2

From this page you can update:

  1. WordPress – updated regularly with security patches, make sure you always have the latest version of WordPress installed. You have the option to download the latest version and update your WordPress manually (this is usually done by developers and users that are familiar with WordPress. We advise you to use the regular, automatic install)
  2. Plugins – One of the most important plugins that you need to keep updated is Unyson. Your theme needs this plugin in order to work properly so it’s a good thing to keep it up to date.
  3. Themes – in this section you’ll find the themes that you can update. Select the theme you want to update from the list and click the Update Themes button. We frequently release updates and bug fixes so please keep your theme up to date.REMINDER: Note that any customization you’ve made to the theme files will be lost (if they were made in the parent theme folder). Please consider using the Child Theme for modifications. Read more about parent and child themes here.
  4. Extensions – If you see this text: New extensions updates available press the Update Extensions button in order to update your extensions. These are very important as they are the back bone of your theme and it’s important to keep them up to date.
    updates-m1

Twitter and Google Map Api Keys

For proper work of Twitter widget and Google map on your site, it is recommended to set up their API Keys before customizing the theme.

Go to Apperance > Theme settings and switch to API Keys tab.

twitter-m1

There you can enter api keys for Twitter and Google map.

You can generate Twitter api keys here.

Detailed tutorial how to get API keys for Google map, you will find here.

 

Visual Page Builder

The Visual Page Builder comes with a bunch of built in shortcodes and is one of the core extensions from the Unyson framework. In order to start visually building a a new page all you have to do is:

  1. Go to Pages > Add New in order to add a new page.
  2. Press the Visual Page Editor button in order to bring the visual page builder up.
    pages-m1

The builder is composed of elements that can be added on the page by dragging & dropping them (or by clicking on them). These elements are separated on 4 sections:

  1. Layout Elements – composed mainly of different column elements and a custom full width section used to create the page structure
    pages-m2
    pages-m3
  2. Content Elements – composed of shortcodes used to create the page content. You’ll find all you need here, from buttons, quotes and icons to contact forms, testimonials and tabs.
    pages-m4
    pages-m5
  3. Media Elements – composed of shortcodes used to add media to your page: images and video.
    pages-m6
  4. Sliders – composed of shortcodes used to add different kinds of sliders, from Images slider to Twitter slider.
    pages-m7

Every shortcode be it a column, section, content or media has different options built in. In order to bring the options up all you need to do is click the shortcode:

pages-m8

Another useful feature is called Templates. You can use it to save any templates you want for later use:

pages-m9

More about saving and loading templates can be found in this article.

Using Visual Builder Templates

The Visual Page Builder comes with a Template feature that lets you save pages or parts of it for later use in other pages.

KEEP IN MIND: The Template feature can only be used on pages created using the Visual Page Builder and not on Default WordPress pages.

To use this feature, go to Pages and open an existing page or create a new one. You can open the Templates dropdown by clicking on the Templates link from the right side of the builder.

pages-m9

Saving templates

The templates are separated in three categories:

  • Full Templates – lets you save an entire page.
    pages-m9
  • Sections – lets you save a section and all its contents.
    pages-m10
  • Columns – lets you save a column and all its contents.
    pages-m11

Saving a template lets you give it a name.

pages-m12

Loading Templates

Once a template is saved, it will appear in the Templates dropdown under Load Template.

pages-m13
Click on a template name in order to load it into your current page.

IMPORTANT: Loading a full template will overwrite the content of the current page while loading a section or column template will place its content at the end of your current page.

Section background

Section in Visual Page Builder has additional background options, that let you add fullwidth image or video backgrounds.

In order to customize section background options, press Edit button in the upper right corner of the section.

pages-m14

There appears pop up with available options:

pages-m15

  1. Content width: lets you control width of the content elements inside section.
  2. Full Height: you can make section full height and adjust additional settings for it:
    – set content in the middle of section;
    – enable content at the bottom of section: arrow, social buttons etc;
    – enable white border around section
  3. Default font color schema: lets you choose between light and dark font color for the section.
  4. Horizontal align: allows to align content left, right or center.
    pages-m16
  5. Margin bottom: you can control height of the section bottom margin.
  6. Background options: lets you add media to the section background and adjust additional settings.
  7. Additional classes: you can add custom classes to this field if you need to make custom adjustments.
  8. Inline style: you can input custom CSS codes that will be applied only for the current section.

Background options

Press Edit Background button to call background options pop-up:

pages-m17

  1. You can select type of the background: image or video
  2. Background color: as needed, you can set background color instead of image or video
  3. Background: upload image that will be used as a section background
  4. Overlay color: lets you set half-transparent overlay over section background
    pages-m18
  5. Image effect: select one of the available effects for your background
  6. Background size: lets you choose sixe of your background image.

CSS helpers

There is a number of CSS classes, that let one make small modifications in page layout. All of them were used in Modesto demo site and you might want to use them on your site too.

CSS classes must be inserted into Additional Classes field in the module settings or section settings. It depends on how you want to apply the class – only for the particular page element or for the entire section.

csshelper1csshelper2

Full CSS classes list and examples of their usage

  1. banner-max-width – this class serves to make content section smaller, namely 570px wide. It can be used for headings and text. For example, if you use this class in Custom Heading module, it will make large titles and subtitles automatically stand in two or more rows without making extra line breaks. It also ensures nice display on mobile devices.
    csshelper3
  2. smaller-section – this class adds 115px padding on both sides of the section container, that makes it narrower than the normal section.
    csshelper4
  3. col-md-offset-2 col-md-8 – this class adds offset on the left of the content. They are usually used in 2-columns layout, when one needs to position the content in the middle of the column.
    csshelper5
  4. row-reverse – if you need to display sections in alternate direction, use this class. All you have to do is to build sections as you normally do. For example: image on left, text on right. After that apply row-reverse class in that section, where you want to apply alternate direction.
    csshelper6
    The result will reflect on the frontend.
    csshelper7
    This CSS trick will ensure proper display of the elements on mobile resolutions.
  5. border-left col-md-offset-2 – this class lets you add grey border on the left of the element and add an offset on left. It is used mostly for text blocks and headings. You may apply only border-left class, if you don’t need to make an offset.
    csshelper8

Full-screen sliders

There are multiple variations of fullscreen sliders in the theme, that can be used as homepages on one’s site.

In order to create a slider, you should follow the next steps:

  • Create a new page under Pages >Add new sub-tab
  •  Select Full-screen slider or Creative slider template from the Templates list. Each of those templates provide different slider variations.
    slider-m1
  • Publish the page.

Upon saving the page, there appear slider options:

  • Page options: you can select type of the slider with help of the preview images.
    slider-m2
  • Manage slides: you may add slides by pressing Add media slide button.
    slider-m3

IMPORTANT NOTE: Each slider type has its own options and they may differ from another slider type.

slider-m4

After you have created a slider, you may also customize header options and typography in Customize design box.

slider-m5

Adding new post

In order to add a blog post you should follow the following steps:

      1. Log in to your WordPress Dashboard (Ex: http://yourwebsite.com/wp-admin)
      2. Click the Blog Posts tab
      3. Click the Add New sub-tab
      4. Start filling in the blanks:
        – Title: introduce in the upper field the title of your blog post
        – Content: enter any information you want to display on your blog post
        post-m1
      5. As needed, you may also fill in the following fields:
        Blog Categories: select the general topic your blog post can be post in.
        Tags: refers to sub-categories for your blog.
        Featured Image: add an image that is relevant for your blog post.
        post-m2
      6. Select Post style for your post. If you keep Default option, post style will be applied from Appearance>Theme Settings>Single post tab.
        post-m3
      7. When you are ready, click Publish. Your blog post should now be visible on your website unless you’ve set a future publication date.

 

Post with Visual Page Builder

WordPress editor is not the only tool to add content to your posts. You may also add content using Visual Builder.

In order to activate Visual Builder for posts, you should follow the next steps:

  1. Click on Unyson tab in your admin panel
  2. Find Page Builder extension and click Settings
    post-m4
  3. Check Blog posts checkbox and save changes.
    post-m5
  4. Create a new post and click on Visual Page Builder button to start adding shortcodes to your post.
    post-m6
  5. When you are ready, save changed and view your post.

IMPORTANT NOTE: Posts created with Visual Page Builder don’t have short text preview on blog pages. If you need one, you should perform the following actions:

  • Edit your post, open Screen Options panel and check Excerpt checkbox.
    post-m7
  • Scroll down the edit page to Excerpt field and type some text in there. It will be displayed as a post preview on your future Blog page.
    post-m8

 

Blog page

Before creating a blog page, you need to make sure that you had already created some single posts under Blog Posts section.

blog-m1

In order to create a blog page, you should follow the next steps:

  1. Go to Pages > Add new sub-tab, fill in Title field and select Blog template from the list of all templates in the right sidebar of the page.
    blog-m2
  2. Save the page.
  3. Upon saving there appears blog settings box divided in two tabs – Blog settings and Loop settings.
    blog-m3

    Blog settings

    Here you can customize style of your blog page. The options are as follows:
    Header style: lets you choose style of the page title section with help of the preview images.
    Blog style: you can choose layout style, in which your blog posts will be listed.
    Hide additional information: you can hide author, date, comment etc… information, as needed.
    Sidebar: you can enable sidebar on your blog page.
    Sidebar align: lets you choose position of the sidebar on page.

    Loop settings

    blog-m4
    Here you can customize loop options on the blog page. They are as follows:
    Categories: lets you choose particular categories to display.
    Exclude selected: if checked, the selected categories will be excluded from display.
    Items per page: you can decide hoe many posts will be displayed per page.
    Order: switch toggle to show posts in Ascending or Descending order.
    Order posts by: lets you choose order type: by date, title, last modified etc.

  4. After you have configured blog settings, you may also customize additional page settings in Customize design box.
    blog-m5
  5. When you are ready, press the Update button.

 

Blog categories customization

All blog categories are listed under Blog posts>Categories section. Create a new category or press Edit button to customize existing one.

post-m10

There appears a page with options to customize:

  • Name
  • Slug
  • Parent
  • Description: you can add description of your category. It will be displayed on single post pages under category title.
  • Category label color: you can assign custom color to your category label. It will be applied on blog page in Material style.
  • Header style: select header style for your category page.
  • Blog style: select layout of your category page.

post-m11

When you are done, press Update button.

Adding new project

Add a new project by following this step by step tutorial:

  1. Go to Portfolio > All Projects. Here is where all your added projects are listed.
    portfolio-m1
  2. Press the Add New button from the top of the page, or select Add New sub menu in the sidebar.
  3. Begin filling Title and Content fields.
    portfolio-m2
  4. Input all the project related info like Portfolio additional information and Project Cover Image. As needed, assign your project to some category too.
    portfolio-m3
  5. You might want to add subtitle that will be displayed under the project title. You only need to enter it in the Excerpt field.
    portfolio-m8
  6. When you are ready, press Publish.

Project design customization

After you have have added a couple of projects, you can customize their design.

Go to Appearance>Theme settings> Project tab to configure settings for all projects. These settings will be applied for all projects by default.

portfolio-m4

You may also customize design of every project within project settings. All you have to do is to:

  1. Edit the project;
  2. Scroll down the page to Customize design section.
    portfolio-m6
  3. You will see 5 tabs in there:
    Header: controls style of header section with menu and site logo;
    Stunning header: allows to customize design of the project title section;
    Vertical navigation: allows to add vertically aligned links on both sides, that may be linked to any page you like;
    portfolio-m5
    Related: lets you choose between related projects block or pagination.
    Footer: controls style of your footer section.
  4. Staying at any tab, switch toggle to Enable to make options appear below it.
    portfolio-m7
  5. Customize options under all or only selected tabs and save the project.

Project with Visual Page Builder

In order to activate Visual Page Builder for projects, you should follow the next steps:

  1. Click on Unyson tab in your admin panel
  2. Find Page Builder extension and click Settings
    post-m4
  3. Check Projects checkbox and save changes.
    portfolio-m9
  4. Create a new project and click on Visual Page Builder button to start adding shortcodes.
    portfolio-m10
  5. When you are ready, save changed and view your project.

 

Portfolio page

Before creating a portfolio page, you need to make sure that you had already created some projects under Portfolio section.

portfolio-m11

In order to create a portfolio page, you should follow the next steps:

  1. Go to Pages > Add new sub-tab, fill in Title field and select Portfolio template from the list of all templates in the right sidebar of the page.
    portfolio-m12
  2. Save the page.
  3. There appears Portfolio settings box with multiple options. The options are as follows:
    portfolio-m13
    Portfolio style: lets you choose layout style for the page. Each style has additional options, that appear after selection.
    Order: lets you display projects in ascending or descending order. If you keep Default option, the setting will be applied from Theme settings.
    Order posts by: lets you choose order type of the items – by date, title etc…
    Categories: you can select which portfolio categories to show on page.
    Exclude selected: if enabled, the selected categories will be excluded from display.
    Items per page: you may decide how many items will be displayed per page.
  4. When you are done, you may also configure additional page settings in Customize design box.
    portfolio-m14
  5. When you are ready, press the Update button.

Contact page

Contact page can be created in two ways:

  • using Contact page template;
  • using Visual Builder shortcodes.

Contact page with Contact page template

  1. Create a new page under Pages > Add new sub-tab.
  2. Select Contact page template from Templates list in the right sidebar of the page.
    contact-m1
  3. Publish the page.
  4. Upon saving there appeares Contact page settings box with available options:
    Page description: you can input some description on the page, as needed.
    Contact form title: input title that will be displayed above the contact form.
    Text in column: there are 3 such boxes, where you may enter your contact information like address, email phone etc.
    contact-m3
    Social networks: you may enable social networks icons. They will be displayed in on the right side of the above mentioned text columns.
    contact-m2
    – Contact form email: enter email address, where emails will be sent to.
    – Locations: lets you add one or more locations that will be displayed on Google map.
  5. When you are ready, save changes and view the page.

Contact page using Visual Page Builder shortcodes

  1. Create a new page under Pages > Add New sub-tab.
  2. Press Visual Builder button to access Visual Builder editor.
    contact-m4
  3. Compose your page using Visual Builder shortcodes.
  4. You may configure additional template options in Customize design box, if needed.
    contact-m5
  5. When you are done, press Update button to save the page.

Contact form builder

Add a contact form to any page by adding the Contact Form Shortcode via the Visual Page Builder.

Adding the contact form shortcode to a page

  1. Go to Pages > All Pages
  2. Create a new page or click on an existing page that is already created
  3. Click on the Contact Form shortcode in order to add a new contact form to your page.
    contact-m6

Creating the contact form

  1. Click on the Contact Form Shortcode added to the page and this will open a pop up with the Contact Form Builder
    contact-m7
  2. Use this builder in a similar way as the visual page builder in order to create your desired contact form by dragging & dropping any of the form fields on the page.
    contact-m8
  3. Click any shortcode to access the options for that field. From here you can control different settings depending on the field: label, mandatory setting, restrictions, placeholder text, etc.
    contact-m9

TIP: We advise you to go through every field and check every option in order to tailor your contact form to your needs.

Things you might find helpful

  • Every contact form field comes in its own default 1/2 column that can be changed using the arrows.
    contact-m10
  • The Title and Subtitle area is “set in stone” and can’t be deleted. If you choose not put anything in these fields then the title and subtitle will not be displayed.
    contact-m11
  • You can edit any label by clicking on it.
    contact-m12
  • You can toggle the mandatory field option directly from the main screen by clicking the red star in the top right corner of the column.
    contact-m13

IMPORTANT: Make sure your contact form is set up accordingly by checking your message options and sending methods from the Settings Tab.

Message Settings and Sending Methods

Setting up your message settings and sending method is important as it will let you:

  • control all the messages displayed to the user when the form is sent
  • control the emails, messages you receive when a form is sent by a user
  • control the method of sending the form (wp-mail or SMTP)

All these options can be found on the Settings Tab in the Form Builder pop up. Here you’ll see two subcategories:

  • Options – lets you change message options
  • Mailer – lets you set sending methods for your form

Options

contact-m15

  • Email To – the admin email where the form will be sent, make sure to use an email address that you verify often as all the emails sent from this form will go to this email.
  • Subject Message – this text will be used as the subject message for the email.
  • Submit Button – lets you change text of the submit button.
  • Success Message – the user will see this text if the form will be successfully sent.
  • Failure Message – this text will be displayed when the form will fail to be sent.

Mailer

contact-m16

  • Send Method – this is the send method and you have two options: wp-mail (the most used, all the settings are done, you’ll use your standard WordPress mailer to send the form) and SMTP (used if you want to use your SMTP server to send your emails).
  • From Name – when you (the admin) will receive the notification that a new form was submitted from the website you’ll see this name in the From field in your email client
  • From Address – when you (the admin) will receive the notification that a new form was submitted from the website you’ll see this email address in the email from field in your email client

If the sending method is not set, a notification bubble will be displayed on the shortcode after you save/update the entire page from the Update button on the sidebar.

contact-m17

Coming soon page

You can create Coming Soon page in two ways:

  • using Teaser page template;
  • using Visual Page Builder shortcodes.

Coming soon page using Teaser page template

  1. Create a new page under Pages > Add new sub-tab.
  2. Select Teaser page template from Templates list in the right sidebar of the page.
    coming-m1
  3. Publish the page.
  4. Upon saving there appeares Teaser page settings box with available options:
    Date: choose the target date of the event. It will enable counter on your page.
    Background image: lets you upload a background image to your page.
    Show subscribe form: you may enable subscribe form for your page.
    Page description: as needed, you can input some description on the page.
    coming-m2
  5. When you are ready, save changes and view the page.

Coming soon page using Visual Page Builder shortcodes

  1. Create a new page under Pages > Add New sub-tab.
  2. Press Visual Builder button to access Visual Builder editor.
    coming-m3
  3. Compose your page using Visual Builder shortcodes.
  4. When you are done, you may also disable page title and footer sections on the page. It can be done in Customize design box under Stunning header and Footer tabs.
    coming-m4coming-m5
  5. When you are ready, save the page.

Mega menu

The Mega Menu is a user-friendly, highly customizable drop down menu and it looks something like this in our theme:

menu-m5

To create a similar menga menu you should follow the next steps:

  1. Go to Appearance>Menus.
  2. Enable a top level menu item to be used as a Mega Menu.
    menu-m6
  3. Add columns in your mega menu by adding lvl 2 items.
    menu-m7
    IMPORTANT: All the lvl 2 items in a mega menu are columns. These are usually used to create the structure thus having the Hide option enabled for the title.
    menu-m8
  4. Add text or links in the different columns by adding lvl 3 items.
    menu-m9
  5. When you are done, hit the Save Menu button in order to save your changes.

Theme settings

The theme settings can be found under Appearance > Theme Settings. All settings are divided in categories, each of which is located under its tab. The settings page looks like this:

 

settings-m1

General settings

Here you will find general options to control logo, social networks and vertical navigation of your site. The options are as follows:

  • Logotype options: Press Define website logotype button to call logotype options popup and choose type of logo (text or image). If you choose image logo, upload white and dark logos, that will be displayed on dark and white backgrounds accordingly. Upload twice the size (px) of the logo you want to use if you set the Retina-ready option to YES.
    settings-m2
  • Social block Label: this label will be displayed in front of the social networks icons on your site. Input any text you like or leave the field empty.
    settings-m4
  • Social networks: here you can add any social networks, that will be displayed all over your site.
    settings-m3
  • Vertical navigation links: lets you add custom vertical links on both sides of the screen.
    portfolio-m5

Header settings

Under Header tab you may customize header style, width and enable additional elements in it. The options are as follows:

  1. Overlay menu: lets you add menu button, that opens additional overlay menu. You may also choose position of the menu button using Button Position option. In order to configure overlay menu press Select options button.
    settings-m5
    settings-m6
  2. Section width: lets you choose width of the header area: default(boxed), large or fullwidth.
  3. Bordered: if enabled, adds grey border to visually separate header section from the content area.
  4. Navigation style: lets you choose between 2 header styles. If you choose style with left-aligned logo, it will let you activate top panel above header. If you choose style with centered logo, you will be able to add Text block in header.
    settings-m7settings-m8

Blog settings

Under Blog tab you may customize default style of your blog pages.

 

settings-m9

The options are as follows:

  1. Header style: lets you choose style of the page title section or disable it at all.
  2. Blog style: lets you choose layout, where your posts will be listed.
  3. Hide additional info: you may keep or hide information about author, post date and like/comments counters.
  4. Sidebar: you may enable sidebar on your blog page.
  5. Sidebar align: if Sidebar is enabled, choose its position.

Single post settings

Single post options let you control layout of the single post.

 

settings-m10

Available options are listed below:

  1. Post style: lets you choose style for single post among 3 available variants.
  2. Hide additional post info: you may keep or hide post author and date information.
  3. Previous and next post navigation: you may enable or disable navigation on single posts.
  4. Related posts style: Choose style of the Related Posts block.

Portfolio settings

Under Portfolio tab you will find multiple options to configure your portfolio pages.

 

settings-m11

The options are as follows:

  1. Portfolio style: choose style of your portfolio page, where your projects will be listed. KEEP IN MIND: Depending on the chosen style, there will appear additional style options, that may be different for each style.
  2. Items per page: set number of items shown per page
    settings-m12
  3. Order: choose Ascending or Descending order for the portfolio items.
  4. Order posts by: lets you choose order type of your portfolio items.

 

Project settings

Under Project tab you may configure style of the single projects.

 

settings-m13

The options are the following:

  1. Header style: choose one of 5 header styles for projects with help of the small preview images.
  2. Enable inner navigation: lets you enable pagination below the project content.
  3. Navigation style: if above option is enabled, you may choose to display Previous and Next projects or Related Projects block.
  4. Primary portfolio page: lets you choose main portfolio page, where all projects are listed. This options appears if you choose Previous and Next projects to display.
  5. Items style: this option appears, if you choose to display Related Projects block below the project content. It lets you choose style of the related items.

API Keys settings

For proper work of Twitter widget and Google map on your site, it is recommended to set up their API Keys before customizing the theme.

It can be done in API Keys tab of Theme settings.

twitter-m1

There you can enter api keys for Twitter and Google map.

You can generate Twitter api keys here.

Detailed tutorial how to get API keys for Google map, you will find here.

 

Typography settings

Typography settings let you customize fonts for individual pages.

  1. Open Typography tab in Theme settings and begin adding the so called font pairs.typo-m1
  2. After you have pressed Add button, there appears options pop up:
    typo-m2
    – Enter title of the font pair
    – and choose main and accent fonts fom the list.
    – Save options.
  3. After that edit the page, where you would like to change the font.
  4. Scroll down to Customize design box and switch to Typography tab.
    typo-m3
  5. Select your custom font pair from the dropdown list and save the page.

Custom CSS and custom js integration

You can make small customizations of the theme by adding your custom CSS and custom JS codes in the theme.

Simply go to Appearance>Styling section and input your codes to corresponding fields.

custom-css-m1

Available widgets

Widgets add content and features to your Sidebars. In order to access the widgets page go to Appearance > Widgets. The Widgets area on the left hand side is composed of 2 sections:

  • Available Widgets – all the widgets you can use in your sidebars.
    widgets-m1
  • Inactive Widgets – drag widgets here to remove them from the sidebar but keep their settings.
    widgets-m2

How to add widgets to a sidebar

There are 3 sidebars available in this theme:

  • Blog sidebar – you can activate it for your page in Appearance>Theme settings>Blog section.
    widgets-m3
  • Overlay Sidebar Column 1 and 2 – these sidebars are used in Menu Overlay, that is opened upon click over the menu icon in header.
    widgets-m5
    widgets-m6
    Menu Overlay can be enabled in Appearance>Theme settings>Header section on in metaboxes of a page.
    widgets-m4

In order to add widgets to available sidebars, go to Appearance>Widgets and drag widgets from left panel to the sidebar.

widgets-m7

After that adjust widget settings and save changes.

Theme translation

There is a list of words and phrases in the theme that can be translated into different languages.

You can translate them with different tools:

  • WPML String Translation – this is a paid extension for WPML plugin. So if you use WPML to create a multilingual website, you can use WPML String Translation extension to translate translatable strings of the theme.
  • Loco Translate plugin – it is a free translation plugin that you can download from WordPress repository. It has its own documentation. All you have to do is to follow it step-by-step.
  • POedit – this is the most popular translation editor for WordPress. There is a free and pro version of it. free version will be more than enough to translate the theme.

Modesto comes with a translation file modesto.pot that include translatable strings for the theme. It is located in wp-content/themes/modesto/languages/ folder.

 

 

How to translate with POedit?

1. Install POedit on your computer http://poedit.net/ .

2. Open modesto.pot file in it.

3. Begin translating all or some phrases into your language.

d-localization1

 

4. When all phrases are translated, save the file in the following format  {theme_domain}-{ru_RU/en_GB}.{mo|po} .
Example:
modesto-nl_NL.po
modesto-fr_FR.po
modesto-he_IL.po
etc.

 

5. After the .PO file is saved, a .MO file is created automatically.

6. Upload both files (.PO and .MO) via your FTP account into wp-content/languages/themes folder.

Translation will be applied automatically, if you have installed WordPress in corresponding language.

NOTE: It is highly recommended to save a copy of the .PO file on your computer location.

Suggest Edit