Hueman: the next generation has arrived!

Hypotheses offers its users access to the graphic themes developed by WordPress teams in priority, to insure greater durability, consistency and long-term flexibility for the platform. Find all the graphic themes available in the “Appearance” category of the House of blogs.

The Hueman graphic theme is not developed by WordPress teams, and has been added on Hypotheses to provide a quality replacement for an obsolete graphic theme that has since been removed from the platform, Magazine Basic. Hueman features many customization options, more advanced than those of the graphic themes developed by WordPress teams. It is also the theme that, on Hypotheses, most closely resembles the magazine format.

Article summary:

A special header

One of the main graphic differences between Hueman and the other graphic themes available on Hypotheses is in the header area of the blog.

It can contain:

  • A logo, from Appearance > Customize > Web Page Design > Site identity. Check “Display a logo in the header” and select a logo below (recommended size: 250 x 100 pixels). Note: the presence of a logo disables the display of the blog title;
  • A header image from Appearance > Customize > Header Design > Header image. Check “Use a header banner image” and select an image below (recommended size: 1380 x 280 pixels,.jpg format and 72 DPI resolution). Several images can be loaded and randomly changed if you click on “Randomize uploaded headers”. You can choose to check “Display your logo or site title, and tagline on top of the header image” to keep these elements in the header of your blog in addition to the header image;
  • A widget in the header, from Appearance > Customize > Header Design > Header Advertisement Widget. Check “Display a widget in your header” and specify whether you want this widget to be displayed on a computer, mobile, or both. Then in Appearance > Customize > Dynamic Sidebars and Widgets > Header (next to the logo / title), click on “Add a widget” to select the one you want to add to the area.
Header Advertisement Widget customization with Hueman

The color and font of your blog’s subtitle (“tagline” field in Settings > General) cannot be customized with the Hueman theme. If you want to use a header image in light tones where the white subtitle would not appear with enough contrast to be readable, you may need to choose a header image that integrates the title and subtitle into the image, then disable the display of these titles and subtitle by unchecking “Display your logo or site title, and tagline on top of the header image” in Customizing > Web Page Design Site Identity : Logo, Title, Tagline and Site Icon.

Featured posts

Homepage of a blog with Hueman and a presentation in a single column

The Hueman graphic theme emphasizes the featured images, which are by default associated with the tickets and displayed on the homepage or even as a slideshow by default (see below).

The featured images are different from the illustrations incorporated in the body of an article. They are the images selected in the “Featured Image” area in the right column of the editing interface of an article. You have the choice between uploading a new image file from your computer or choosing an image already present in the media library of your blog (recommended size: 720 x 340 pixels,.jpg format and 72 DPI resolution).

Like the “Read more…” marker, which is recommended to be included in each of your articles, keep in mind that assigning featured images to your articles is also a very good practice, which we advise you to put in place. This will save you the sometimes tedious work, if you decide to change the graphic theme and opt for a theme that strongly exploits the featured images (as is the case for Hueman).

A little clarification: the fact of defining a featured image does not, of course, prevent you from including as many images as you wish in your article to illustrate it.

Your articles as a carousel on the homepage

Customizing a carousel on the homepage with Hueman

One of the highlights of the Hueman graphic theme is the ability to display a carousel of articles on the homepage. This feature is activated in Appearance > Customize > Front Page Content, by checking “Feature posts on top of your blog”. More options then appear, including:

  • The slideshow displays a configurable number of articles in “Featured posts” ;
  • Automatically featured articles are the last posts published in a category that you determine in “Select a category to feature”. For example, you can create a category specifically for this feature (called “Featured” in the example) from Articles > Categories ;
  • So that the articles automatically pass through as a slideshow, you must click on “Animate your featured posts with a slideshow” and choose a speed (5000 is a reasonable speed). Note: clicking on the carousel’s scrolling arrows pauses it.

In order to ensure that the images are displayed optimally in carousel mode (and if you use the default settings for the width of your blog), we recommend that you use featured images with a size equal to 720 x 340 pixels on your notes. If you use smaller images, they will be enlarged and therefore pixelated. If you use larger images, the corresponding files will be unnecessarily large and will slow down the display of your blog for your readers. Try to respect this homothety as Hueman will crop your images to 720 x 340 pixels no matter what.

