Sections: Tutorials

How to use the Magazine Widgets

Our themes include several Magazine widgets which display posts in different layouts. The widgets make it easy to create a flexible magazine-styled website. This tutorial shows how to use them.

Magazine Widgets

Based on the theme you are using there are different widgets included, for example:

  • Magazine Grid
  • Magazine Columns
  • Magazine Horizontal Box
  • Magazine List
  • Magazine Sidebar
  • Magazine Single Post
  • Magazine Vertical Box

Please note that some Magazine widgets are only available with the Pro add-on.

Magazine Homepage Widget Area

The best place to use the Magazine widgets is in the Magazine Homepage widget area.

The Magazine Homepage widget area is displayed in two locations:

If you want to show the Magazine widgets above your latest blog posts, you can simply add the widgets and they are displayed on the blog homepage.

In case you want a front page with Magazine blocks but without the latest blog posts, you can use the static Magazine Homepage template.

Magazine Widgets in the Customizer

The easiest way to add Magazine Widgets is with the Customizer, which offers live preview of your website. Therefore please go to Appearance → Customize → Widgets → Magazine Homepage.

You can also click on the Add Magazine Widget Placeholder in the live preview:

Important: If you don’t see the Magazine Homepage widget area in the Customizer you are on a page which does not show it. Please keep in mind that the widget area is only displayed on the blog homepage or on the static Magazine Homepage template. You have to switch to one of these pages in the live preview to be able to add widgets.

Adding Magazine Widgets

We have enhanced the Magazine widget area with an extra button for adding Magazine widgets. This unique and innovative approach allows you to arrange your Magazine front page in just a few seconds.

Simply click the Add Magazine Widget button to choose from the built-in theme widgets. Of course you can also add any other widget you like by clicking on the normal Add a Widget button.

Magazine Widgets in the WordPress Backend

Alternatively, you can also add and configure your widgets on Appearance → Widgets in your WordPress backend.

Use Featured Images

The Magazine widgets make use of your posts featured images as thumbnails. Therefore your Magazine Homepage will look as intended when your posts have featured images.

If your existing posts have already had featured images, they may look disformed because they do not match the new required sizes for the new theme. In order to fix that you have to regenerate your thumbnails.

Related Tutorials

Magazine Widgets on Blog Homepage

Our themes allow you to turn your default blog homepage into a powerful and flexible magazine-styled website in just a few minutes.

Magazine Widgets above latest posts

The blog template in our themes supports an extra widget area named Magazine Homepage, which is displayed above the latest posts.

That means you only have to add the Magazine Widgets and you’re ready to go.

Use blog homepage as front page

By default, WordPress already shows the blog homepage with your latest posts as front page.

If that is not the case, go to Appearance → Customize → Static Front Page and change the setting to Your latest posts.

Please also see our Static Front Page tutorial.

Deactivate Magazine widgets on blog homepage

If you are using the static Magazine Homepage template and want to show the latest posts on a different page, you might want to deactivate the Magazine widgets from showing up on the blog index.

Therefore go to Appearance → Customize → Theme Options → Blog Settings and disable the Display Magazine Widgets on blog index setting.

Please note that the Blog Settings are only avaible in our most recent themes.

Related Tutorials

Static Magazine Homepage Template

Our themes include an extra Magazine Homepage template which shows the Magazine Widgets on a static page. The instructions of this tutorial explain how you can set up the Magazine template.

When to use the Static Magazine Homepage Template

The Magazine Homepage template displays the widgets from the Magazine Homepage widget area.

The template is useful if you want to create a Magazine page without showing the latest posts below. If that is not the case, you can simply use the Magazine widgets on the blog homepage.

The following step by step instructions explain how to set up the Magazine template.

1. Create a new static page

Go to Pages Add New to create a new static page, or edit an existing page.

The Magazine page won’t show the content, so you can leave the Visual Editor field empty. The title is also not displayed, but you should insert a title like Magazine Page to identify your Magazine Homepage later.

2. Assign the Magazine Homepage Template

Afterwards change the Template of your new static page to the Magazine Homepage template from the Page Attributes box. If you need help, please see our Page Templates tutorial.

magazine-page-attributes

