Michelle User Manual Topics

Michelle WordPress Theme User Manual

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!

Love this theme? Support it by leaving a review →

WordPress

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.

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 security keys 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!
  • Strengthen security further with additional specialized plugins.

Tutorials

Beginner tutorials, resources for first steps with WordPress:

Articles:

Videos:

Theme Installation

Warning: Theme requirements

Michelle requires at least WordPress 5.5 and PHP 7.0 to work properly. Please make sure to meet the requirements.

As you've obtained the theme at WordPress themes repository, use this procedure for installation:

  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 "Michelle".
  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.

Tip: Welcome page

Check the theme welcome page at Appearance → Welcome.

Tip: Get info about updates

Get fast information about new theme updates by subscribing to WebMan Design on Facebook and Twitter.

Theme Updates

You will be notified in the WordPress admin each time a new updated theme version is available. Install the update following instructions below.

Tip: Info on social networks

If there is a specific procedure required during update, this will be shared on the Facebook and Twitter pages.

Important: Back up your website

To keep things safe please consider backing up your website and database before doing any updates to your website.

Automatic Theme Update

WordPress itself will notify you about a new theme update. The only thing you need to do now is to proceed with update procedure suggested in your WordPress dashboard.

Tip: Automatic update failed?

If automatic update fails for whatever reason, please update the theme manually → see below.

Manual Theme Update

Download the theme ZIP package from where you've obtained it originally. Then follow the steps below:

Updating via WordPress dashboard

A simple way of doing a manual theme update is 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 more advanced manual update procedure and you will need an FTP client (such as FileZilla) to connect to your server:

  1. (Re)download the theme ZIP file from where you've obtained it and unpack the ZIP file on your computer.
  2. Now you will need an FTP client to connect to your server.
  3. On your server navigate to WORDPRESS_FOLDER/wp-content/themes/ folder.
  4. Delete the existing michelle folder (or create a backup just in case - you can do this simply by appending the folder name with a .bak, for example).
  5. Copy the unpacked theme michelle folder from your computer (from step 1 above) into WORDPRESS_FOLDER/wp-content/themes/ folder 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.

Content: Demo

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 - no need to start from scratch.

Before you import the theme demo content, please check these important notes:

Tip: Delete leftovers

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.

Important: Install on fresh WordPress

It is recommended to install demo content on empty, fresh WordPress site. (If you are testing a them on a computer and not your live website, you can always reset WordPress to a fresh state.

Warning: Images and media quality

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 images that fit your website project.

And now, for detailed instructions about importing theme demo content please visit demo content repository at GitHub (where it is kept up to date).

Starter Content

This theme supports and contains its own WordPress starter content for easy and fast (small) website deployment.

Starter content is displayed in theme customizeron fresh WordPress installation only. Once you save the customizer settings, the starter content will be ported into your website automatically.

If you have already created some content beforehand, the starter content will not be available for you in customizer.

Content: Pages

Setting Up Home and Blog Page

  1. Navigate to Appearance → Customize → Homepage Settings (or you can also do this at Settings → Reading).

  2. For "Your homepage displays" option set "A static page".

  3. Select your homepage and posts page from dropdown lists. Posts page becomes your blog page.

Tip: Take advantage of live preview

Doing this in customizer you get live preview of your changes.

Templates

Michelle theme supports WordPress page/post templates functionality and contains selection of predefined templates for you (see the list below).

"Content only"

Displays only page content and so it's best suited for creating landing pages. There is no site header, no page intro title section (no h1 heading tag), and no site footer on this template.

It works with every public post type.

"No intro"

Removes page intro title section and there is no h1 heading tag outputted on the page by the theme either.

It works with every public post type.

"Overlay header (light)"
"Overlay header (dark)"

These 2 templates moves the top edge of content area up to the very top of the page, allowing site header to overlay/overlap the content area. Templates work best with full-screen cover imagery.

The "light" and "dark" represent colors of text in overlaid header. Such overlaid header has no background.

Using these templates will remove page intro title section and there will be no h1 heading tag added by the theme onto the page.

These templates work with every public post type.

"Page builder"
"Page builder (overlay header light)"
"Page builder (overlay header dark)"

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.

Tip: Automatic selection

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.

Tip: Theme builders!

With help of Integration for Beaver Themer or Integration for Elementor Theme Builder plugin you can use a specific theme builder plugin with Michelle theme and open limitless possibilities!

Page Excerpt

The theme adds support for excerpts also to WordPress pages. This functionality basically matches post excerpt → check more info about excerpts.

Content: Posts

Excerpt

Excerpt will be displayed in posts list. If no excerpt is set, a portion of post content will take its place.

If you set a custom excerpt text for a post or page, this will be also displayed in page intro section (main title area) unless you hide it with a template.

Archive Page Title

By default WordPress displays a caption in archive page titles (such as "Category:" in front of a category name). Use a Archive Title plugin to hide these labels.

Featured Posts

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).

