(old) Hueman documentation, currently being updated

We're currently revamping the documentation of the Hueman theme.

Adapting existing content

If you are changing theme from another one and have plenty of existing content, menus and widgets on the website already, you need to do the following after having activated the new theme:

  1. Go to Appearance > Menus and add the menu areas back to where you want them. The menus will be hidden until you add links to them. This way you can choose how many menu areas to show on the website.
  2. Go to Appearance > Widgets and add the widgets back to your sidebars, or use some of the new custom widgets.
  3. Install the Regenerate Thumbnails plugin and activate it. Then go to Tools > Regenerate Thumbnails and run it once. This will crop existing thumbnails to the new sizes used in this theme.
  4. If you have not used the Featured Image feature in your other theme, you can use the Easy Add Thumbnail plugin to automatically set featured images for old articles.

Importing demo content

Note: For server bandwidth reasons, I can not supply the demo site data for this theme, although I want to. However you can download the WordPress sample theme test data XML from here.

This step is optional and for new WordPress sites without any content. If you don't want to import any extra pages and sample data to your site, you can skip to the next section. If you want a base similar to the demo site to work on and edit, then this is for you.

Important: If your site is not a fresh install with no content, but has existing content and pages on it already, it is important to remember that this file will add a lot of pages, posts, categories and tags (and media if you choose to import that) to your site, that you will have to edit or remove after importing.

Importing

  1. Go to Tools > Import in the WordPress menu
  2. Click on the WordPress link
  3. Install the plugin it asks for and activate, if you haven't already installed it.
  4. Now you should see a select file button on the Tools > Import > WordPress page.
  5. Upload the .XML data file. Choose if you want to import media or not (images).
  6. Wait for the import process to finish. When it's finished it will say so.
  7. Go to Appearance > Menus and add the menu areas to for example header.
  8. Go to Appearance > Widgets and add some widgets to your sidebars.

Your page should now look similar to the demo page. Refer to the Frontpage guide if you want to use a static page / non-blog home page.

Shortcodes

This theme comes bundled with a few simple shortcodes mainly for content structure. If you want to add additional shortcodes, there are many plugins out there to install.

Here is how to use them:

  • Divider Line 
    <code>[hr]
  • Highlight Text 
    <code>[highlight]My highlighted text[/highlight]
  • Dropcap (large first letter) 
    <code>[dropcap]A[/dropcap]nother dropcap here.

    Note: If you add the dropcap in the beginning of the article, it will disappear from the excerpt. To fix this, when editing the post, click Screen Options top right. Then enable Excerpt and you can write your own custom excerpt in the content box below the main text field.

  • Pullquote Left 
    <code>[pullquote-left]Pullquote text[/pullquote-left]
  • Pullquote Right 
    <code>[pullquote-right]Pullquote text[/pullquote-right]
  • Responsive Columns 
    <code>[column size="one-half"]...[/column]
[column size="one-half" last="true"]...[/column]

[column size="one-third"]...[/column]
[column size="one-third"]...[/column]
[column size="one-third" last="true"]...[/column]

[column size="two-third"]...[/column]
[column size="one-third" last="true"]...[/column]

[column size="one-fourth"]...[/column]
[column size="one-fourth"]...[/column]
[column size="one-fourth"]...[/column]
[column size="one-fourth" last="true"]...[/column]

[column size="three-fourth"]...[/column]
[column size="one-fourth" last="true"]...[/column]

[column size="one-fifth"]...[/column]
[column size="one-fifth"]...[/column]
[column size="one-fifth"]...[/column]
[column size="one-fifth"]...[/column]
[column size="one-fifth" last="true"]...[/column]

Post Formats

This theme makes use of all of WordPress' 10 post formats to give you plenty of ways to show content in the top section of your articles. You choose type by selecting format in the "Format" box on the right side when you edit or add a new post. Depending on which format you select, new options will appear below the large text field.

