Installing, Securing WordPress and First Steps

What is WordPress?

WordPress is a free content management system (CMS) that powers more than quarter of the internet.

It can scale with your business when you're ready to grow and is easy to learn with many free and low-cost tutorials for beginners. No matter your level of knowledge, there is a WordPress tutorial to help you create, update, and fix your site.

What is a theme?

A WordPress theme changes the way your site looks and affects the style of the content displayed on it. WordPress themes are built so you can change your site's design without losing content.

There are themes out there that can lock you into their ecosystem, unfortunately. But we play nice and Modern is not one of them :)

What is a plugin?

A WordPress plugin adds additional functionality to your site. There are many plugins available for free in the plugin directory, along with many premium ones out there to address nearly every site need, from eCommerce to email marketing to user registration.

You can check the recommended plugins in the appropriate section of this documentation.

Installing WordPress

You can run WordPress locally on your computer, or install and use it on your web hosting account (what kind of web hosting should you use?).

Securing WordPress

You can improve your WordPress installation security taking these steps:

  • Set the Authentication Unique Keys and Salts in wp-config.php file.
  • Do not use admin as user name and set strong passwords!
  • After installation is done, remove wp-admin/install.php file.
  • Keep backups of the database and WordPress files.
  • Keep your WordPress installation, plugins and themes up to date!
  • You can further strengthen the security of your site by using a specialized plugins and services.

Theme Installation

How to Install the Theme?

Free theme available via WordPress.org repository

  1. Log into your WordPress admin.
  2. In WordPress admin navigate to Appearance » Themes and click the [Add New] button next to "Themes" page title.
  3. On "Add Themes" screen use a search field to search for "Modern".
  4. Once you've found the theme in the search results list, click the [Install] button when hovering over the theme.
  5. After the theme is installed, activate it by clicking the "Activate" link.
  6. Now you can go to Appearance » Welcome page for information on how to set up your website (and the theme). Also, please pay special attention to your website image sizes setup.

Theme purchased on a marketplace

  1. (Re)download the theme package ZIP folder from the marketplace where you've purchased the theme from.
  2. Log into your WordPress admin.
  3. In WordPress admin navigate to Appearance » Themes and click the [Add New] button next to "Themes" page title.
  4. On "Add Themes" screen click the [Upload Theme] button next to page title.
  5. On the next screen choose the theme ZIP package file you've downloaded in step 1 above and click the [Install Now] button.
  6. After the theme is installed, activate it by clicking the "Activate" link.
  7. Now you can go to Appearance » Welcome page for information on how to set up your website (and the theme). Also, please pay special attention to your website image sizes setup.

Tip: Welcome page

After activating the theme, you can read the theme's welcome page navigating to Appearance » Welcome (you can disable this page in Appearance » Customize » Theme Options » Others).

Important: Subscribe for updates

It is strongly recommended to follow or subscribe to WebMan on Facebook or Twitter to get the most recent theme update notices as fast as possible.

You should always keep your WordPress, themes and plugins up to date!

Theme Update

How to Update the Theme?

You will be notified in the WordPress admin bar each time a new updated theme version is released. To install this updated theme version please follow the steps below.

IMPORTANT:

If there is a specific procedure required for the theme update, this will be clearly stated on the WebMan's Facebook and Twitter pages.

Back Up!

It is strongly recommended to back up your theme settings before you update the theme. This is only a precaution procedure and a good practice.

For backing up the theme (customizer) settings, please use the Customizer Export/Import plugin.

Automatic Theme Update

If none of these apply to you, you need to update the theme manually (see below).

Manual Theme Update