Content: Block Editor

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.

Block Patterns

This theme contains a library of predesigned block patterns to help you create a custom website with ease and in no time.

Block Styles

With Michelle you can change block appearance with ease with provided additional styles integrated directly into editor. Simply choose your preferred style from block options and you are done.

Tip: Modification CSS classes

For further customization of block appearance check information about additional modification CSS classes.

Block Based Content

Michelle lets you design your site footer and error 404 page content with full power of block editor. No more theme layouts here - you are in control now!

Go to Appearance → Customize → Theme Options → Others and follow instructions in the "Content" section to set up custom site footer and error 404 page content.

"Spacer" Block Dynamic Height

When applying a minimal height modifier CSS class on "Spacer" block, this gets labeled in block editor to notify you visually about the modification.

Indicating min height altering CSS class in use for the "Spacer" block
Indicating min height altering CSS class in use for the "Spacer" block

Menus & Navigation

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, or use "Navigation Menu" widget in your sidebars. The theme defines these menu locations for you:

Primary

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.

This theme also supports menu item description text:

Setting up menu item description text.
Setting up menu item description text.

Create a Menu

Follow the instructions in WordPress documentation for how to create a menu.

Tip: Add a post type archive link

You can add any custom post type archive link into your menu:

Adding custom post type archive link to menu.
Adding custom post type archive link to menu.

Megamenu

With built in simple megamenu functionality you can display child menu (sub-menu) items in columns.

Megamenu example preview.
Megamenu example preview.
  1. Set a megamenu class on the parent menu item (1st level menu item).

    Setting up menu item class.
    Setting up menu item class.
  2. Then the 2nd level menu items (first child menu items) become captions for megamenu columns.

    Tip: Disable link

    Setting disable-link CSS class on these menu items to render its link inactive.

  3. Finally, the 3rd level menu items (second child menu items) become column menu items within your megamenu.

Theme Options

Michelle seamlessly integrates its options into live preview customizer. You can set up your site's title, tagline and logo, home and blog page, manage menus and widgets, customize colors, layout, typography and 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.

Tip: Site footer content

This theme lets you build your site footer with block editor.

Localization

Tip: Adding languages into WordPress

How to install WordPress in your language?

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 also RTL languages).

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

How to Translate a Theme?

Using Poedit software

  1. Create a copy of the original michelle/languages/michelle.pot file.

  2. Rename the copied file now: add hyphen followed with your language code locale, and change file extension to "po".
    (So, the British English file would be named michelle-en_GB.po.)

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

  4. 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 loose 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 theme files and folders.

Translating in WordPress admin

If you would like to translate the theme directly in your WordPress dashboard you need to use a specialized plugin. Check out Loco Translate plugin and instructions on how to use it at beginner's guide and technical overview.

Translate Plugins Too!

Your website is built with WordPress system itself, a theme and plugins.

There is a very high chance that WordPress itself is already translated into your language. So, you don't have to translate it on your own. You have also learned how to translate the theme above. But what about plugins and their texts?

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

Please make your translations available for everyone by submitting them to WordPress translations repository. Thank you!

Accessibility

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 website.

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:

Focus on Readability

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.

Headings Hierarchy

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 displayed as h1 only on homepage. On other pages the h1 tag is reserved for the actual main page title.

Hierarchy

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.

Plugins

Recommended plugins | Useful plugins

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 best practices, 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!

Info: Compatibility

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.

Recommended Plugins

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:

Useful Plugins

