WordPress Theme Documentation

Darkwhite WordPress Theme

February 20, 2013

Informations about updates and new themes are always announced on Google+, Facebook and Twitter.

Follow Ruven on Google+
Add Ruven on Facebook
Follow Ruven on Twitter

Thank you for purchasing my theme!

This documentation will teach you how to use the Darkwhite WordPress Theme.
I provide pretty extensive help in this file, but this doesn’t mean the theme is hard to use. I just want to cover every question that might occur. I also guide you from the installation process through theme specific functions to filling your pages with content.

If questions occur that are not covered by this help file, feel free to ask your question in the comment section of this item.

Have fun with your new theme!

Best regards,

Table of Contents

  1. Theme Installation
  2. Demo Content Import
  3. Adding Content
    1. Custom Menu
    2. Pages, Posts, and Portfolio Items
    3. Post Formats
    4. Page Header
    5. Disable Comments for Posts or Pages
  4. Extending the Theme with Plugins
    1. Ruven Toolkit
    2. Contact Form 7
  5. Theme Settings & Customizer
  6. Modifying the Theme with a Child Theme
  7. Translating the Theme
  8. Updating the Theme
    1. Automatic Updates
    2. Manual Updates
  9. Default Image Sizes
  10. HiDPI/Retina Support
  11. Customer Support

A) Theme Installation - top

  1. Unzip the package you've downloaded from ThemeForest.
  2. Log in to your WordPress admin panel.
  3. Go to Apparance → Theme and click the tab called Install Themes (on top of the page).
  4. Now click the Upload link and click the button Choose File.
  5. In the dialog window, navigate to the folder that you just unzipped and double click the file Darkwhite.zip.
  6. Now click on Install Now.
  7. Wait till you see the message Theme installed successfully.
  8. Click the Activate link and you'll find yourself in the theme settings - it's done!

If you are new to WordPress and haven't installed it yet, I recommend to read the official WordPress installation instructions.
If you should have trouble with the theme installation, I recommend to read the official WordPress Theme installation instructions.

Now we can start to fill your site with content and then set up some options for the theme.

B) Demo Content Import - top

Notice: If you plan to have a portfolio page and want demo content inserted for it as well, please install the plugin Ruven Toolkit before you import the demo content.

In the unzipped folder of the file you've got from ThemeForest, you'll find another folder called Demo Content. In there you'll find the file demo-content.xml. Here are the steps to import this file into WordPress, so you can have an easier start:

  1. Log in to your WordPress admin panel.
  2. Go to Tools → Import.
  3. Click the link that reads WordPress in the tables last row.
  4. (If the plugin WordPress Importer isn't installed yet, please install it now.)
  5. On the next screen with the title Import WordPress, click the button Choose File.
  6. In the dialog window, navigate to the unzipped theme folder and then into the folder Demo Content, where you double click the file demo-content.xml.
  7. Now click the button Upload file and import.
  8. On the next screen I recommend to assign the imported posts to an existing user (with the select menu) and to activate the checkbox called Download and import file attachments.
  9. Hit Submit and wait till you get an All done message (it can take a couple of minutes)

C) Adding Content - top

1) Custom Menu

Notice: If you've never worked with the Menu Manager before, I recommend reading the WordPress Codex Page about Menus.

I highly recommend to create a custom menu for the main navigation, because else, WordPress will automatically add every new page that you create to the main navigation and it can easily "overflow".

To create a custom menu, do the following steps:

  1. Go to Appearance → Menus.
  2. Enter a menu name (e.g. "Main") and hit Create Menu.
  3. In the panel Theme Locations under Main Menu, select your newly created menu (e.g. "Main") and hit Save.
  4. Now you can start adding menu items from the panels on the left side of the screen.
  5. Hit Save Menu when you're done adding items.

As you might have noticed, there is one more location in the panel Theme Locations called Footer. By clicking the + tab you can add more custom menus and add one of them to this location.

2) Posts, Pages, and Portfolio Items

Posts, Pages, and Portfolio Items (can be added with the plugin Ruven Toolkit) almost work the same way, but there are some exceptions that I want to point out.

Portfolio Items

3) Post Formats

Standard Post Format

By default all portfolio items are in the Standard format. This means a post will display a title, meta information (date, author, etc.), a featured image (if set), the posts content, and a comment/pingback section on a selected post.
The other here described Post Formats differ in appearance.

Gallery Post Format

After you select the Gallery format, you'll see the panel Gallery Settings popping up below the content editor. The images added to the gallery will appear in a slider instead of the featured image.