3. Set new Magazine Page as Front Page

If you want to use the Magazine Homepage template as your front page, go to Settings Reading and set Front page displays to A static page. From the dropdown menu, select the Magazine page you created earlier. You can learn more about changing the front page here.

magazine-reading-settings

4. Add Magazine Widgets

After you have created the Magazine Homepage template and configured it to be your home page, you only have to add the Magazine Widgets and you’re ready to go.

The easiest way to add Magazine Widgets is with the Customizer, which offers live preview of your website. Therefore please go to Appearance → Customize → Widgets → Magazine Homepage.

Related Tutorials

Social Icons Menu

Social icons are easy to add with our themes. You only have to create a custom menu and add your social media profiles as menu links to it.

Create Social Icons menu

Go to Appearance → Menus in your WordPress Backend and click on create a new menu. Then insert a menu name like Social Icons to create the menu.

Afterwards you can add all your social media profiles by using the Custom Links menu type.

Enter the URL to your social media profile like Twitter and Facebook. The Link Text is not displayed and only used in the Backend.

You can add a new Custom Links menu item for every social media profile you want to include in the social icons. After you have added all your social media sites, don’t forget to save the menu.

Assign Menu Locations

After you have created and saved your Social Menu, go to the Manage Locations tab.

Then, assign the Social Menu to the Social Icons menu location.

Depending on the theme, there might be different menu locations available for social menus. For example a location for Header Social Icons or Footer Social Icons.

Please note that social icons are not displayed in normal locations like Main Navigation.

Social Icons Widget

In addition, you can also display the Social Icons Menu in a widget. The Social Icons Widget is part of our free Widget Bundle Plugin.

After you have installed and activated the plugin, you can use the Social Icons Widget on Appearance → Widgets in your WordPress Backend.

Included Social Media Sites

The theme will automatically detect the URLs of your menu links and show the appropriate icon. If you add a link to an unsupported website a default icon (star) will be used.

The following social networks and services are supported:

  • 500px
  • Amazon
  • Apple
  • Bandcamp
  • Behance
  • Bitbucket
  • Codepen
  • Deviantart
  • Digg
  • Discord
  • Dribbble
  • Dropbox
  • Etsy
  • Facebook
  • Flickr
  • Foursquare
  • Github
  • Instagram
  • Linkedin
  • Mail
  • Mastadon (insert “Mastadon” as Link Text)
  • Medium
  • Meetup
  • Patreon
  • Pinterest
  • Get Pocket
  • Reddit
  • RSS Feeds
  • Skype
  • Slideshare
  • Snapchat
  • Soundcloud
  • Spotify
  • Steam
  • Strava
  • Stumbleupon
  • Telegram
  • Tumblr
  • Twitch
  • Twitter
  • Vimeo
  • Vine
  • VK
  • Whatsapp
  • WordPress
  • X
  • Xing
  • Yelp
  • Youtube

Extend Social Icons menu (for developers)

You can use the filter hook theme_slug_get_social_svg to add your own custom SVG icon for any menu item URL. You can add the code to the functions.php of your child theme or by using the Code Snippets plugin.

Example:

function child_theme_add_social_icon( $svg_icon, $item_output ) {
	
	// Search for particular menu item link (i.e. custom-domain.com)
	if ( false !== strpos( $item_output, 'custom-domain.com' ) ) {

		// Replace default star icon with custom svg.
		$svg_icon = '<svg class="icon" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h16c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm144-248c0 4.4-3.6 8-8 8h-56v56c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-56h-56c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h56v-56c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v56h56c4.4 0 8 3.6 8 8v48zm176 248c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z"></path></svg>';
	}

    return $svg_icon;
}
add_filter( 'theme_slug_get_social_svg', 'child_theme_add_social_icon', 11, 2 );

Make sure to add the .icon class to your SVG image for proper styling. You can replace custom-domain with your custom URL or page slug. It determines for which menu items the icon appears.

You have to replace the generic filter hook name

theme_slug_get_social_svg

with the theme or Pro-addon plugin slug you are extending. Sometimes the social icons are part of the theme, sometimes from the Pro Version add-on.

Here is a list of filter hook names you can use:

# Themes
donovan_get_social_svg
dynamico_get_social_svg
mercia_get_social_svg

#Pro Versions
chronus_pro_get_social_svg
gambit_pro_get_social_svg
gridbox_pro_get_social_svg
harrison_pro_get_social_svg
maxwell_pro_get_social_svg
napoli_pro_get_social_svg
occasio_pro_get_social_svg
palm_beach_pro_get_social_svg
poseidon_pro_get_social_svg
tortuga_pro_get_social_svg
treville_pro_get_social_svg
wellington_pro_get_social_svg

# Widget Bundle
tzwb_get_social_svg

Our older themes do not support these filter hooks.

Post Slider

If you’d like to display the featured post slideshow on your homepage, please follow these instructions.

Please note: Not all of our themes support a post slider. If your theme does not include a slider it usually supports a Featured Posts area.

Activate Slider

To set up your post slider, go to Appearance → Customize → Theme Options → Post Slider.

Depending on the theme your are using the slider can be enabled on your blog / latest posts page or the Magazine Homepage template. It does not appear on static pages by default, unless you use the Slider page template.

activate-featured-post-slider

After you have activated the Post Slider some more settings should appear.

Select Slider Posts

Next, you have to configure which posts are highlighted in the post slideshow.

There are two ways to select slider posts. In our newer themes, you can select a category in the Slider Category setting. The slideshow will display all posts which are assigned to that category.

select-slider-category

For our older themes, you have to insert a featured tag. The slideshow will then display all posts which are tagged with the featured keyword.

featured-tag

Configure Slider

You can set the maximum number of posts, the slider animation effect and the slider speed in the following slider settings.

configure-slider-settings

Featured Images

The Post Slider uses the featured images of your posts for the slide images. The slideshow will look as intended when your posts have featured images.

If your existing posts have already had featured images, they may look disformed because they do not match the new required sizes. In order to fix that you have to regenerate your thumbnails.

Your uploaded featured images should be as big as possible. WordPress can then automatically crop them to the required size for the slider. You can find the image sizes used in the slider on the documentation page of your theme (at the bottom).

Featured Posts

Some of our themes support an extra area for Featured Posts. This tutorial shows how to use that feature.

List of Themes

At the moment the Featured Content area is supported in six of our themes:

  • Chronus
  • Gridbox
  • WorldStar
  • Glades
  • Momentous
  • Rubine

Please note: The rest of our themes support a post slider. Please see our Post Slider tutorial.

Activate Featured Posts

To set up featured posts, go to Appearance → Customize → Theme Options → Featured Posts.

Depending on the theme your are using, the Featured Content area can be enabled on your home page, blog index or Magazine Homepage template.

There are two ways to select featured posts. In our newer themes, you can select a category.

For our older themes, you have to insert a featured tag. The featured posts area will then display all posts which are tagged with the featured keyword.

Change Size of Featured Images

A lot of WordPress themes use featured images for certain theme elements like post thumbnails or image slideshows.

Default Image Sizes

Our themes usually define several image sizes for the featured images. WordPress will crop your uploaded image to all these sizes when you set a featured image. The theme will then use these different sized images on various locations in the theme.

For example: You upload and set a featured image of 1024 x 800 pixels. From that image WordPress generates a thumbnail image with 85 x 85 pixels for archive pages, a 160 x 160 pixel image for single posts and a 800 x 400 pixel image for the featured posts slideshow.

Change Default Image Sizes

You can change the default defined image sizes with the Simple Image Sizes plugin.

You can download the plugin on wordpress.org/plugins/simple-image-sizes or simply search for Simple Image Sizes on Plugins → Add new in your WordPress backend to install the plugin.

After you have installed and activated the plugin, you will find additional image size settings on Settings Media. They are added below the default Media settings of WordPress Core.

simple-image-sizes

Regenerate Images

WordPress does only generate the image in different sizes when you upload an image. Therefore you have to generate your existing featured images after you have changed any image size.

simple-image-sizes-regeneration

Related Tutorials

Regenerate Thumbnails & Image Sizes

WordPress saves your images in different sizes for usage on your website. However, the different sized images are only created when you upload a new image.