With this theme you can use whatever plugins you like (check out compatibility info above). Here is some selection of useful ones:

AMP
AMP makes it easier for you to achieve good page experience for your visitors.
Archive Title
Removes archive page title labels.
Atomic Blocks
Easy to use content blocks library.
Breadcrumbs NavXT
Create a perfect SEO friendly and flexible breadcrumbs navigation.
CoBlocks
Easy to use content blocks library.
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.
Editor Plus
Extends block editor with additional blocks and functionality.
Imsanity
Automatically downsizes huge images during upload.
Intuitive Custom Post Order
For easier posts (and other post types) order management.
iThemes Security
Enhances your website security.
My Eyes Are Up Here
Helps you control how WordPress crops thumbnails.
Nested Pages
Provides drag and drop interface for managing pages and posts.
Ninja Forms
For creating forms.
Page Links To
Allows you to redirect a post or a page to a custom URL.
Polylang
Easy to use plugin for creating multilingual websites.
Post Type Archive Descriptions
Manages description (displayed on archive pages) for any post type.
Rename Taxonomies
Allows to rename taxonomies, such as "Tags" to "Topics", for example.
WP Featherlight
Image lightbox (zooming) plugin that just works.
WPForms
For creating forms.

FAQ & Tips

  1. How to use a page builder?
  2. Why are uploaded images blurry or small?
  3. How to modify element appearance?
  4. SEO - Search Engine Optimization
  5. How to speed up a website?
  6. How to add custom CSS?
  1. How to use a page builder?

    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.

    ↑ Back to questions list

  2. Why are uploaded images blurry or small?

    The theme requires certain minimal image dimensions for optimal display. Info about recommended image sizes setup can be found at Settings → Media.

    Info: Regenerate images

    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.

    Tip: File size optimization

    It is recommended to use an image optimization plugin to keep the file size of images uploaded to your server under control.

    ↑ Back to questions list

  3. How to modify element appearance?

    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.

    ↑ Back to questions list

  4. SEO - Search Engine Optimization

    This theme is coded semantically, with best SEO practices in mind. Actually, the fact that it is accessibility ready means it is best suited for SEO too!

    You can push your SEO performance even further with help of additional tools such as Yoast SEO. You can also integrate support for microformats with a plugin such as Schema.

    ↑ Back to questions list

  5. How to speed up a 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 thing 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.

    Check out Siteground (a very good personal experience), WP Engine, Pagely or WordPress.com Business plan. You can also have a look at WordPress hosting recommendation page.

    Optimize your images, video and audio files

    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 and 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.

    Enable caching

    A basic browser caching and GZIP compression is a must!

    But you will get better results using a dedicated solutions such as WP Rocket or WP Super Cache. Or maybe your hosting provider applies some sort of caching already? Check with them.

    Warning: Minify & combine

    Your caching solution may provide CSS and JS files minification and combination. Be cautious though: these are complex processes which may cause errors on your website. Test thoroughly!

    Tip: Measure performance

    For measuring your website performance and tips on how to improve it use services such as GTmetrix, Pingdom Tools and WebPageTest.

    ↑ Back to questions list

  6. How to add custom CSS?

    Add your custom CSS code into Appearance → Customize → Additional CSS, or alternatively into your child theme's style.css file.

    ↑ Back to questions list

Modifications

Use a Child Theme

Warning: Limited support help!

Please understand that a very limited support is provided for theme modifications. Responsibility for a code lies on shoulders of the code author. If you don't feel comfortable coding consider hiring a help.

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.

Read more about child themes in WordPress documentation.

Custom CSS styles code

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 action Michelle 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.

Grab a sample child theme from repository now →

Hooks: Actions and Filters

Warning: Limited support help!

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

The theme is coded following WordPress coding standards and provides action and filter hooks for you, which can alter any functionality of the theme.

Please check the theme's source code for hooks reference (simply search for do_action 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).

Tip: Display available hooks

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

Sources and Credits

For sources and credits related to the theme code and assets please check the readme.txt file within your theme folder.

Free Images

You can get free images for your website at these sources: Pexels, Unsplash, StockSnap, Canva… Also check out WordPress resources for free, 100% GPL license compatible image sources.