getButterfly Logo getButterfly code wrangling since 2005

Noir UI Documentation

Noir UI is a dark theme, built on top of CSS3 UI Kit framework and ImagePress.


Noir UI requires ImagePress 6+ and WordPress 4.5+ in order to function as intended. I recommend the latest version of ImagePress and WordPress. In addition to this, PHP 5.5+ is required for certain functions and modules. Check with your host before attempting to install Noir UI.

  1. Upload the theme using the theme uploader or by using FTP to your /wp-content/themes/. The theme should look like this: /wp-content/themes/noir-ui/.
  2. Activate the theme.
  3. Create a new page and assign the Homepage template (see figure 1).
  4. Set up the newly created page as a static frontpage from Settings -> Reading.
Noir UI - Homepage Template
Figure 1 – Noir UI – Homepage Template

The theme is now installed and ready to use.


The theme can be customized from Appearance -> Customize tab.

You can customize colours, add a nice, discreet background overlay texture and display a mosaic of news on homepage. You can also select the main section links.

Noir UI - Homepage Settings
Figure 2 – Noir UI – Homepage Settings


Noir UI comes with several useful element shortcodes such as carousels, images, boxes columns and icons.

[noir-boilerplate] – this shortcode displays the site title and description. The format it uses is “Welcome to SITE TITLE + DESCRIPTION”. The “Welcome to” text can be removed by using:

[noir-boilerplate welcome=""]

[noir-hero] – this shortcode displays a hero featured image from a chosen category with title and a short description. It uses the latest post type from the selected category:

[noir-hero type="post" category="my-category-name"]

[noir-carousel] – this shortcode displays a carousel with three visible images and three sections. The number of categories should be three and the number of posts should be higher than three:

[noir-carousel categories="fiction, books, short-stories" count="9"]

[noir-box] – this shortcode displays various width boxes and columns. The shortcode uses several parameters:

[noir-box size="one_fourth" color="#03A9F4"]one_fourth[/noir-box]
[noir-box size="one_fourth" color="#8BC34A"]one_fourth[/noir-box]
[noir-box size="one_half_last" color="#FF5722"]one_half_last[/noir-box]

All parameters are optional. All sizes should fill the row (one half and one half or one half and two fourths – takes a bit of math):

sizeone_half, one_third, two_third, three_fourth, one_fourth, one_fifth, two_fifth, three_fifth, four_fifth, one_sixth, five_sixthone_half_last, one_third_last, two_third_last, three_fourth_last, one_fourth_last, one_fifth_last, two_fifth_last, three_fifth_last, four_fifth_last, one_sixth_last, five_sixth_last, full

color (box background color): #03A9F4#8BC34A#FF5722

float (box float position): left, right

align (box position – non-float): left, center, right

text (box text alignment): left, center, right

[icon] – this shortcode displays a FontAwesome icon. Check out some examples below:

[icon type="tags"]
[icon type="wrench" size="3x" pull="left"]
[icon type="camera-retro" size="4x"]
[icon type="cog" animated="spin"]

Homepage Setup

Note: When upgrading from version 4.x to version 5.x, you will need to move the page-home.php content to a widget (“Homepage widget (main, content)“). Check out my sample code below and replace it as required.
<h1 class="homepage-header"><small><i class="fa fa-upload"></i></small> Recent Submissions</h1>
[imagepress-show limit="14" count="14" size="imagepress_sq_std" sort="no"]
<h4><p class="right"><a href="">Browse all uploads</a> <i class="fa fa-arrow-circle-right"></i></p></h4>

<h1 class="homepage-header"><small><i class="fa fa-folder"></i></small> Collections</h1>
[imagepress-collections count="4"]
<h4><p class="right"><a href="">Browse all collections</a> <i class="fa fa-arrow-circle-right"></i></p></h4>

<h1 class="homepage-header"><small><i class="fa fa-star yellow"></i></small> Favourites</h1>
[imagepress-show category="featured" limit="14" count="14" type="random" size="imagepress_sq_std" sort="no"]
<h4><p class="right"><a href="">Browse all favourites</a> <i class="fa fa-arrow-circle-right"></i></p></h4>

Note the image size parameter – size="imagepress_sq_std" – and remove it if you want to use the global size set in ImagePress -> Configurator.