Two columns for your articles

Two-column presentation of the homepage of a blog in Hueman

In a magazine spirit, Hueman offers by default a two-column presentation of the articles excerpts, in the form of thumbnails, on the homepage and when browsing by category. The rectangular thumbnails of the featured images associated with the articles have a size of 520 x 245 pixels. If you use the featured carousel, however, plan to use 720 x 340 pixel featured images.

If you prefer a more classic layout, in a single column (as in our Anthology blog), you can check the box “Display your blog posts as a standard list” in Appearance > Customize > Front page content. The featured images will then be placed to the left of each article excerpt in the form of 320 x 320 pixel square thumbnails. If you use the featured carousel, however, plan to use 720 x 340 pixel featured images.

Always use a.jpg format and a resolution of 72 DPI for lighter images.

Optimal browsing

Navigation between articles

Hueman offers two interesting features, allowing your readers to navigate between your articles.

In Appearance > Customize > Main body design > Single post settings, you can choose to automatically display links to similar articles at the bottom of the articles pages. Similarity can be defined by the same category, or the same keywords/tags. Keep in mind, however, that these suggestions are random, whether they are made on the basis of categories or keywords.

Similar articles suggestions 

You can also choose, still in Appearance > Customize > Main Body design > Single posts settings, to display on the articles a navigational link to the previous and following articles, under the content or in the widget sidebars if they are enabled.

Three different menu locations

Hueman has another useful feature that makes for a simple and enjoyable browsing experience. This is the option of including three separate menus where you can arrange your articles categories or pages however you wish. You can also include links to external websites and resources.

As with all themes on Hypotheses, the menu settings can be found by going to Appearance > Menus:

If you have already created one or several menus for your blog and are migrating to Hueman, your menus will remain unchanged but you will have to decide where to position them in the Hueman theme:

  • Putting your menu in “Topbar” (1) will position it just above your blog’s header and below the OpenEdition bar. This menu location offers a search function on your notebook (by clicking on the magnifying glass on the right of the menu bar) and has the advantage of allowing the menu you choose to always remain on the screen when you scroll down your page. Your readers will always have access to this menu, even if they read the oldest articles on your homepage. Further settings for this menu can be found in Appearance > Customize > Header Design > Header Menus.
  • The “Header” position (2) will place your menu below your header and above your slideshow or list of articles.
  • Finally, the “Footer” position (3) will display your menu above the footer of your blog.

There is also a “Mobile” menu location whose description is sufficient in itself: “You can define a specific menu for mobile devices. If not defined, the theme will use the menu assigned to the topbar or header.”

Choosing where to put your widgets: the agony of choice

Hueman offers three widget locations: two adjustable toggle bars next to the main post section and a footer zone (which can contain up to four widget columns).

Hueman offers three distinct areas in which you can insert widgets: two side columns to be positioned at your convenience, on either side of the central column where the articles are displayed, as well as a footer area, which can itself accommodate up to four widget columns.

Each widget area can be activated independently of the others on the entire blog or on each particular page type.

  • To manage widget areas, go to Appearance > Customize > Dynamic Sidebars and Widgets > Create and manage widget zones.
  • In Appearance > Customize > Main Body Design > Column Layout for the Main Content, you can determine the position of the widget side columns on each page type (one or two columns, which sides these columns are placed on).

Here are the different types of pages:

  • Home: home page ;
  • Single: the widget columns you associate with this location will be visible on an article page;
  • Archive: the widget columns associated with this location will be displayed when your readers search for articles by publication date in your blog;
  • Archive – Category: the name of this section may be misleading. This is about selecting columns of widgets that will be visible when you display a particular category of articles;
  • Search: this is the page displaying the results of the searches performed on your blog;
  • Error404: this layout is for all the pages that would return an error on your blog. For example, if you post a link that is found to be incorrect, users will come across a page displaying an error. It may then be convenient to configure the widget columns on this page to provide the users in question with useful information to help them navigate through your blog and find the content they were initially looking for;
  • Default page: The widget columns associated with this location will appear everywhere in your blog, except for the above locations, if you have assigned specific widget columns to them.