First you need to download the theme ZIP package from your marketplace.
  • Updating via WordPress dashboard

    A simple way of doing a manual theme update would be deleting and reinstalling the theme directly via WordPress dashboard. You can read an article or watch a video on how to do this.

  • Updating via FTP

    This is a more advanced manual theme update procedure and you will need an FTP client (such as FileZilla) to connect to your server:

    1. (Re)download the theme package ZIP folder from the marketplace where you've purchased the theme from and unpack the theme installation ZIP file on your computer.
    2. Now you will need an FTP client to connect to your server.
    3. On your server navigate to YOUR_WORDPRESS_FOLDER/wp-content/themes/ folder.
    4. Delete the existing modern folder (or create a backup just in case).
    5. Copy the unpacked theme modern folder from your computer (from step 1. above) to the YOUR_WORDPRESS_FOLDER/wp-content/themes/ on your server.
    6. Log into your WordPress admin area and check the version of the theme in Appearance » Themes. Your theme should be updated now.

Installing Plugins
Main recommended plugins | Other useful plugins

What are Plugins and Why Do I Need Them?

Do you ask why do you need to use plugins when you expected the theme to have all the functionality in it?

According to WordPress guidelines, the themes are meant for presentational purposes only, while plugins provide website functionality.

The reason is simple. When you decide to update your website look in the future, you simply change the theme without loosing your website content and additional functionality such as shortcodes, e-shop or forum functionality among others.

This theme follows this basic WordPress philosophy and you can sleep assured your website is as future-proof as possible!

While you get beautiful look for your website with this theme, it also supports and integrates seamlessly with various plugins. For more info please read on.

Installing Recommended Plugins

The theme uses the TGM Plugin Activation script that prompts you to install recommended plugins after you activate the theme.

The suggested recommended plugins are essential to provide the core functionality the theme relies on and/or to ease out the process of editing your website pages. You can still use the theme without these plugins, however, its functionality and your user experience would be limited.

Plugins Compatibility

Other plugins than the recommended ones should work with the theme with no issues, though some might require additional tweaks to integrate them 100% with the theme (this is usually the case of more robust plugins such as e-shop or directory plugins).

Please understand that there are thousands of plugins available for WordPress and it is not possible for any theme developer to test the theme with all of them. Modern was tested with most of the popular plugins. You can install any custom plugin following the WordPress instructions (or following the plugin documentation).

In case of any plugin incompatibility or error, please, contact the plugin support first before contacting WebMan Design Support Center.

Bellow you'll find a list of plugins that were successfully tested with the theme and works with it without any conflicts:

Jetpack
(https://wordpress.org/plugins/jetpack/)

This plugin was built by Automattic (the company behind the WordPress) and contains a lot of very useful tools for your website.

To choose some of the features included in this plugin: tiled galleries, image lightbox zooming effect, contact form, extra widgets, infinite scroll, better search, social networks sharing buttons, related posts display, CDN, site verification and others.

Please note that you will need to connect your Jetpack powered website once the plugin is active to use its features. For more info on the plugin usage and functionality please visit the Jetpack.me website.

This theme also supports advanced Jetpack features such as Portfolio content type and customizer content options (found under Appearance » Customize » Content Options).

Use this plugin to easily populate the theme's front page banner slideshow.

Advanced Custom Fields
(https://wordpress.org/plugins/advanced-custom-fields/)

Use this plugin to create advanced page/post options metaboxes automatically for better user experience and easier setup of page/post options.

Other Great Plugins Worth Checking Out

You can use any plugin with this theme. Here are some tested, used and recommended plugins by the theme author:

Caldera Forms
A great form builder plugin for WordPress! Highly recommended!
Custom Post Type Editor
Allows you to rename any post type.
Customizer Export/Import
Perfect plugin for backing up your theme's customizer settings.
Disable Comments
Disables comments site-wide per post type.
Imsanity
Automatically resizes huge image uploads.
Intuitive Custom Post Order
For easy posts ordering.
iThemes Security
A great plugin to keep your WordPress site secure.
My Eyes Are Up Here
Helps you control how WordPress generates thumbnails.
Nested Pages
Provides a drag & drop interface for managing pages and posts in the WordPress admin, while maintaining quick edit functionality.
Page Links To
Lets you make a WordPress page (or other content type) link to a custom URL of your choosing.
Polylang
Making your WordPress website multilingual. A great free alternative to paid WPML plugin.
Post Type Archive Descriptions
Allows you to add a description to post type archive pages.
Rename Taxonomies
Allows you to rename any taxonomy.
Rich Text Excerpts
Enables rich text editing in excerpts for any post type which supports them.
Social Warfare
If you don't want to use Jeptack plugin's social sharing buttons, you may try using this great plugin.
Theme Check
Checks your themes against the latest WordPress theme review standards.
Wordfence Security
A great plugin to keep your WordPress site secure.
WP Featherlight
The best free image lightbox (zooming) plugin that just works!

Installing Demo Content

Warning

  1. It is recommended to install the theme demo content into an empty, fresh WordPress site only. Otherwise it might mess up your existing content!
  2. Please note that the theme demo contains a lot of pages. You will certainly end up not using most of them. In that case it is highly recommended to delete the pages, posts, custom posts and media that you no longer need on your website. It improves your website SEO, speed and relevance.

Demo Images and Other Media Quality

Please understand that demo images, audio and video files are low quality due to copyright protection and you should replace them with your own, properly licensed images.

Demo Content Import Issues

Please note that there might occur some connection issues when downloading demo attachments (media files) from demo content servers during the demo content import process.

These, however, are just demo attachments (images, videos, audio files) and you are perfectly fine (actually, you should) replacing them with your own assets.

Other demo content (posts, pages and custom posts content) will be imported without any issues.

One-click Installation

For more info on automatic one-click demo content installation please read the Appearance » Welcome » "Installing the theme demo content". After installing and activating required One Click Demo Import plugin, head over to Appearance » Import Demo Data and run the import process.

In case you experience an issue during the one-click demo content import, please read the online information article.

Manual Installation

For detailed instructions regarding each demo content file installation and download, please visit the theme demo files repository at Github.

You can use this procedure in case the One-click Installation procedure fails. In that case it is recommended to delete (permanently) the imported media files from your media library and run the database reset with a plugin such as Advanced WordPress Reset.

Please check WordPress codex for information about manual demo XML file import issues.

Pages, Page Intro and Page Templates

Setting Up a Front and Blog Page

  1. In WordPress admin navigate to Appearance » Customize » Static Front Page (or to Settings » Reading).
  2. For "Front page displays" option set "A static page (select below)".
  3. Select the front page from dropdown list. This page will become your home page.
    Select the posts page from dropdown list. This page will become your blog page.
TIP: You can also do this in Customizer where you get live preview of your settings.

Page Templates and Post Type Page Templates

Since WordPress 4.7 you can use page templates also with other post types. Where appropriate, this is stated in the list below. The theme contains these useful page templates you can use out of the box:

Front page template Demo

This is a special page template designed for your website front page (homepage). It displays 6 most recent portfolio projects, 6 most recent blog posts and page content (with featured image, if set).

If you want to use your website as a blog, you do not need to set up this page template for any page.
With sidebar Demo

By default, there is no sidebar displayed on pages. However, if you would like to display a sidebar on a page, use this page template with it.

Posts

Post Excerpt

Post excerpt will be displayed in posts list. If no excerpt is set, a portion of post content will take its place in posts list (if set, until <!--more--> tag).

If you set the "Read more" tag inside the post content and you also set a post excerpt, first the post excerpt followed with post content (until "Read More" tag) will be displayed in posts list.

If the "Excerpt" field is not displayed on a post edit screen, please enable it in the "Screen Options" tab in the upper right corner of the screen.

Tip: Changing excerpt size

The default WordPress excerpt size is set to 55 words (reduced by the theme to 40 words). If you would like to change this, use this code in your child theme's functions.php file:

function child_theme_excerpt_length( $length ) {
  return 20; // Now we set the excerpt to 20 words.
}
add_filter( 'excerpt_length', 'child_theme_excerpt_length', 20 );

TIP: You can use Rich Text Excerpts plugin for rich formatted excerpts.

Post Page Templates

Since WordPress 4.7 you can set a custom post type page template for posts, too. It supports "With sidebar" page template.

Table of Contents on Parted Post

If you are setting up a multipage post (using a "Page break" button in visual editor, or <!–nextpage–> tag in "Text" tab of visual editor), the automatic table of contents will be generated for the post/page for you.

All you need to do is to set up a post parts titles at the top of each post part (so, immediately after <!–nextpage–> tag) with H2 heading.

Archive Title Prefix

By default WordPress adds some general caption, prefix to the archive page title, such as "Category:" in front of a category name on category archive page. You can disable these in Appearance » Customize » Theme Options » Others

Post Formats

On post edit screen choose one of predefined post formats in Format metabox on the right. The theme support these post formats:

Standard

This is basic standard blog post layout. Featured image, if set, is displayed above the post content.

Audio Demo

Displays audio player to play your audio files. Could be used for Podcasting.

Insert your audio player anywhere in the post content. The first audio player found will be used in post media area above post content and will be removed from the original post content on single post page.

Gallery Demo

Just add a gallery anywhere in the post content. The first gallery images will be used to create a slideshow in posts list display.

Image Demo

On single post page it acts like standard post, in posts list it displays a featured image (or the first image found in post content) followed by "Excerpt" field content or post title if no "Excerpt" field content set.

Link Demo

Enhances any links in the post content. No post title is displayed. Full post content is displayed in posts list.

Quote Demo

Displays the whole post content as a quote (any <blockquote> HTML tag in the post content will be removed). Use <cite> to set a quote source, or set the quote_source custom field, or the post title will be used as quote source. No post title and featured image is displayed for this post format.

Status Demo

A short status update, similar to a Twitter status update. The whole post content is displayed without excerpt and post title.

Video Demo

Displays video player to play your video files. Could be used for video blogging.

Add your video anywhere into the post content. The first video found will be used in post media area and will be removed from the original post content on single post page.

Jetpack Portfolio

What is it and How to use it?

The Portfolio custom post type gives you an easy way to manage and showcase projects on your site.

First you will need to enable this post type in Jetpack plugin's options in Jetpack » Settings » Writing in order to use it.

For more information about Jetpack Portfolios please visit dedicated information page.

To display all portfolio projects on your site, you can use a portfolio archive page link in the navigation.

This custom post type is provided via Jetpack plugin.
Since WordPress 4.7 you can set a custom post type page template for these posts. It supports "With sidebar" page template.
TIP: If you would like to point the post to a custom URL, try using a Page Links To plugin.
TIP: If you would like to rename this post type, use the Custom Post Type Editor plugin. To rename the custom taxonomies related to this post type, use the Rename Taxonomies plugin.
TIP: For custom posts order you can use a plugin, such as Intuitive Custom Post Order.

What is it and How to use it?

On front page (homepage) of your website, the theme displays a banner area with an image and text or a slideshow of banner images and texts.

Default basic display

By default the banner area displays Header Images (Appearance » Customize » Header Image) and custom text (Appearance » Customize » Theme Options » Texts). This is only displayed when no static front page and no featured posts are set.

Static front page display

When you set a Static Front Page, the page title will be displayed as banner text and page featured image as banner image. If no featured image is set for your front page, the global header image will be used. You can override the banner text by setting a banner_text custom field when editing your front page.

Slideshow

To display a slideshow in the banner area on your website front page, you need to mark some of your posts as featured. Then, the banner slideshow will be populated with posts featured images and titles. If you don't set up a post featured image, the global header image will be used instead. If you want to override the post title displayed in the banner slideshow, set up the banner_text custom field for that post.

The easiest way to set up featured posts is to use NS Featured Posts plugin. Simply activate the plugin and then select which posts are featured. These posts will be displayed in the slideshow then.

Alternatively, you can use Jetpack plugin's Featured Content module to assign featured posts.

If you need to override the banner image for a specific page or post, you can set a banner_image custom field for that page/post. If you set the field to -, the default global website header image will be displayed instead.

Using Navigational Menus

Modern supports WordPress Menus, so you can easily create custom navigational menus directly in Appearance » Menus.

Custom menus may contain links to pages, categories, custom links or other content types (use the "Screen Options" tab in upper right corner of the screen to decide which content types to show on the menu edit screen).

You can specify a different navigation label for a menu item as well as other attributes. The theme supports menu item description text. To display menus on website you need to assign them to a menu locations or use a Custom Menu widget.

The theme allows you to create as many menus as you want. However these menus can be placed into predefined locations only. The theme defines these menu locations:

Primary Menu
The main navigation area in the header of the website. Can be nested and hierarchically organized. This is mobile-ready main site navigation menu.
Social Links
Please read the "Social Links" documentation section below for more info.

Please follow the instructions in WordPress codex on how to create menus.

Helpful tutorial: WordPress video tutorials.

Tip:
Post type archive link

You can add any custom post type archive page link into the menu. Please see the image for the instructions »

Adding Social Network Links and Icons

Social icons linked to your social network profiles can be displayed anywhere on the website. But beforehand you must create and set up a social links menu:

  1. Go to Appearance » Menus in the WordPress admin.
  2. Click create a new menu link.
  3. Give the menu a name, such as "Social Menu".
  4. Click [Create Menu] button.
  5. Click the Links header on the left side of the page.
  6. Type a link (such as https://www.facebook.com/webmandesigneu) to one of your social profiles in the URL field.
  7. Give the link a title by typing the name of the service into the Link Text field.
  8. Click [Add to Menu].
  9. Repeat the above steps to add additional social profiles.
  10. In the Menu Settings section at the bottom, check the "Social Links" box for Theme locations.
  11. Click [Save Menu] button.

Adding your social links as a custom menu allows you to sort your profiles and add as many as you want.

The theme currently supports following icons: Behance, Bitbucket, Codepen, Deviantart, Digg, Dribbble, Dropbox, Facebook, Flickr, Foursquare, Github, Google Plus, Instagram, LinkedIn, Medium, Paypal, Pinterest, Pocket, Reddit, Skype, Slack, Slideshare, Snapchat, SoundCloud, Spotify, Stack Overflow, StumbleUpon, Trello, TripAdvisor, Tumblr, Twitch, Twitter, Vimeo, Vine, VK, WordPress, Yelp, YouTube.

For links starting with mailto: an envelope icon is applied. For unrecognized links a link chain icon is used.

Can I use a custom social icon?

If you want to set a custom social icon, please read dedicated support article.

Feel free to use a WordPress native Custom Menu widget to display social menu anywhere on your website.

Using Custom Menu widget to display social network icons

Social sharing buttons

If you want to add a social sharing buttons to your website to allow your visitors to share your content, please consider enabling the Sharing module of Jetpack plugin.

Widget Areas

Predefined Widget Areas

The content of widget areas can be customized in Appearance » Customize » Widgets or Appearance » Widgets. The theme predefines these widget areas:

Sidebar
This widget area is displayed on a "With sidebar" page template only. The theme does not display sidebar anywhere else. This is by design.
Footer Widgets
Displays widgets in footer area of the website. This is actually your main footer section.

Custom sidebars

You can create a custom widget areas (sidebars) and use them anywhere on the website with a help of WooSidebars plugin.

Customizer

What is Customizer and How to Use It

The theme seamlessly integrates its options into the WordPress Customizer.

You can access it navigating to Appearance » Customize. All the changes you make in Customizer will be immediately displayed in the theme preview. However, these changes will not be saved until you press the [Save & Publish] button.

You can set up your site's title, tagline and logo, header images, manage navigational menu locations and widget areas, set up a front and blog page, theme colors, layout, predefined texts and typography.

All the custom theme options can be found under Appearance » Customize » Theme Options section.

Search Engine Optimization and Traffic Tracking

Search Engine Optimization

The theme is coded semantically, with best SEO practices in mind, meaning it is ready to be displayed on top of search results in search engines such as Google.

Please note though, that this is just a basic SEO optimization and you will have to push it further to make the real deal with SEO. For such cases I recommend using Yoast SEO plugin.

You can furthermore integrate support for Schema JSON-LD microformats using a plugin such as Schema or Schema App Structured Data.

Please note that the theme code contained the Schema microformats, but these were removed in theme version 2.0.0 in favor of plugins, which provide more control over the data.

Traffic Tracking

I recommend using Google Analytics by MonsterInsights plugin as it offers advanced customization of tracking of you website.

You can also consider using Jetpack plugin's Stats module instead.

Localization

TIP: How to Install WordPress in Other Languages »

Every WordPress theme contains some texts that need to be translated into your language if you are building a non-English website. This theme if fully translation ready (and supports even Right-To-Left languages) and is also translated into multiple languages out of the box. (For reference of pre-packed language packs please check the list of translation files within modern/languages folder of the theme.)

To enable your language on your website, please switch WordPress into the desired language localization.

How to Translate the Theme?

Translating using Poedit

  1. Make a copy of the original modern/languages/modern.pot file.

  2. You need to rename the copied file now. The naming convention is based on your language code locale and renaming the file extension to "po". So, the British English file would be named as en_GB.po.

  3. Use Poedit to translate the file and export (save) translation also in "mo" translation file format.

  4. Upload translated en_GB.mo file into your WordPress language directory, such as /wp-content/languages/themes/modern/en_GB.mo.

    Alternatively you can put translations into your child theme: /wp-content/themes/your-child-theme/languages/en_GB.mo.

    REMINDER: When you update the theme, all custom translation files will be deleted from /wp-content/themes/modern/languages folder. Do not place custom translation files into that folder!

Translating directly in your WordPress dashboard

If you would like translate the theme directly in your WordPress dashboard you need to use a specialized plugin for that. Please install and activate Loco Translate plugin. For instructions on how to use the plugin please refer to beginner's guide and/or technical overview.

Don't forget to translate your plugins too!

WordPress website is built from WordPress system itself, a theme and plugin(s). There is a very high probability that WordPress system is already translated into your language, so, you don't have to do it on your own. You have also learned how to translate the theme into your language above. But what about plugins and their texts?

If you are lucky, your plugin contains your language localization files already and you don't have to do anything. But if you need to translate the plugin into your language, the best advice is to check the plugin's documentation for instructions (you can check the instructions for WebMan Amplifier plugin localization procedure).

Alternatively you can also use Loco Translate plugin (again) to translate your plugins directly in your WordPress dashboard.

Free WordPress.org themes translation

If you have obtained the theme from WordPress.org themes repository, please translate the theme by clicking the Translate Modern link in theme page sidebar.

Help us translate the theme :)

If you would like to help out translating the theme, please contribute on WebMan Design Support Center.
If you have translated the theme at WordPress.org repository, you don't have to do anything :)

Theme Modifications and Child Theme Download a sample child theme

Important:

Please note that we do not provide support for custom theme modifications!

You are responsible for all the changes you apply to the theme on your website.

If you don't feel comfortable enough coding, please, consider hiring someone who could help.

When and How to Use a Child Theme?

If you need to make any styling or functional changes to the theme, please use the WordPress native child theme functionality. This way you can continue updating the parent (original) Modern theme without any worry of your changes being overwritten as all your custom styles and functionality are kept in a child theme. You can read more about child themes on WordPress Codex pages.

You can put all your custom CSS styles into YOUR_CHILD_THEME/style.css file. (You can alternatively use Appearance » Customize » Additional CSS for that.)

If you also want to change the functionality of the original Modern theme, do so in YOUR_CHILD_THEME/functions.php file. You can freely modify any theme function or class method there by hooking onto the specific "pre" filter or unhooking the function altogether (see below for how to use filter and action hooks).

How to use action and filter hooks?

This topic is dedicated to WordPress developers who would like to modify the theme and alter or expand its functionality.
Please note that we do not provide support for custom theme modifications, though.

The theme is coded according to WordPress coding standards and is full of action and filter hooks. You can easily hook onto these to alter functions outputs (or short-circuit the whole functions - the wmhook_HOOKNAME_pre filter hooks) or alter parameters and variables, to add your own meta data, theme or design options, layouts and much more!

Please check the theme's source code for which hook to use(you can simply search for "do_action(" or "apply_filters(", respectively), or contact WebMan Design Support Center for more details and tips.

Modern theme also uses the Theme Hook Alliance hooks too. This is useful to entirely rebuild the theme structure or add your own sections anywhere in the theme. The whole theme front-end structure setup can be found in files inside the modern/includes/frontend folder.

You can also watch an instructional video on how to use WordPress hooks.

To show all theme hooks you may try using Simply Show Hooks plugin or WP Inspect plugin.

FAQ and Tips and Tricks Frequently Asked Questions and Additional tips for the theme

List of Frequently Asked Questions:

  1. How to set up cookies notification?
  2. How to customize error 404 page?
  3. How to customize WordPress admin?
  4. My images are blurry/small/of bad quality, what can I do?
  5. How to use the Formats button in post editor?
  6. What are custom fields and how to use them?
  7. How to speed up the website?
  8. How to edit CSS or add your own?

How to set up cookies notification? Back to FAQ list ↑

Every European website has to conform European Union guidelines on privacy and data protection and inform users about cookies being set by the website. There are multiple ways to go about this with WordPress, you can use a plugin for that, or set a notification with Cookie Consent by Insites script (there is also a plugin for this script).

How to customize error 404 page? Back to FAQ list ↑

In case you would like to customize the theme's error 404 page and you do not want to touch a line of code, you can do so easily with a help of a 404page plugin.

How to customize WordPress admin? Back to FAQ list ↑

If you are building a website for a client using WordPress (and Modern theme), you might want to adapt the WordPress admin area a bit to remove unnecessary things and maybe even rename some post types. In this case we provide some useful resources you would want to check out:

My images are blurry/small/of bad quality, what can I do? Back to FAQ list ↑

For the information about what image sizes are declared in the theme and how you should set up the WordPress native image sizes, please navigate to Settings » Media and read the "Recommended image sizes" section.

WordPress will rescale and crop the images to selected formats automatically during the image upload process. If you already have some images on your website, these need to be rescaled when using the theme. Please use a plugin such as Force Regenerate Thumbnails to do the rescaling for you.

Blurred images

To prevent blurred images, please make sure you upload images of minimal recommended size (see "Recommended image sizes" section on Settings » Media WordPress admin page).

Image file size

It is recommended to use the Imsanity plugin to keep the sane size of the uploaded images on your server automatically.

"Lightbox" image zooming

If you would like to use a lightbox effect (image zooming), try using great WP Featherlight plugin.

Website speed and performance

To speed up the website loading time consider using a CDN on your images. You can try Jetpack's Photon or CloudFlare (or any other CDN).

How to use the Formats button in post editor? Back to FAQ list ↑

The theme adds a new Formats button to the visual editor of WordPress posts/pages. Please use this button to create a special elements, such as pullquotes, cite source, inline code, super/sub-scripts, uppercase text, highlighted (marked) text.

For all the formats please select a text in post/page content first. The format will be applied on this selected text then.
Visual editor Format button

Editor stylesheet

The theme supports WordPress editor stylesheet, making the experience of writing post or page content truly WYSIWYG.

The width of the edited post or page content is the same as it is on the front-end of your website, specifically set for the best readability. If you edit a page, the content width depends also on the page template you are using.

Text styles » Dropcap text

Apply the "Dropcap Text" format on the paragraph of text, not on a single character.

Text styles » Heading 1/2/3 text style

Please note that this only applies the heading CSS styles on the selected text. It does not apply the actual HTML heading tag, thus making it convenient way of separating styles from structure.

What are custom fields and how to use them? Back to FAQ list ↑

To allow more control over pages and posts appearance, the theme uses some predefined custom fields.

You can use the WordPress native custom fields interface, but for the best experience it is recommended to install and activate the Advanced Custom Fields plugin. The theme is compatible with this plugin out of the box and automatically creates easy-to-use metaboxes for you for all its options (custom fields). If you prefer to use a different custom fields plugin, you need to set the plugin up according to information provided below.

Below is an information about the custom fields used in the theme:

Banner related

For easy setup of these custom fields please use the ACF metabox (click to preview).

banner_image

Use this to override the image displayed in the banner area of the website. You can set this to image URL, image post ID (find this in your WordPress media library), or set - to fall back to default global header image.

banner_text

Use this to override the text displayed in banner area of the website.

It is useful to override the banner text when you are using static front page, or when displaying featured posts in a banner slideshow (in that case set this custom field for the specific post).

Post formats related

For easy setup of these custom fields please use the ACF metabox (click to preview). The metabox is only displayed for specific post formats.

quote_source

You can use this custom field to set up your Quote post format quote source. You can use inline HTML in here.

Easy setup with metaboxes by ACF

For very easy setup of custom fields please install and activate the Advanced Custom Fields plugin.

Once you activate this plugin, the theme will automatically create metaboxes for all custom fields it uses for specific post types.

How to speed up the website? Back to FAQ list ↑

Having a performant, speedy website is a must in todays world. It makes your website more SEO friendly and most importantly pleasing for your visitors. This theme was coded with performance in mind, however, speeding up a website is a complex process that requires some further steps:

  • Use a good hosting

    Having a good host for your website is one of the most important steps you can make towards a speedy website. It should support PHP7 as that alone speeds up your website tremendously. Depending on your location it is also good to use a host that has servers in your country or on the same continent, at least. We recommend using Siteground, WP Engine or Pagely. You can also check out WordPress hosting recommendation page.

  • Optimize your images, video, audio files

    You should always keep the file size of your images, video, audio and other asset files on your website as low as possible. We suggest preparing the images before you upload them to your website: compress them, reduce the dimensions (maybe even crop them). You can also use plugins to keep your image sizes down: Imsanity and WP Smush Image Optimizer, for example.

    In case of video and audio files set the optimal compression and formats before uploading them to your website. Maybe even consider using a 3rd party services such as Vimeo, YouTube and SoundCloud to host your video and audio files off your servers.

    Also consider using a CDN service such as CloudFlare.

  • Enable caching

    We recommend at least enabling the basic browser caching and GZIP compression of your website. However, you get better results using a dedicated caching solution such as WP Rocket (or try other WordPress caching plugin, like WP Super Cache).

    Your hosting provider may actually provide you with a caching solution built directly into the hosting service. Check this with your hosting provider.

    With your caching solution you should also be able to set up a CSS and JavaScript files combining and minification. As minification is a complex process that might cause JavaScript errors on your website we recommend to test it thoroughly and always checking the results before live deploying.

For measuring your website performance and tips on how to improve it try using GTmetrix, Pingdom Tools and WebPageTest.

How to edit CSS or add your own? Back to FAQ list ↑

If you need to apply a custom CSS to override theme styles, since WordPress 4.7 you can add your custom CSS into Appearance » Customize » Additional CSS.

Alternatively use a child theme.

Sources and Credits