MH Magazine WordPress Theme is perfect for online magazines, news websites or professional blogs. If you want to setup your theme like you can see in the theme demo, then please read and follow these simple steps to setup the theme within a few minutes.
1. Create a Static Front Page
When you have activated the MH Magazine theme, then it will list your posts chronological by default. To create a magazine style front page, you will have to create a static front page and use the fully widgetized homepage template.
In order to create a static front page, you need to create a new page and select “Homepage” as template for your page. You can find the option to select the page template under Page Options. You don’t have to add content to that page.
As soon as you have created and published your new page with the Homepage template, you need to set this page as your static front page in the customizer under “My Site =>
Customize => Static Front Page”. Once this is done, you can start placing widgets on your front page as explained in the next steps in this tutorial.
MH Magazine theme has in total 25 locations where you can place WordPress widgets, custom widgets or add any HTML code you like. To find out more about widgets in WordPress and how to use them in general, please read this tutorial: Widgets
MH Magazine comes with 6 custom widgets: Slider Widget, Spotlight Widget, Custom Posts Widget, Carousel Widget, Custom Pages Widget and News in Pictures Widget. In the following, please see what these custom widgets can do:
This widget displays large featured images with title and excerpt (optional). The Slider Widget is preferred to be used in widget area “Home 1” on the homepage template. You can select one category or all categories to be displayed; and you are able to filter multiple categories by ID (how to find the category ID) or filter posts by tags. You may determine the post number, skip posts and choose the post order (latest, random, popular). Depending on the selected widget location for the Slider Widget, you can adapt the image size (940 x 400px or 620 x 264px). Regarding the excerpt, you are free to adapt the excerpt length or disable the excerpt entirely. For this to work, you need a featured image set.
You may use the Spotlight Widget to present special posts in a prominent position. This widget is best to be utilized in the widget area “Home 2” on the homepage template. You may enter a title and you can choose a single category or all categories to be displayed; besides you can filter posts by tags. You can show latest, random or popular posts and skip posts if you like. Depending on the widget location you choose for the Spotlight Widget, you have two options regarding the image size (940 x 400px or 580 x 326px). Further you may determine the excerpt length and disable the excerpt, post meta or comments.
Custom Posts Widget
The Custom Posts Widget can be used to display posts based on categories or tags. This widget shows thumbnails and excerpts below each other. Therefore you can select the post number and also skip posts. Besides, you are able to show latest, random or popular posts. Regarding the excerpts, you can determine their lengths and display excerpts for all posts, the first post or show no excerpts at all. Show / hide all thumbnails or just select the small / large thumbnails to be shown / hidden. Further, you can hide the date or the comment count.
This widget shows an arbitrary number of thumbnails which are linked to the content and rotate as you click the arrow. The Carousel Widget is preferred to be used in widget area “Home 7” on your homepage template. You may either choose a certain category to be shown, all categories or you can filter multiple categories by ID. Besides, you may select the post order (latest posts, random posts or popular posts). The Carousel Widget offers two types of layouts and you can also display a title if you wish.
Custom Pages Widget
With this widget you can display pages based on page IDs. This widget shows the page title, thumbnails and an excerpt. You may show a title and link it to a URL – both is optional. If you like, you can show an excerpt for the first page, all pages or no excerpts at all. Displaying an excerpt you may limit the characters as you prefer. Regarding the thumbnails, you may display / hide all thumbnails or display / hide all large / small thumbnails.
News in Pictures Widget
This widget shows a square shaped gallery of small thumbnails which are linked to the post content. You may display all categories or a certain category; and you can filter multiple categories by ID or filter posts by tags. Further, you can choose an arbitrary number of thumbnails to be displayed and you may determine to display latest, random or popular posts.
Behavior of Sticky Posts in Widgets
Sticky posts will only display on top of other posts in the widgets if you’ve set the category filter to All and also have unchecked the Ignore Sticky Post Behavior option within the options panel of the particular widget.
2.1 Available Widget Locations
These are the available widget locations in the MH Magazine theme:
- Header: widget area above the logo
- Sidebar: widget area located in your sidebar
- Sidebar 2: second sidebar (has to be activated in the theme options)
- Home 1 – Home 11: widget areas on “Homepage” template
- Home 12: sidebar on homepage template (only active when site width is 1300px)
- Posts 1: widget area above post content
- Posts 2: widget area below post content
- Pages 1: widget area above page content
- Pages 2: widget area below page content
- Footer 1 – Footer 4: widget areas located in footer
- Contact: widget area on contact page template
- Contact 2: second sidebar on contact page (has to be activated in the theme options)
You can learn more about the position of these widget locations by having a look at the widget map of the widgetized “Homepage” template.
2.2 Widget Location Home 12 and Second Sidebar
There is an optional widget location (sidebar) available for your front page with the “Homepage” template. This additional widget area is named “Home 12” and will be only available if you have activated it in the built-in layout options.
To do this, please navigate to “My Site => Customize => Layout Options” and set the site width to 1300px to increase the width of your site, which will enable the widget area “Home 12” as well. As soon as you have saved your settings, the widget location “Home 12” will be available on your front page and you can start placing widgets in it.
IMPORTANT: Please be aware that if you’ve set the site width in the layout options to 1300px or have enabled the second sidebar, the “Home 12” widget location and/or second sidebar will float automatically to the bottom of the page if the width of your browser window is less than 1340px.
You can test this very easily if you resize your browser window and see how the responsive layout of your website adapts. You can change this very easily by setting your site width to 980px and disable the second sidebar, in that case your site will only need 1000px width to display content and sidebar next to each other.
2.3 Create a Front Page like in the Theme Demo
After you have created your static front page correctly, you can easily drag&drop widgets in the “Home” widget areas and they will be displayed on your front page.
If you want to create the same layout as used in the theme demo, please check the widget map below. There you can see the locations of the widget areas on the fully widgetized homepage template. Now you can follow this list and add the widgets to the specific widget locations to have the same layout as in the demo:
- Home 2: Slider Widget
- Home 3: Custom Posts Widget (enabled excerpts for first post)
- Home 4: Custom Posts Widget (enabled excerpts for first post)
- Home 6: Custom Posts Widget (ordered by popularity)
- Home 6: Tag Cloud Widget
- Home 7: Carousel Widget
- Home 8 – Home 10: Custom Posts Widget (enabled excerpts for first post)
- Footer 1: News in Pictures Widget
- Footer 2: Custom Posts Widget
- Footer 3: Custom Posts Widget
- Footer 4: Textwidget
2.5 Map of Widget Locations
Here you can see the locations of the several widget areas on the fully widgetized homepage template of MH Magazine theme. Feel free to add widgets to the available widget locations as you like.
3. Layout Options
MH Magazine theme has included layout options to change the layout of several elements like widget titles, archives and more. You can access the layout options from the theme customizer at “My Site => Customize => Layout Options”.
Feel free to modify the layout as you like. You can check the preview in the customizer before you save your changes. Widgets like “Slider” or “Carousel” also have included layout options. You will find these options when you place the widget somewhere and check the widget settings.
In the theme demo we have used the following layouts:
- Widget Titles: Layout 3
- Page Titles: Layout 1
- Author Box: Layout 2
- Archives: Layout 2
4. Custom Menus
MH Magazine theme supports custom menus with multi-level dropdown support. If you don’t know how you can create custom menus in WordPress, then please check this tutorial: Custom Menus. The theme has included 4 custom menu slots:
- Main Navigation
- Infomenu below Main Navigation
5. News Ticker
MH Magazine comes with a sleek little news ticker for your posts. Here you can filter posts by categories or tags to display breaking news, announcements or just any other kind of posts you like. You can enable the news ticker in your WordPress dashboard under “My Site => Customize => News Ticker Options”.
You can filter posts either by category ID or tag slug. To find the category ID in your WordPress dashboard, please navigate to “Posts => Categories” and simply hover your mouse cursor over the “category” link or the “edit” link of the category.
Now have a look at the status bar of your browser and check the url that is shown there. You can find the WordPress category ID there as “tag_ID”. So in this example the category ID you will need is 1885:
You can now use this category ID to filter posts in the news ticker. In case you want to use multiple category IDs, you can separate them with commas. As an alternative you can filter posts by tag slug. A tag slug is the name of the tag as shown in the url of the tag archive. For example the tag slug for “New York” would be “new-york”.
MH Magazine theme uses featured images for all thumbnails. It is recommended to upload images with a size of at least 940 x 400px (especially when you are using the large slider). In that case all required thumbnails will be generated automatically by WordPress.
If you haven’t set a featured image for a post, then MH Magazine will display a grey image placeholder as thumbnail. You can read this tutorial to learn more about featured images: Featured Images.
Here is an overview of the thumbnail sizes in MH Magazine:
- 940 x 400px (large featured image and thumbnail for slider widget)
- 620 x 264px (default featured image on posts)
- 580 x 326px (thumbnails for spotlight widget)
- 300 x 225px (thumbnails for use on archives and custom posts widget)
- 174 x 131px (thumbnails for use on archives)
- 174 x 98px (thumbnails for carousel widget)
- 70 x 53px (thumbnails for use on custom posts and news in pictures widget)
Please keep in mind that most of the image ratios in MH Magazine are suitable for images in landscape format. In case you want to upload images in portrait format (e.g. book covers) you need to be aware that your images might be heavily cropped and cut off at the top and bottom of the image. If you experience these kind of issues, you can replace the image in portrait format with an image in landscape format or you could edit your image with an image processor before you upload it to WordPress.