In addition to these general settings, you can also select one or two widget columns for each article and define a specific layout via the “Post Options” area below the editing area of each article.

You will notice that whatever widget columns you use, they will always have the “Follow” and “More” headings by default.

Next to “Follow”, you have the possibility to display icons that send your readers to your social medias. You can configure this from Appearance > Customize > Web Page Design > Social links.

If you do not want these headers to be displayed on your widget columns, uncheck “Sidebar Top Boxes” in Appearance > Customize > Main body design > Sidebars.

Once you have set up your different widget areas, it is time to choose the widgets you want to display. To do this, simply go to the Appearance > Widgets menu, as with any graphic theme. On the left, you will find all the widgets available, which you can drag to the different locations visible on the right. These locations correspond to your different widget columns and widget areas of your footer.

A few new widgets

The Hueman graphic theme includes some specific widgets that you can find in Appearance > Widgets with other widgets that are not specific to a graphic theme.

“Hueman Posts”

It allows your readers to see, at a glance, some of the articles published in your blog. You can assign a title to it, choose whether or not to display the featured images of the articles (“Show thumbnails”.), the number of articles to be shown (“Items to show”), and define, via the “Category” drop-down menu, whether you want these articles to belong to a specific category or if you prefer to display those published in your blog, without distinction (by choosing “All”). The “Order by” menu allows you to define if you want the articles to be displayed according to their publication date, the number of comments associated with them or randomly. The “Posts from” menu allows you to choose whether the articles must have been published within a given period of time. Finally, you can display or not the information relating to the categories and the date of publication of your articles, by checking or unchecking the “Show categories” and “Show dates” boxes.

“Hueman Videos”

It offers the possibility to very easily display a video on your blog, by entering either its URL1. Innovative at the time this widget was implemented by Hueman’s developers, it now doubles with the WordPress native “Videos” widget.

“Hueman Dynamic Tabs”

It consists of one to four tabs:

  • The “Recent Posts” tab allows you to display the most recent articles published on your blog. By checking the “Show thumbnails” box, you will also display the featured image associated with each article, if applicable. You can choose the number of articles to display by filling in the “Items to show” field. The “Category” drop-down menu allows you to choose whether the articles displayed will be the last articles published on the blog, all categories combined (by choosing “All”), or whether you prefer to display the articles associated with a given category. Checking or unchecking the “Enable recent posts” box allows you to show or hide this tab of the widget
  • The “Most Popular” tab allows you to display the most “popular” articles on your blog. This selection is made on the basis of the number of comments associated with each article. The settings on this tab are similar to those on the “Recent Posts” tab. You can also show or hide this tab by checking or unchecking the “Enable most popular posts” box
  • The “Recent Comments” tab, which you can also hide by unchecking the “Enable recent comments” box, shows the most recent comments on your blog. You can display or not the profile image of the authors of these comments by checking or unchecking the “Show avatars” box. You can also choose the number of comments to display via the “Items to show” field
  • The last tab, “Tag”, displays the tags associated with the different articles published on your blog. You can hide this tab by unchecking the “Enable tags” box

The “Tab Order” section allows you to re-order the four tabs by assigning them a number between 1 and 4, the one numbered 1 being the one that will be displayed first.

Finally, the “Tab Infos” section allows you to authorize or not the display of the categories and publication dates of the articles contained in the “Recent Posts” and “Most Popular” tabs.

For complete and up-to-date documentation about Hueman, we invite you to consult the official website of the developer of this graphic theme. However, be careful: some of the configuration options mentioned in this documentation concern items that we have deliberately chosen not to deploy on Hypotheses and that you will not find on your blog.

Featured image: Responsive Web Design by Jeremy Keith (licence: Creative Commons by)

This post is a translation of this one, by Helen Tomlinson.

See you soon on Hypotheses!

  1. so this video must already be stored online. To do this, we invite you to use a third party hosting provider, the capacity offered by Hypotheses for this type of media being very limited []

François Pacaud

Responsable du service blogging scientifique / Head of science blogging department (Cléo/OpenEdition)

More Posts

Follow Me:
TwitterFacebookLinkedInFlickr

2 thoughts on “Hueman: the next generation has arrived!”

Comments are closed.