Do the following to add gallery images:

  1. Click the Upload File button.
  2. Select or drop some files into the media library window that pops up.
  3. Click Save Changes.
  4. Now you should see the uploaded images in the Gallery Tab.
  5. Just close the window with the X button on the top right.
  6. After you publish, update or save the post, you'll see a list of the uploaded images in the Gallery Settings panel.

Now, when you open the post on your website, you'll be able to click through all the uploaded images in a slider.

Video Post Format

After you select the Video format, you'll see the panel Video Settings popping up below the content editor.

To add a self-hosted video, you need a M4V file and an OGV file. Paste the URL to these files into the matching fields.
You can also use the Upload File button to upload the videos to your WordPress installation, but note that there is a certain file size limit that you first have to raise in your server settings. The best method is to use an FTP client to upload them.
Please add a featured image to use it as poster for the self-hosted video.

To add an embedded video (e.g. from YouTube or Vimeo), you don't need to fill out the M4V and OGV URL fields. Just paste the "Embed Code" into the Embed Code field.

Audio Post Format

After you select the Audio format, you'll see the panel Audio Settings popping up below the content editor.

To add a self hosted audio file, you need an MP3 file and an OGA/OGG file. Paste the URL to these files into the matching fields or upload them to your media library by clicking the Upload File button.

Add a featured image to use it as poster for the audio player.

Other Post Formats

The Aside post format is similar to a Facebook note update. Only your text will be displayed. No featured image, title or meta infos.

When you write a post in the Quote post format, you'll see a panel pop up that let's you enter the quote itself and an optional source.

When you write a post in the Link post format, you'll see a panel pop up that let's you enter the links URL. The posts title will be used as link title.

The Image post format will display only your featured image in the blog overview. That's perfect for posting a photo.

4) Page Header

For each page you can set an individual page header with a description text. You'll find the panel to do this below the content editor when you edit a page. If you set no page header, the default text, which can be defined in the Theme Customizer, will kick in.

Category archives will use the category description as text, Tag archives the tag description, and Author archives the user bio.

5) Disable Comments for Posts or Pages

To disable comments for all new posts and pages, go to Settings → Discussion and uncheck the box Allow people to post comments on new articles. Please note that this only disables comments for new posts and pages. The ones you already have need to be disabled manually.
To do this, please follow these steps:

  1. Go to edit the post or page you want to disable the comment on
  2. On the top right of your window you'll see a little tab called Screen Options that you click
  3. In the roll-down area, check the box Discussion if it is not already checked
  4. Now scroll down and you should see a panel called Discussion below the other panels
  5. In this panel uncheck the box Allow comments and you're done!

D) Extending the Theme with Plugins - top

1) Ruven Toolkit

I created the plugin Ruven Toolkit to extend the functionality of my themes. The plugin adds a Portfolio post type, custom widgets, and shortcodes which are editable via shortcode editor.

If you need instructions on how to use the plugin, please read the FAQ and Screenshot section on the plugin page.

2) Contact Form 7

If you need a contact form on your website, I recommend the free plugin Contact Form 7.

After installing and activating the plugin, go to Contact in your admin panel and create or pick a form to edit it. If you want the form to look like in the themes demo, insert this markup.

E) Theme Settings & Customizer - top

To edit the theme settings you have to enter the Theme Customizer. You'll find it linked in Appearance → Themes below the item description of the activated theme or in the admin bar, when you're looking at your site, and hover over the site title.

The customizer offers many layout settings, the option to change the default site headlines, an uploader for an image logo and a favicon, and many more things.

F) Modifying the Theme with a Child Theme - top

Over are the dark days where you had to modify a themes code directly to make some changes, but then weren't able to update it anymore.
Darkwhite is a robust parent theme, so if you want to change functions, classes or template files, all you have to do is to create a child theme and overwrite the already existing function. This way the original theme stays untouched and you can perform updates without worrying that your code gets lost. I also created a child theme skeleton to make the process even easier for you:

Just upload the ZIP file that is in the theme package folder Child Theme Skeleton the same way as it is stated in the section Theme Installation. After you activate your child theme, you will be able to operate inside this theme and all changes will be applied to Darkwhite.

Notice: If you've never worked with child themes before, I recommend reading the WordPress Codex page about child themes. Turst me, it's easy to learn and well worth the effort :)

G) Translating the Theme - top

Darkwhite is completely translation ready. In the theme files you'll find a folder called languages. This is where your translation files go. German is already included, but by default the theme speaks english.