Therefore you have to regenerate your existing featured images for the current theme if you have switched themes or changed the image sizes. A simple way to do that is by using the Regenerate Thumbnails plugin.

You can download the plugin on wordpress.org/plugins/regenerate-thumbnails or simply search for Regenerate Thumbnails on Plugins → Add new in your WordPress backend to install the plugin.

After you have installed and activated the plugin, you can regenerate your thumbnails on Tools Regen. Thumbnails.

regenerate-thumbnails

Related Tutorials

Disable Comments

By default, comments are turned on for both static pages and blog posts. This tutorial explains how you can turn off comments for single posts and pages as well as turning comments off completely.

Deactivate comments for a single page or post

You can simply turn off comments for a single page or post in your WordPress backend. Therefore please go to Pages All Pages and hover over the page which should have no comments. There will appear some links undearneath the page title where you can click on Quick Edit.

deactivate-comments-1

You can then see a Allow Comments checkbox on the right where you can deactivate comments. This method works also for blog posts.

deactivate-comments-2

Remove comments for several pages or posts

If you want to turn off the comments on all your pages or posts you can tick every page/post and then select Edit in the Bulk Actions select field above the pages table. Click on Apply and select Do not allow on the Comments field. You can save the change on all your pages at once by clicking on Update.

deactivate-comments-3

Deactivate comments for new posts

Please be aware that WordPress will activate comments automatically for new created posts. You can turn off that feature on the discussion settings, which you can find on Settings Discussion in your WordPress backend.

Theme Translation

This tutorial shortly explains how you can translate a WordPress theme into your native language.

Table of Contents

Translation Basics

Our WordPress themes are localized using the GNU gettext framework and are translation-ready. It is the common way to translate WordPress core and every theme or plugin.

Every theme includes an extra language file with the file ending .pot which you can use to translate the theme. The .pot file is basically a list of all the text lines used in the theme files in English language.

Moreover a theme includes .po and .mo files. First are created from the .pot file and contain both the original language (= English) and all translated text strings from the translated language.

Therefore these files are named according to their language codes. (de_De.po, nl_NL.po or es_ES.po for example). The .mo files are just compiled exports from the .po files and used by WordPress itself to translate the theme.

Now the only thing you have to do is to create a new .po file from the .pot catalog file, translate all text strings and save the .po file with your language code. There are different ways to do this.

1st Method: Translate Themes with the Loco Translate Plugin

The easiest way to translate your theme is by using the Loco Translate WordPress plugin. After you have installed and activated the plugin, simply go to Loco Translate → Manage translations and translate the theme from your WordPress backend following the plugin instructions.

In case you’re an experienced computer user you may want to use Poedit to translate your theme (see below), which is more complex but faster.

2nd Method: Translate Themes using the Poedit Program

Poedit is a common program which you can use to translate the theme. It’s available for free on poedit.net.

After you have installed Poedit, you can open it and select File → New Catalog from POT file. Then select the .pot file from the theme you wish to translate which you can find in the /includes/lang/ or /languages/ folder of your theme.

Then go through every line of text and translate it to your native language. Afterwards you can save the catalog with your language code (for example es_ES.po). Normally Poedit automatically creates the .mo file and saves it, too.

The last step you have to do is to upload your created language files to the language folder of your theme using FTP.

3rd Method: Join the WordPress.org Translation

Proably the best way to translate a ThemeZee WordPress theme is to join the translation project on wordpress.org. You should translate the theme on wp.org if you want to improve the existing translation files already included with our themes. You only have to register or login to your wordpress.org account to start translating immediately.

The big benefit of the wp.org translation lies in the online collaboration part. You can see which parts of the theme have already be translated and contribute to the translation even if you only translate a few strings. Moreover you can control and enhance the translation of other users and don’t have to deal with translation files.

Translation Projects

Configure Site Language in WordPress Settings

WordPress will automatically use the right language files if they exist. You can set the site language of your WordPress installation on Settings → General. You can select your language at the bottom of the page:

site-language

Share your Language Files

In case you have already translated a theme or plugin a lot of users would be delighted if you share your translation files with the community. Just send them to support@themezee.com and we will include the translation files within the next update. Thank you so much for your contribution!