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 Q'tron 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.
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.
On the post edit screen you can choose a post format supported in the theme:
This is basic standard blog post layout.
Displays audio player to play your audio files. Could be used for Podcasting.
To set the audio, use an [audio] (or [playlist]) shortcode in the content. The first [audio] ([playlist]) shortcode will be used in post media area in posts list display, including the post featured image.
If no [audio] or [playlist] shortcode used, but oembed media URL found, this media will be displayed instead of the featured image in posts lists display.
Just add a [gallery] shortcode anywhere in the content. The first [gallery] shortcode images (3 of them) are used as a preview in posts list display.
On single post page it acts like standard post, in posts list it displays an image, post title and "Excerpt" field content which can be used as a brief image info.
Enhances any links in the post content. No post title is displayed.
Displays the post content as blockquote (any blockquotes in the content will be removed and replaced with single wrapping blockquote).
Use <cite> to set the 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.
A short status update, similar to a Twitter status update. The whole post content is displayed without excerpt and post title. If no featured image set, the post author avatar is used.
Displays a video player to play your video files. Could be used for video blogging.
To set a video, use a [video] (or [playlist]) shortcode in the content. The first [video] ([playlist]) shortcode will be used in post media area in posts list display.
If no [video] or [playlist] shortcode used, but oembed media URL found, this media will be displayed instead of the featured image in posts list display.
Logos custom post can be used to easily manage your clients and parthers logos.
They can be grouped into categories, so you can create a separate category for clients and separate category for partners (and for others) and then display them on the website individually using dedicated Beaver Builder module.
For each logo you can set up an image, custom link URL, custom link action and assign it to a logo category.
Content Modules can be used as a reusable content injection to various website areas. They can be styled as icon boxes, so they are perfect for your services, features or benefits presentation.
For each Content Module you can set up a title, description text, custom link URL, custom link action, featured image and/or font icon.
If you use font icon, you can change the icon color and its background too. If you set both the icon and featured image, the special Content Module layout will be displayed: square featured image with overlayed icon on left and the module's content on right.
It is also possible to conveniently group Content Modules using dedicated tags.
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.
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:
Is displayed on all posts. If you want to display a sidebar on a page, please use a Beaver Builder page builder plugin.
Displays widgets in footer area of the website. Widgets will be aligned into columns automatically depending on the number of widgets in the widget area. If you set more than 4 widgets in this widget area, they will be spread into 4 columns, and masonry layout will apply.
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 qtron/languages/qtron.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 qtron-en_GB.po.)
Use Poedit to translate the file and export (save) translation in "mo" file format.
Upload translated qtron-en_GB.mo file into your WordPress languages directory, into themes folder (such as /wp-content/languages/themes/qtron-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/qtron/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.
Help With Your Translations
If you would like to help out translating the theme, please contribute your translations at WebMan Design support forum by submitting a ZIP package of your .po and .mo translation files in a new support ticket attachment. Thank you!
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 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.
This theme predefines some useful modifier CSS classes for you. You can use them in block editor, in page builder, or however you find useful. These classes modify appearance of your website elements and blocks.
For full up-to-date list of helper modifier CSS classes and instructions on how to use them refer to the theme demo website.
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 utility icons set is used by the theme internally to provide icons for post meta information, for example. These icons can not be changed easily, you can override them with custom CSS code only. The theme uses Genericons icon set as the utility icons.
Thanks to help of WebMan Amplifier plugin, you can use a set of custom content icons, which can be changed under Appearance → Icon Font in your WordPress dashboard using a Fontello online icon fonts generator. These icons are then available to set in Content Modules posts or for use anywhere on the website (just grab the icon-specific "Instant HTML" when hovering over an icon in Appearance → Icon Font page).
By default, the theme provides its own custom content icons set best suited for the theme usage purpose. If you import your own Fontello icons set, this will override the default theme icons. In case you just want to add a new icons to the theme's predefined set, please import the theme's qtron/assets/fonts/fontello/config.json file into Fontello icons font generator first (as seen in the picture below) and then select your additional icons or import your custom icons SVG into Fontello (read instructions on how to use Fontello).
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) Q'tron 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 Q'tron 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 actionQ'tron 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.