Here are the steps to create a translation file for another language:

  1. Download a gettext file editor like poedit and install it.
  2. Open Poedit and select File → New Catalog from POT file....
  3. In the dialog window, navigate to your theme files into the folder languages and double click the file darkwhite.pot.
  4. On the next window that pops up you can give your catalog a name and a version (e.g. "Darkwhite Swedish 1.0"), select a language, a country and two charsets (should be set to UTF-8).
  5. After you hit OK, Poedit will open a new save dialog window and you should save you new translation file into the languages folder and name it after the appropriate country code (e.g. "de_DE.po").
  6. Now you can start translating.
  7. Hit Save when you're done.

Notice: If you're not sure what country code to use, you can also check it in the file wp-config.php in the WordPress root directory. Just open the file and search for the line define('WPLANG', ''); (should be around line 72). By default (if nothing is set) the country code is en_US, but you can also set it manually, e.g. to define('WPLANG', 'de_DE');. This would, of course invoke the file de_DE.po.

If you have WordPress already installed in the language you've translated your theme to, the translation should kick right in. If it doesn't, make sure to install WordPress in the right language or change the WordPress language manually (as described in the notice box above).

H) Updating the Theme - top

There are two ways to update the theme. You can either the use the Envato WordPress Toolkit plugin and update Darkwhite (and all other ThemeForest themes) through WordPress' admin panel, or you can do it manually by using an FTP client.

Here I describe both ways:

1) Automatic Updates

  1. Download the Envato WordPress Toolkit plugin.
  2. Upload the envato-wordpress-toolkit folder to the /wp-content/plugins/ directory on your server.
  3. Activate the plugin through the Plugins menu in WordPress.
  4. To establish a ThemeForest API connection, navigate to the Envato Toolkit page and insert your ThemeForest username and secret API key in the designated input fields. To obtain your API Key, visit your My Settings page on ThemeForest.
  5. After clicking Save Settings, you should see all ThemeForest themes you have installed. If an update is available, you'll see a message below the theme and you can click on update automatically.

2) Manual Updates

A manual update requires you to re-download and re-install the theme on your WordPress installation. But don't worry. None of your theme settings will get lost (they are stored in the database and not in the theme files).

To get notified about updates, you should add me on your social networks:

Please follow these steps to update the theme:

  1. Re-download the theme package from ThemeForest in My Account → Downloads (here you can also rate the theme).
  2. Log in to your WordPress admin panel.
  3. Go to Apparance → Theme and deactivate the current Darkwhite theme by temporarily activating the default theme Twenty Eleven.
  4. Under Available Themes, on the deactivated Darkwhite theme, click on Delete to remove it.
  5. To upload the new version of the theme, just follow the installation instructions from above.

Notice: If you have ever modified any theme files directly, I assume you have a local copy of them on your computer. If you don't, please login to your WordPress installation via FTP and backup the old theme files, before you remove them from the server. Please note that these modifications will be lost after the update. Child Themes are the right choice to modify theme files without losing the code after an update (you can read about them here).

I) Default Image Sizes - top

The theme resizes images by itself when you upload them into the Media Library. Just make sure that the images you upload are at least 728 pixel wide.

J) HiDPI/Retina Support - top

To support HiDPI/Retina displays, I recommend to use the WP Retina 2x plugin.

Here is how you use it:

  1. After you activate the plugin, go to Settings → WP Retina 2x.
  2. In the Basics tab check the box Generate Retina images automatically when images are uploaded to the Media Library.
  3. I recommend to switch to the Advanced tab and select Server-side Retina-Images as Method.

Notice: All images you upload need to have at least the double amount of pixels that is described in the Default Image Sizes section. You can check if the images are big enough by going to Media → Retina 2x. The columns content, portfolio-small, portfolio-big, portfolio-small-cropped and portfolio-big-cropped need to show a green check mark.

K) Customer Support - top

If you have any further questions, please use the comment section of this item on ThemeForest. This way other users can benefit from the solution as well. I will try my best to answer every question.

If you're satisfied with the theme and want to show it, you are welcome to log in to your ThemeForest account and rate the theme. You can do this under My Account → Downloads. Just hover over the 5th star and click ;p

Again, thank you very much for purchasing this theme! I wish you all the best for the website that will grow out of it. If you want, you can post the URL of your final website in the comment section of this item on ThemeForest. I would really like to see how this theme takes its place in the world wide web :)

Best regards,

Go To Table of Contents