Here is how to use each one of the formats, and what each one does:

  • Standard - This is the default option. It will not automatically include a featured image at the top of the post, like the image format does. It's simply a standard post that shows article text.
  • Audio - Shows an audio player at the top of your post, as well as the featured image. Two audio URL fields will appear once selected. Both audio formats are required for cross-browser compatibility.
  • Aside - Hides the entry title of the article
  • Chat - Shows a chat conversation box at the top of the article. A textarea field to paste the chat conversation in will appear once selected.
  • Gallery - Shows all images attached to the post as a slider at the top of the article. More details how to use will appear below once selected.

    Note: If you want to show an image in the article below the slider, but still not include it in the slider, you need to go to Media > Add New and upload it there. Then go back to the post and insert it. Make sure it's not attached to the post.

  • Image - Same as Standard format except that it auto-includes the featured image at the top of the article.
  • Link - Shows a big link at the top of the article. Link title and link URL fields will appear once selected.
  • Quote - Shows a big quote box at the top of the article. Fields for the quote text and quote author will appear once selected.
  • Status - Hides the entry title and transforms the entry text into a large status-type style.
  • Video - Shows an embed video at the top of the article. Fields for link embed or code embed will appear once selected.

    You can show self-hosted videos in this field, although it's not intentionally supported, by using HTML5-video tags in the Embed Code field.

    HTML5 video sample code: 

    <code>&#60;video width="320" height="240" controls="controls">
&#60;source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.webm" type='video/webm; codecs="vp8, vorbis"' />
&#60;source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
&#60;source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.ogv" type='video/ogg; codecs="theora, vorbis"' />
Your browser does not support the video tag.
&#60;/video>

Additional Information

Extra information that you may find useful.

Font Awesome (icon) issues?

If you have trouble with Font Awesome showing strange characters instead of icons, you are most likely using a CDN or external host in some way for the font files. Certain browsers may have issues with that, as they follow certain web standards. (Also make sure that your font files were uploaded correctly, and empty caches)

This can be fixed with for example this sample .htaccess file from MaxCDN. If you wish to read more about this, it relates to CORS headers.

Wrong Facebook and Google+ thumbnails?

If your shared posts show wrong thumbnails on social networks, see the Facebook Thumb Fixer plugin below.

Useful plugins

Many common problems or missing features can usually be solved with plugins. Here is a list of some great ones.

Recommended theme editing software

  • Firefox - The web browser of choice for me, although there are many good ones
  • Firebug - Inspect code directly in the web browser. Lite version for Chrome here. Search on YouTube for video tutorials and you will quickly learn how to use it.
  • PoEdit - Translate your theme. Read how to translate here.
  • Notepad++ - A great text editor to modify theme code
  • FileZilla - Modify or upload theme files via FTP

Link Resources

Learn more and ask about WordPress' standard features. WordPress is in itself an extremely well-documented open platform. It is recommended to search for answers via Google / DuckDuckGo first if you have questions – it almost always give useful information or at least point you in the right direction.

Troubleshooting

Do you have a problem with your theme? This quick troubleshooting guide should be the first thing to check through - it will help you find the root cause of the issue.

A WordPress website issue can come from mainly one of 4 areas:

  • Conflicting plugins
  • Broken WordPress install
  • Incorrect server setup
  • The theme itself

Lets find out where your issue is coming from!

Step 1: Check your plugins

The first thing to do is to see if you have any plugins installed. Do you? If so, go to your admin panel and disable all of them. Now, go back to your site and see if the issue remains. If the problem is gone, then re-activate your plugins one-by-one and check the site between each activation. This way you will directly find the plugin(s) that cause problems.

If your issue remains even with all plugins disabled, go on to the next step.

Step 2: Check your customizations

Have you customized your theme in any way before you noticed the issue? If so, go to the theme demo website of the theme and see if you find the same issue there. If you can not see the issue there, you need to take a look at your customized code and find what may be wrong.

Step 3: Is the issue admin panel related?

If you have problems with media uploads, errors in the WordPress dashboard or other access issues, the likely cause is either an incorrectly setup server or a broken WordPress install.

To see if your problem is related to a broken WordPress install or an incorrect server setup, simply activate a WordPress default theme such as Twenty Twelve. Does the issue remain? Then your issue is not theme related. If the issue goes away with a default theme active, then it's most likely theme related.

  • Do you think your issue is WordPress related? Re-installing WordPress may be a good idea, or asking for help on the wordpress.org forums.
  • Do you think your issue is server related? Try some Google-searching for the issue, or contact your server provider about it.
  • Do you think the issue is coming from the theme? Make sure to read this documentation through. If the issue remains and you are certain it's coming from the theme, feel free to report the bug on the wordpress.org support forums for hueman.

Note: Remember cache!

If you apply/repair code to fix issues but see no changes on your website when you save it, check if your website has any cache plugin activated. If so, make sure to empty all caches. Also force-refresh the page when viewing it by pressing F5.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.