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 Michelle 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.
These 3 templates prepare content area for use with a page builder plugin. You can specify the correct content area layout for these templates in Appearance → Customize → Theme Options → Page builders, depending on what page builder plugin you use.
Using these templates will remove page intro title section and there will be no h1 heading tag added by the theme onto the page.
Variations with overlaid header behaves the same as previously mentioned templates on top of page builder ready layout preparation.
These templates work with every public post type.
If you are using Beaver Builder or Elementor page builder plugin, you don't even have to select this template when editing a page with the plugin. The theme will recognize them and applies the "Page builder" template layout automatically for you.
This theme contains a built in featured posts functionality. Once you assign posts to your featured post tag, 3 most recent featured posts will be displayed above posts list on your blog page (as can be seen in theme demo website).
Michelle theme is compatible with WordPress block editor and supports wide alignment, color palettes, font sizes, and others. Using block editor allows you to create beautiful and performant websites with intriguing page layouts without a page builder plugin. Have a look at theme demo website for inspiration.
This theme contains a library of predesigned block patterns to help you create a custom website with ease and in no time. Using block patterns allow you to create your very own website with no clutter (as oppose to importing the whole demo content data, for example).
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.
Menu in this location can be nested and hierarchically organized (up to 4 levels deep) and you can also use a simple megamenu functionality here.
It is also mobile-ready menu and, if needed, mobile functionality can be disabled at Appearance → Customize → Theme Options → Others.
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 michelle/languages/michelle.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 michelle-en_GB.po.)
Use Poedit to translate the file and export (save) translation in "mo" file format.
Upload translated michelle-en_GB.mo file into your WordPress languages directory, into themes folder (such as /wp-content/languages/themes/michelle-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/michelle/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, Michelle 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 with blog display. On other pages (including the static home page) 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:
If you want to build your website with a page builder plugin, you most likely need to select a "Page builder" template for pages and posts where you want to use your page builder plugin. Check the template description for more info.
Warning:Demo content compatibility
Please understand that if the theme demo content was not built with your page builder, you will not be able to use it to edit the imported demo content.
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.
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) Michelle 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 Michelle 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 actionMichelle 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.
Please check the theme's source code for hook references (simply search for do_action and/or apply_filters), or contact support for help.
Michelle theme uses Theme Hook Alliance hooks too. This is useful to entirely rebuild the theme structure or add your own sections anywhere.
Tip:Theme builder compatibility
This theme can be modified with a theme builder plugin such as Beaver Themer or Elementor Pro Theme Builder. You will most likely need to install an additional compatibility layer plugin though (if you are not sure, please search or ask at support forum).