Thank you and congratulations for using a theme by WebMan Design!
This user manual will teach you how to set up and use the theme. In case you have any questions that are beyond the scope of this documentation, please join WebMan Design support forum. Enjoy your Modern WordPress theme!
WordPress is free open source CMS software for creating websites. It can scale with your needs when you're ready to grow and is easy to learn with many free and low-cost tutorials. You can learn more about WordPress at wordpress.org.
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. As you are reading a user manual for a WordPress theme and it requires WordPress to run, let's install it first.
The theme allows you to import a demo content, which matches theme demo website. Then you can simply change the imported demo content to your needs and build your website faster that way.
Before you import the theme demo content, please check these important notes:
Theme demo contains a lot of pages. You will certainly end up not using most of them. In that case it is strongly recommended to delete the leftover demo content you no longer need from your website. It improves your website performance and relevance.
Please understand that demo images, audio and video files are of low quality. This is to prevent any copyright infringement. You should replace them with your own, properly licensed media that fit your website project.
Warning:Page builder compatibility
If you want to use a page builder, please understand that if the theme demo content was not built with your page builder, you will not be able to edit the imported demo pages.
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, page content (with featured image, if set) and 3 most recent testimonials.
The options of this page template (like sections location, disabling sections, number of posts they display) can be controlled in Appearance → Customize → Theme Options → Layout.
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.
Colors of intro section can be customized in Appearance → Customize → Theme Options → Colors: Intro. Please note that intro text color will affect also the "loose" elements displayed over intro section and website background, such as site title and tagline (logo), header social icons menu and homepage slideshow captions.
Page intro is mostly a specially styled background image on of the website header area (coming down behind website content area too) for website sub pages, but on your homepage it displays either a background image with custom intro text, or a slideshow of featured posts and portfolio projects:
On blog homepage
If you are displaying blog on your website homepage, an intro text is displayed over the intro image. You can set this intro text in Appearance → Customize → Theme Options → Texts → "Default blog intro text".
On static page homepage
If you set a static homepage, the page featured image is used as intro image, and page title is used as intro text. You can further override the intro image by setting your homepage banner_image custom field and intro title by setting banner_text custom field.
Finally, if you choose some of your posts and/or projects as featured (see NS Featured Posts plugin), these will be displayed in a slideshow on your website homepage (doesn't matter if its set up to display blog or static page). Again, you can further override the intro image and intro text for specific post/project displayed in the slideshow by setting its banner_image and/or banner_text custom fields.
On sub pages
On every page except your website homepage, the intro only displays a specially styled page/post featured image as a website background image.
There are these filters applied on the image to style it as complimentary image not to disturb from the page/post content: grayscale, blur, image is horizontally flipped.
On all pages
By default, the intro image is taken from your website header images that can be set in Appearance → Customize → Header Media. These images will be also used as fall back in case no other image override is found (see below).
By default WordPress displays a caption in archive page titles (such as "Category:" in front of a category name). Use an Archive Title plugin to hide these labels.
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.
Posts List Layout
In Appearance → Customize → Theme Options → Layout you can set up how posts, portfolio projects and testimonials are displayed in lists. Default display is equalizing height of each post in a particular row. However, you can also choose a masonry posts layout.
Please note that there is a difference in displaying "Gallery" post format in each posts list layout. In equalized height list there is a slideshow displayed for "Gallery" post format. In masonry list there are only images without any slideshow.
You can also set up a number of columns displayed in posts lists in Appearance → Customize → Theme Options → Layout
On the post edit screen you can choose a post format supported in the theme:
This is basic standard blog post layout. Featured image, if set, is displayed above the post content. Post excerpt is displayed below post title both on single post pages and in posts lists.
Displays audio player (or playlist) to play your audio files. Could be used for podcasting.
Insert your audio player (or playlist) (or embed media) anywhere in the post content. The first audio player found will be used in the post media area in posts list. The single post page will display as usual.
Insert a gallery anywhere in the post content. The first 3 gallery images will be used in slideshow in the post media area in posts list. The single post page will display as usual.
In posts list it displays a featured image, or the first image found in post content, followed with post excerpt. Font sizes in posts list are different than in default standard post format. This post format is also marked with an image icon. The single post page will display as usual.
It enhances any links in the post content. No post title in posts list and full post content is displayed there.
Displays a full post content as a quote, styled with accent colors. Also displays a post featured image if set.
You can use a cite HTML tag (inside a blockquote tag) to set the quote source. This way you can use any inline HTML to set the quote source. Alternatively, you can set the quote source as a quote_source custom field, but there is no HTML allowed here. Finally, if none of these are set, the post title is displayed as quote source.
Status post format displays a whole post content in posts list. It is a short status update, similar to a Twitter status update. You can also set a post featured image, or the post author Gravatar will be displayed instead.
Displays video player (or playlist) to play your video files. Could be used for video blogging.
Insert your video player (or playlist) (or embed media) anywhere in the post content. The first video player found will be used in the post media area in posts list. The single post page will display as usual.
Navigational menus for your website can be created at Appearance → Menus. They may contain links to pages, categories, custom links or other content. You can specify a custom menu item label, as well as other attributes.
Display menus on your website by assigning them to a predefined theme menu location. The theme defines these menu locations for you:
This is the main navigation in the header of the website.
Click the Custom Links header on the left side of the page.
Type a link (such as https://www.facebook.com/webmandesigneu/) in the URL field.
Give the link a label by typing in the Link Text field. (This label text will be accessibly hidden.)
Click Add to Menu.
Repeat the above steps for additional social links.
In the Menu Settings section at the bottom, check the "Social Links" box for Theme locations.
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. Once you assign a social links menu this way, feel free to use a Navigation Menu widget to display it in sidebars of your website.
The theme displays icons as SVG images. For full list of supported icons please refer to assets/images/svg folder of your theme.
For links starting with mailto: an envelope icon is applied. For unrecognized links a link chain icon is used.
WordPress 5.8 introduced a new block-based interface to widgets and sidebars management screen. As this may be confusing and possibly even cause incompatibility issues in some cases, you can consider reverting back the interface with Classic Widgets plugin.
Predefined Widget Areas
The content of widget areas (sidebars) can be customized in Appearance → Widgets or Appearance → Customize → Widgets. The theme predefines these widget areas:
This widget area is displayed on all posts, archive and search results pages, unless you leave it empty, with no widgets in it. If you want to display a sidebar on a page, use a "With sidebar" page template. If you want to remove a sidebar from certain page(s) only, use Content Aware Sidebars plugin for that.
Displays widgets in footer area of the website. This is actually your main footer section.
Custom sidebars & website layout control
You can create a custom widget areas (sidebars) and use them anywhere on the website with a help of Content Aware Sidebars plugin.
That way you can control even displaying of the sidebar, effectively altering the page layout - limitless options, great flexibility!
Customizer can be accessed at Appearance → Customize. All the changes you make in Customizer will be immediately displayed in the preview, but they will be made live only after you press the Publish button.
At Appearance → Customize → Theme Options panel you'll find theme-specific options. Check them out to get familiar with theme customization capabilities.
Create a copy of the original modern/languages/modern.pot file.
Rename the copied file now: add hyphen followed with your language code locale, and change the file extension to "po". (So, the British English file would be named modern-en_GB.po.)
Use Poedit to translate the file and export (save) translation in "mo" file format.
Upload translated modern-en_GB.mo file into your WordPress languages directory, into themes folder (such as /wp-content/languages/themes/modern-en_GB.mo (if the themes folder does not exist in your WordPress languages directory, create it).
Warning:Don't lose your files!
When you update the theme, all custom translation files will be deleted from /wp-content/themes/modern/languages folder. Do not put your custom translation files into that folder! Basically, you should never modify the actual theme files and folders.
If you are lucky, your plugin contains your language translations already and you don't have to do anything. But if you need to translate a plugin, the best advice is to check the plugin's documentation for the best approach.
Alternatively you can also use Loco Translate plugin (again) to translate your plugins directly in your WordPress admin area.
Accessibility in web development means creating a web site that everybody can use regardless of one's hardware, software, or sensory, or physical impairment. It is about building a barrier-less web.
While creating accessible website is a complex process that includes a content strategy, Modern theme helps you with being accessibility ready out of the box. It complies to WordPress accessibility requirements and was built to help you create a website that passes WCAG 2.1 level AA requirements.
Among other features the theme itself applies proper headings structure, uses ARIA attributes and landmarks where needed, adds informative "read more" links, makes your website navigation keyboard accessible, creates skip links for you and provides sufficient color contrast in default color scheme.
However, please understand that creating an accessible website is not just about a theme. You need to apply accessibility principles also to your website content and be cautious when using plugins. For further information please read WordPress documentation about accessibility.
And for even more information about accessibility please check:
Content area of this theme was designed carefully to provide the best reading experience for your visitors. Maximum line width is set to roughly 70 characters (can be tweaked in theme options). With proper line height and spacing around elements it is easier for visitors to digest your website content.
To comply with accessibility guidelines, the theme follows this headings structure:
Max one h1 on any given page
Theme outputs only one first-level heading (HTML tag <h1>) on each page. This is reserved for a page main title.
Important:Exceptions in templates
Read more about exception from this rule applied with certain templates. For example, you can remove the h1 title altogether and create your own custom one in a page content.
Site title heading
Site title (logo) is rendered as h1 only on homepage. On other pages the h1 tag is reserved for the actual page main title.
Theme follows the best practice by hierarchically organizing heading levels, not skipping any of them. For example, h3 headings can be found only in a section titled with level h2 (and not h1). This rule is applied also in the theme demo content and you should do the same when building your site content too.
Tip:Test it out!
In case you would like to test a page headings hierarchy, there is a great browser extension for this called HeadingsMap.
Why do you need to use plugins when you expected the theme to have all the functionality in it? Well, according to WordPress guidelines and generally the best practice: themes are meant for presentational purpose only, while plugins provide website functionality.
The reason is simple: when you decide to update your website looks you simply change a theme without loosing your website content and additional functionality such as eCommerce or portfolio.
This theme follows this WordPress philosophy and you can rest assured your site is as future-proof as possible. No lock-in effect with WebMan Design themes!
The theme does not need any plugin to work properly. It is coded responsibly and flexibly enough so it should handle any decently coded 3rd party plugin you throw at it.
However, please understand there are thousands of plugins available for WordPress and it is not humanly possible to test them all. Feel free to use your plugin and in case of an issue contact support for help.
Theme provides code and/or design integration for certain plugins. You will find these plugins in recommendations list below. They provide additional functionality for your website or improve your and your visitor's experience.
Please note that these are only recommended, suggested plugins, they are not required for the theme to work. Always read the plugin description before installing a plugin and install only those plugins you will use on your website.
Warning:Demo content required plugins
List of plugin the theme recommends may differ from plugins that are required when installing demo content. Check the demo content information for more details.
Here is a list of plugins that were successfully tested with the theme and the theme even provides additional integration layer for them:
Restores the previous WordPress widgets settings screens. Sidebars and widgets are not going to be used in fully block themes in the future, so if your website still uses sidebars, it is better to use this plugin to enable classic user interface.
Jetpack plugin contains a lot of useful tools and functionality for your website. Among others, there are portfolio and testimonials management, extra editor blocks, social network sharing functionality, content delivery network to speed up your website, site verification functionality, and others.
This type of plugin is also great to alter you website layout with ease. Here are couple of example usecases:
Tip:Classic Widgets interface
When using a sidebar management plugin, it's recommended to restore previous widgets interface with Classic Widgets plugin.
Remove sidebar on specific pages
Simply create a new custom sidebar, let's call it "Empty", and set it to replace the actual theme's "Sidebar" on specific pages.
Then just leave this new custom sidebar empty, with no widgets in it. It will cause the theme to adapt the layout when it detects there is no sidebar on those specific pages displayed. This way you've effectively removed sidebar.
If you, on the other hand, want to display the sidebar on some pages only, you can use reverse logic:
Leave the theme's "Sidebar" empty and create a "Sidebar with widgets" using the plugin. Then set it to display on the specific pages and add some widgets into it.
Display a different footer on specific page
Create a new custom sidebar, let's call it "About page intro widgets", and set it to replace the actual theme's "Footer Widgets" widget area on the specific page (on the "About" page in our case).
Then go ahead and add some widgets into the "About page intro widgets" sidebar in Appearance → Widgets. This new custom sidebar will be displayed in the footer on your "About" page.
The theme is compatible with Beaver Builder page builder plugin. It works wonderfully with this most powerful and easy to use page builder.
The theme was also tested and is working perfectly fine with 6 of the most popular page builders (paid and free ones; see "Compatibility" section aside) and should be compatible with any decently coded page builder plugin.
To ensure layout compatibility the theme offers a convenient "Page builder layout" metabox (preview ») where you can set special custom fields to prepare the page or post layout for use with your page builder.
The theme requires certain minimal image dimensions for optimal display. Info about recommended image size setup can be found at Settings → Media.
Once you set correct image sizes, all your newly uploaded images will get processed with new settings. But for the images already uploaded to your website you need to use additional plugin to refresh their sizes. Regenerate Thumbnails plugin (or similar) will do the trick.
Having a performant website is a must. It makes your website more SEO friendly and most importantly pleasing for your visitors, more accessible. This theme was coded with performance in mind but we can always take things even further:
Use a good host
A good hosting for your website is very important choice you can make towards a speedy website. Depending on your location it is also advised to use a host that has servers in your country or at least on the same continent.
You should always keep the file size of your images, video, audio and other assets on your website as low as possible. Prepare images before you upload them to your website: compress them, reduce their dimensions, maybe even crop them. Use plugins to optimize further more such as Imsanity or Smush.
In case of video and audio files set the optimal compression and formats before uploading them to your site. Consider also using services such as Vimeo, YouTube or SoundCloud to host your files off your servers.
Also consider using a CDN service, such as CloudFlare.
The theme supports Breadcrumb NavXT plugin that allows very flexible set up and display of breadcrumbs navigation on your website. After you install and activate the plugin, the theme displays the breadcrumbs navigation in preset location, above the page content area.
Here is some tip for setting up your breadcrumbs display:
Settings → Breadcrumb NavXT → General → "Breadcrumbs Separator"
Set to <span class="sep"> / </span>.
Settings → Breadcrumb NavXT → General → "Home Template" Settings → Breadcrumb NavXT → General → "Home Template (Unlinked)"
Prepend the existing text with <span class="breadcrumbs-title">You are here: </span>.
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.
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).
Why the theme uses a custom field for this instead of a page template? For better flexibility. If this custom field was replaced with a custom page template, you could not use a different page template on that specific page or post. The theme allows you to use any page template you like while preparing it for your page builder plugin custom layout.
If you need to make styling or functional changes to the theme, use WordPress native child theming functionality. This way you can update the parent (original) Modern theme without worrying your code would get overwritten and lost. All your custom code is kept safe in your child theme.
Put your custom CSS code into CHILD_THEME_FOLDER/style.css file. Alternatively use Appearance → Customize → Additional CSS for that.
Custom PHP code
If you want to change Modern theme's functionality, do so in CHILD_THEME_FOLDER/functions.php file. You can freely modify any theme functionality via that file by hooking onto a specific filter or actionModern theme provides.
Sample child theme
Download a free child theme from WebMan Design GitHub repository. Don't forget to check the information in the repository for how to configure a child theme for your needs.