Lulu

A Responsive Minimalist WordPress Theme

Visit us at Siiimple


Created: 12/30/2011
By: Siiimple
Email: siiimple.themes@gmail.com




Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here.

A lot of careful work has gone into this theme creation and I'm very pleased you have decided to buy it! Thanks so much!


Table of Contents

  1. WordPress Installation
  2. Lulu Installation
  3. Lulu Options
  4. Lulu Setup Homepage & Blog
  5. Lulu Custom Post Types
  6. Lulu Menu Setup
  7. Lulu Video Embed
  8. Lulu Symbols & Shortcodes
  9. Lulu CSS Structure
  10. Lulu Script Sources

A) WordPress Installation - top

Luckily, WordPress is pretty easy to install. It's quick, easy, and painless. You can read all about it here: Installing WordPress.


B) Lulu Installation - top

The first thing to do after completing the WordPress installation is navigate to the "themes" directory within your WordPress files, then placing the "Lulu" theme folder into the themes directory. Alternatively, you can upload the theme through the admin area by navigating to Appearance > Themes > Install Themes > Upload. Just upload the zip Lulu theme file. *Make sure you upload the actual theme, not the original download folder that has the license, documentation, etc. within it. You will receive an error. Just upload the theme folder by itself :)


C) Lulu Options - top

Lulu has a variety of options to help setup your super cool site easily and with as little hassle as possible.


D) Lulu Setup Homepage & Blog & Gallery - top

Let's go step-by-step how to get Lulu setup.

  1. Go to Pages > Add New Pages
  2. Create New Page - Add Title (Doesn't matter what the title is because it will not show anywhere - but DO NOT call it "Home". Labeling a page Home will cause trouble...trust me...
  3. Go to Page Attributes (Right side of new page area), select "Home Theme Foundation".
  4. Create another new page - this one will be for your Blog.
  5. Write a title, but DO NOT CHOOSE PAGE TEMPLATE. Just create the page, and move on...
  6. Now we have two pages created. But we're not done :) Now, go to Settings > Reading.
  7. Choose "A static page". For the "Front page" choose the first page you created by using the Page Template "Home Theme Foundation". The name will appear with whatever you chose.
  8. For the "Posts page" choose the second page you created for your blog. Whatever name you chose, select it now.
  9. Follow the same step to create the blog page. For blog page, you will choose the Page Template named "Lulu Gallery". Once that is created, all the gallery posts you create in the Lulu Gallery custom post type will appear on this page.
  10. Now you have your homepage, your blog page, and your gallery page all created.
  11. The homepage will look fairly empty. No worries. Let's get started on creating each element to make it look like the demo...

E) Lulu Custom Post Types - top

  1. Lulu Slider
    • To add a new slide, simply use the Featured Image option in the New Slider Item area, upload an image, and save the new item. Adding content will show on the front page a brief excerpt.
  2. Lulu Info
    • Lulu info has a few different features worth noting. It will function the same as Lulu Slider, except you have the option of using shortcodes to display the symbols you see in the demo. For more information on these symbols you can checkout the demo page at: http://themes.siiimple.com/lulu/shortcodes-symbols. Here you will find exactly how to add these symbols. Alternatively, you can simply add a custom image by using the Featured Image uploader, just like you would for any normal image.
  3. Lulu Logos
    • To add a new slide, simply use the Featured Image option in the New Slider Item area, upload an image, and save the new item. Adding content will show on the front page a brief excerpt. You can choose to remove this set of images by going to Appearance > Lulu Options > General Options > then uncheck Show Logos At Bottom. This will remove that entire area. Finally, you can also link these images to pages. The meta box labeled "Add Page URL" will direct the link of this symbol to a page, not the permalink automatically created.
  4. Lulu Gallery
    • To add images to the gallery, you will do exactly the same as any other post with images. Use the Featured Image uploader. However, you have to create a new page first by selecting the Page Template "Lulu Gallery". This will set up the template page that will hold all your gallery posts. Pretty easy? Hope so! Something also to remember about the Lulu Gallery is that you can filter the posts. In order to do this, you will see a "Gallery Sorting" option within the Edit Gallery area. Simply create a new category, then select it. That will filter the image with the gallery page.


F) Lulu Menu Setup - top

  1. Go to Appearance > Menus
  2. Create New Menu
  3. Choose Theme Location (Top Left)
  4. Drag and Drop Menu Items into your menu area on the right.
  5. For dropdown menu to be activated, simply drag menu item beneath another menu item.

H) Lulu Video Embed - top

Embedding a video is super simple. You will see a meta box specially offered for videos.

IMPORTANT! - Be sure to use the proper url. In order to find this url, either in YouTube or Vimeo, you can find this in the embed options. Look for the url that is within the iframe src.


I) Lulu Symbols & Shortcodes - top

Lulu Shortcodes and Symbols can be viewed in the demo page. In addition, you can use the shortcodes insert tab found above the text area in the new post area. It looks like this:

It will automatically insert the shortcode within the text area. To see the shortcodes in action and listed go here: http://themes.siiimple.com/lulu/shortcodes. To see the symbols listed, go here: http://themes.siiimple.com/lulu/shortcodes-symbols

The symbols can be added by simply placing the shortcode within the metabox in the Lulu Info custom post type.


J) Lulu CSS Structure - top


K) Lulu Script Sources - top

  1. foundation.js
  2. html5.js
  3. elastislide.js
  4. isotope.js
  5. jquery.easing.js
  6. mousewheel.js
  7. superfish.js
  8. timthumb.php
  9. popover.js
  10. twipsy.js
  11. flexslider.js

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme.


Justin Young

Go To Table of Contents