Go to Themes Kingdom Documentation home →

Dreamy

Installing WordPress

WordPress is well-known for its ease of installation. Under most circumstances, installing WordPress is a very simple process and takes less then five minutes to complete. Many web hosts now offer tools to automatically install WordPress for you. However, we strongly recommend that you install WordPress yourself, the following guide will help http://codex.wordpress.org/Installing_WordPress.

 

Theme Installation

Theme can be installed in two different ways:

  • Installing through WordPress
  • The Traditional installation using FTP client

Installing through WordPress

Installing a theme through WordPress is quite easy and it will take only few minutes of your time. First thing you need to do is to access your wordpress admin panel, after you’re done with that navigate to Appearance / Themes. Click on the Install Themes tab and then Upload from the navigational bar right below it. After that, go to the Choose File button, find dreamy.zip and click Install Now. Dreamy theme is now successfully installed, all you have to do now is to activate it.

 

Very important note if you bought the theme from Themeforest: Please do not upload the whole file you downloaded, make sure that you locate dreamy.zip file inside the main file you have downloaded.

The Traditional installation using FTP client

First things first, you will need an FTP client (example FileZilla which is free, easy to use and it works on Windows, Mac and Linux) to access your web host server. Now that you have access to your wordpress installation files simply transfer your unzipped theme to your server in the ..wp-content/themes/. The only thing left to do after that is activating the theme, to do that go to your wordpress admin panel and navigate to Appearance / Themes, search for Dreamy and click “Activate” right below it.

Very important note if you bought the theme from Themeforest: Please do not transfer the whole file you downloaded, make sure that you locate dreamy.zip file inside the main file you have downloaded.

For more detailed explanation on how to install themes, visit this link.

 

First Steps

There are several things you have to do in order to have fully functional theme.

Go to Settings / Reading and set the theme to display your latest posts.

yourlatestpost

Next important thing to do is setting your permalinks. Go to Setting / Permalinks and under Common Settings set “Post name”.

Permalinks

When you are done with setting permalinks, Go to Pages / Add New and create pages with templates you wish to use.

dre page attributes

We will talk more about Pages and Page Templates later on.

 

Importing Demo Content

If you want your site to look like our Demo version all you have to do is import demo content. Downloading XML file is quite easy, just follow this link to your account on Themes Kingdom website and click on the “XML” icon to download demo files.

Here is a step by step explanation on how to import demo content:

  1. Login into your wordpress admin panel.
  2. Go to Tools / Import.
  3. Click on the WordPress, install the plugin if you don’t already have it.
  4. When the plugin is opened click on the “Choose File” button.
  5. Select XML file you previously downloaded.
  6. Select authors to assign to posts. You may choose an existing author or create a new one.
  7. WordPress will then import each of the posts, pages, custom post types, comments, and categories contained in our demo version.
  8. Done! Very important thing to do after you are done with importing demo content is updating menus. To do that go to Appearance / Menus and under the Menu Settings in the bottom of the page check “Primary Menu”, then click Save Menu button to save changes (We will talk more about menus in the next chapter).

 

For more detailed explanation on how to Import demo content, visit this link.

 

This is the place where you create menus. Like many other themes, this one uses wordpress built in menus feature. To find it login into your wordpress admin panel and navigate to Appearance / Menus. In the following screenshot you will find instructions how to create navigation for your website.

menus-sa brojevima - resized

  1. Click on “create new menu” to add new menu.
  2. Here you should define a name for your menu, after that click on the Create Menu button right next to it.
  3. Select pages you want to add to your menu. When you are done with selecting pages, click on “Add to menu” button below. You can also add custom links, posts, categories etc. as you can see in the panels below.
  4. Don’t forget to save changes after adding any of the elements, to do that click on the “Save Menu” button.
  5. If you want to customize or delete menu item, click on the arrow icon in the top right corner of the menu box to expand it. Inside you will find:
    • Navigational Label This field represents title of menu item that the visitors of your site will see.
    • Title Attribute is an alternative text. This text will be displayed when you mouse over this menu item.
    • To delete menu item, click on Remove
  6. This menu editor allows you to create multi-level menus. To do that simply hold your left mouse button and drag desired menu items left or right. Dragging menu items slightly to the right will make them sub-menus for the menu item that is above them. You can also change the order of appearance of menu items by dragging them up or down. Remember to save the changes when you are done with editing (No4).
  7. Set “Primary Menu” check box to checked if you want this to be your primary menu.

 

Widgets

Widgets are used to add content and features to your sidebar and footer. There are default wordpress widgets and and custom widgets that come with the theme. Adding and removing widgets is quite easy, just follow the instructions below:

  1. Login into your wordpress admin panel and navigate to Appearance / Widgets.
  2. Choose a widget you would like to use, and drag it into the sidebar to right (shown in No3). Widgets will become active after a page refresh.
  3. Widget area where you place desired widgets.
  4. You can add, remove or customize widgets in widget areas. To do that click on the arrow icon in the top right corner of the widget box to expand it. You can also change the order of appearance by simply dragging widgets up and down.
  5. When you are done with customisation click on the “Save” button to save the changes.

widgets

Custom widgets

Advertising widget

Advertising widget allows you to display ads in sidebars and footer.

exc advertising widget

  1. Ad link. Link from your ad.
  2. Upload image. Upload image that will be displayed in your ad.
Newsletter widget

Newsletter widget works with two services – Sendloop and MailChimp. You can choose between the two:

    • Sendloop will require your username and list ID which you can get here http://www.app.sendloop.com/. After you sign up and create a list, go to “Subscribers” tab and select that list and you will be able to see list ID in the address bar like in the screenshot below.

wid sendloop

chimpapi

and MailChimp API list is available here http://admin.mailchimp.com/lists/. After you sign up, go to Lists tab, select desired list (or create one if you don’t already have it) and go to Settings / List Name & Defaults to see it.
mailchimplist-2

Both Sendloop and MailChimp will require that you to have an active account.

wid newsletter

Twitter Stream widget

Twitter widget will display desired number of latest Tweets. It requires you to have Twitter account and Twitter API key. To insert username and API key login to your wordpress admin panel and navigate to Dreamy / Social. You can find all the instructions how to setup twitter here.

twitter stream_widget

Theme Settings

Dreamy theme has custom settings admin panel which allows you to customize the theme and set different features to it. Login into your wordpress admin panel and navigate to Dreamy and you will see six different tabs:

 

Here we will explain each of the tabs and all their features.

General Options

General options allows you to set global options for the theme, such as header logo, favicon and so on.

dre gen opt

  1. Header logo: JPEG, GIF or PNG image, 195×59 pixels recommended up to 500KB.
  2. Footer logo: JPEG, GIF or PNG image, 15×17 pixels recommended up to 500KB.
  3. Favicon. Website icon, ICO file, dimensions: 16×16.
  4. Google Analytic code. Your Google Analytic code. Please paste whole code here.
  5. Show share buttons. Check this box if you want to show share buttons on single post.
  6. Custom Sidebars. If checked, this option will allow you to use different sidebars per page. Otherwise, default sidebar will be displayed.
  7. Footer Copy Text: Text that will be displayed in the footer. By default this options is used to display copyright information.

 

Home Page

Home page tab allows you customize your homepage. You can add/remove and customize slider and several different custom post types.

dre home page

  1. Home page catchline. Text that will be displayed under the slider on homepage.
  2. Slide width. Choose between:
    • Slider fullwidth. Only slider will be displayed in slider area.
    • Program fullwidth. Only program will be displayed in slider area.
    • Slide – Program. Both slider and program will be displayed in slider area.
  3. Check this box if you want to disable latest news on home page.
  4. Select how many posts to show on latest news section of home page.
  5. Check this box if you want to disable gallery on home page.
  6. Select gallery category that will be displayed on gallery section of home page.
  7. Select how many posts to show on gallery section of home page.
  8. Gallery link. Choose where gallery title and image will lead to:
    • Both link to single post.
    • Image links to pyrobox.
    • Both link to pyrobox.
  9. Check this box if you want to show content form other page on home page.
  10. Choose page to use on home content. Select page from which content will be pulled.

 

Slider Options

Slider options tab allows you to customize the way how slider will displayed on homepage.

dre slider opt

  1. Select animation style. Choose between fade and slide.
  2. Select which direction does the images slide. Choose between horizontal and vertical.
  3. Select easing type. Choose animation effect.
  4. Insert slideshow speed. Set the speed between two slides, in milliseconds.
  5. Insert animation speed. Set the speed of animations, in milliseconds.
  6. Insert initialization delay. Set the initialization delay, in milliseconds.
  7. Randomize order of the slides.
  8. Pause on action. Pause the slideshow when interacting with control elements.
  9. Pause on hover. Pause the slideshow when hovering over slider. Slideshow resumes when no longer hovering.

 

Color Styles

Colors tab allows you to customize theme background and colors.

dre colors

  1. Upload body background image.
  2. Image position. Choose between left, center or right.
  3. Select repeat style for background image.
  4. Select whether the background image will be fixed or scroll.
  5. Set body background color.
  6. Set navigation color.
  7. Set navigation hover color.
  8. Set background color for navigation dropdown.
  9. Set slider color.
  10. Set slider background color.
  11. Set slider text hover color.
  12. Set slider breadcrumbs hover and current color.
  13. Set color for catch line that is under the slider.
  14. Set program color.
  15. Set program titles hover color.
  16. Set latest news color.
  17. Set footer background color.
  18. Set footer links hover color.

 

When you are done customizing colors click “Update Settings” button to save changes.

 

Social

In Social tab you can set accounts for different social networks and enable or disable social share options.

dre social

  1. RSS Feed URL: URL to RSS feed (e.g. http://www.themeskingdom.com/feed/).
  2. Google Plus Account: Enter your Google+ account (e.g. 123456789012345678901).
  3. Facebook: Enter URL to your Facebook profile (e.g. themeskingdom).
  4. Twitter: Enter your Twitter username (e.g. themeskingdom).
  5. LinkedIn: Enter URL to your LinkedIn profile (e.g. http://www.linkedin.com/company/2687325 ).
  6. Using Twitter requires having a Twitter API key. You can find all the instructions how to setup twitter here.

 

Contact

In contact section you can change error and notification messages and change Google maps parameters.

dre contact

  1. Subject for your contact form: Email subject when you get mail from contact form.
  2. Name error message. Message that will be displayed when name is missing.
  3. E-mail error message. Message that will be displayed when email is missing or is in incorrect format
  4. Message text error message. Message that will be displayed when message text is missing.
  5. Message on successful e-mail send. Message that will be displayed when message is successfully sent.
  6. Message for error on e-mail send. General error message. This error message is related to server or connection errors.
  7. Disable Captcha on contact page. Check this box if you want to disable captcha on contact page.
  8. Remove Map. If this option is checked, Google map will not be displayed.
  9. Default Map Color. If this option is checked, map will use default Google colors for roads. Otherwise, selected color will be used.
  10. Google Map Color. Color that will be used for major roads on Google map.
  11. Google map X coordinate: Google maps latitude.
  12. Google map Y coordinate: Google maps longitude.
  13. Google map zoom factor: Zoom factor – higher value, higher zoom in. Recommended value is 16.
  14. Marker Title: Text that will be displayed in balloon on the map marker.
  15. Google Map type: Map type. You can choose between hybrid, roadmap, terrain and satellite.

 

Pages

Pages are for content such as “About,” “Contact,” etc. Pages live outside of the normal blog chronology, and are often used to present timeless information about yourself or your site — information that is always applicable. You can use Pages to organize and manage any content.

dre page

  1. Page title.
  2. Page content.
  3. Page templates: Dreamy theme includes several different page templates. Page templates are used to display custom post types such as services, team members and so on.
    • Default page template. Multipurpose, without special properties.
    • Blog page template is used to display all blog posts in chronological listing.
    • Contact page template is page with contact form and map. Used to display necessary contact information.
    • Full width. This template will display page in full width, without sidebar.
    • Gallery page template will display all images from gallery section.
    • Testimonials page template will display all testimonials.
  4. When you are done with customizing click on the Publish button to publish your page.

 

Posts

Posts are the entries that display in reverse chronological order on your blog page.

inc post

  1. Post title.
  2. Post content.
  3. You can choose one of the following post formats:
    • Standard.
    • Aside. Aside post can only have text and it’s only shown on blog page without link to open it as single post.
    • Gallery. Administrator can upload images that will be displayed in slider.
    • Link. Administrator can enter custom link with custom text. Link will be displayed in outlined box on the post page.
    • Image. Image post allows you to upload image that will be used as cover image. Image must be set as featured.
    • Quote. Administrator can enter quote text and quote author. Quote will be displayed in outlined box on the post page.
    • Audio. Audio post allows you to enter URL to audio file and name of the audio file author. Supported audio formats are: mp3, mp4, ogg, WebM, WAV. Audio post type contains player that will play entered audio file.
    • Video. Administrator can enter URL to external video service – YouTube or Vimeo. Video will be displayed in content width.
  4. Each post in wordpress is filed under one or more categories. This aids in navigation and allows posts to be grouped with others of similar content
  5. Add tags to your post.
  6. Set featured image. Featured image will be used as cover image.
  7. When you are done with customizing click on the Publish button to publish your post.

 

Shortcodes

Shortcodes can be inserted into the posts. They are a great way to enhance post content or to outline important things.
leg sa fullwidth shorrtcodes

In this theme you can use the following shortcodes:

Rows

Rows are used as wrapper for columns. Each column must start and end with row shortcode.

Columns

Columns allows you to create text content in magazine-like style. Important: Column shortcode must start and end with row shortcode. Example: [row][one_half] Column content [/one_half][/row]. Columns can be one half, one third and one fourth of the content area width.


pho column

  1. Column type. Select the type of the column. You can choose between one half, one third, one fourth and one sixth.
  2. Column content. Text that will be displayed in column.
  3. When you are done with editing shortcode click on the insert shortcode button to insert it into content.


Buttons

Buttons can lead to internal or external links. Buttons have its own link, caption (Text) and style. Style affects button color, size and URL target (same or new window).


pho buttons2

  1. Add button URL.
  2. Where to open link. Select to open link in the same or in new window.
  3. Button Style. Select color of the button.
  4. Button Size. Select size of the button. You can choose between default, large, small and mini.
  5. Button text. Text that will be displayed on the button.
  6. Preview of the button.
  7. When you are done with editing shortcode click on the insert shortcode button to insert it into content.


Toggle content

Toggle content allows you to insert content that will hidden on page load. Readers can expand and collapse this content on the page. Toggle content is a great way to display facts, statistics and any other content that might not be interesting to all readers.


pho toggle content2

  1. Toggle title.
  2. Toggle content. Text that will be visible once you expand toggle.
  3. Background color. Select toggle background color.
  4. Text color. Select toggle text color.
  5. Border color. Select toggle border color.
  6. Opacity. Select toggle opacity, you can choose from 0-100 % where 0 is completely transparent.
  7. When you are done with editing shortcode click on the insert shortcode button to insert it into content.


Tabbed content

Tabbed content allows you to display content in tabs.


pho tabbed content

  1. Background color. Select background color for all tabs.
  2. Text color. Select text color for all tabs.
  3. Border color. Select border color for all tabs.
  4. Opacity. Select tabbed opacity, you can choose from 0-100 % where 0 is completely transparent.
  5. Tab title.
  6. Tab content. Text that will be displayed in this tab.
  7. Remove tab.
  8. Add another tab.
  9. When you are done with editing shortcode click on the insert shortcode button to insert it into content.


Accordion content

Accordion content allows you to display content in specific order. By default first tab will be expanded while the others will be collapsed.


pho accordion content

  1. Background color. Select background color for all accordion tabs.
  2. Text color. Select text color for all accordion tabs.
  3. Border color. Select border color for all accordion tabs.
  4. Opacity. Select accordion opacity, you can choose from 0-100 % where 0 is completely transparent.
  5. Accordion title.
  6. Accordion content. Text that will be displayed in this tab.
  7. Remove accordion tab.
  8. Add another accordion tab.
  9. When you are done with editing shortcode click on the insert shortcode button to insert it into content.


Dropcap

Dropcap is a large initial letter that drops below the first line of a paragraph, usually used at the beginning of a section or chapter of a book.


pho dropcap

  1. Type of dropcap. Choose dropcap with or without background.
  2. Insert letter that will be used as dropcap.
  3. Preview of the dropcap.
  4. When you are done with editing shortcode click on the insert shortcode button to insert it into content.


Infobox

Infobox allows you to insert box with custom font and background color. Infobox is a great way to highlight important information.


pho infobox

  1. Message box style. Select the type of the message box. Choose between error, success, warning and information message.
  2. Insert text of the infobox.
  3. Preview of the infobox.
  4. When you are done with editing shortcode click on the insert shortcode button to insert it into content.


Progress bar

Progress bar allows you to visualize the progression of an operation. Values are in percentages and between 0 and 100.


pho progress bar

  1. Progress bar percentage. Insert percentage that you want to show.
  2. Insert progress bar text.
  3. When you are done with editing shortcode click on the insert shortcode button to insert it into content.


Pricing table

Pricing Table allows you to create table with price list. Price table can be full width, half width, one third or one fourth width. Pricing table can have different background and font color. You can also add price rows and button to it.


pho pricing table

  1. Column type. Select the type of the column. Choose between full width, one half, one third and one fourth.
  2. Table title. Pricing table title.
  3. Table subtitle. Pricing table subtitle.
  4. Background color. Pricing table background color.
  5. Text color. Pricing table text color.
  6. Use Button. Choose if you want to use button in pricing table.
  7. Button URL. Insert button URL.
  8. Button style. Select color of the button.
  9. Button text. Text that will be displayed on the button.
  10. Price row text. Text that is aligned to the left in price row.
  11. Price row price. Text that is aligned to the right in price row.
  12. Price row link. Add a link to price row text.
  13. Remove price row.
  14. Add more. Add another price row.
  15. When you are done with editing shortcode click on the insert shortcode button to insert it into content.


Icons

Icons allows you to add a lot of different icons. They can be displayed in six different sizes. Also icons can have custom URL.


pho icons

  1. Select icon.
  2. Icon size (required). Select size of the icon. Choose between tiny, extra small, small, medium, large and extra large. Icon size has to be selected, otherwise icon will not be inserted.
  3. Icon URL. Add custom URL to your icon.
  4. When you are done with editing shortcode click on the insert shortcode button to insert it into content.


Fullwidth background section

Fullwidth background section allows you to add background color, image or pattern to page content or a section of the page content.


leg fullwidth

  1. Background color. Select background color.
  2. Fullwidth content. You can either add content here or you can insert fullwidth shortcode first and after that add content and other shortcodes into the fullwidth shortcode.
  3. imm back insert sc

  4. Image URL. Add image as background.
  5. Background image repeat. Select if the image will repeat or stay fixed and centered.
  6. When you are done with editing shortcode click on the insert shortcode button to insert it into content.


Slider

In Slider section you can set slides for your home page slider.

dre slider

  1. Slide title.
  2. Slide content. Content will be visible on slide single page.
  3. Images must be set as “Featured image” in order to be shown in the slider.
  4. Insert video link.
  5. When you are done editing your slide, click Publish button.

 

Program

Program post type allows you to create programs. All posts will be displayed in the home page slider area.

dre program

  1. Program title.
  2. Program content.
  3. Program excerpt. Short description about program.
  4. When you are done editing your program, click Publish button.

 

In Gallery post type allows you to add items that will be shown in page with “Gallery” template.

cos gallery3

    1. Gallery item name.
    2. Choose between three different formats:
      • Standard. Images have to be set as featured images in order to appear on page with “Gallery” template.
      • Gallery. Administrator can upload images that will be displayed in slider. First image will be used as cover/thumbnail image.
      • Video. Administrator can enter URL to external video service – YouTube or Vimeo. Thumbnail of the video will be shown on gallery page.
    3. Gallery items can be associated to categories, which will allow users to filter images by category on “Gallery” page.
    4. When using standard format images must be set as featured image in order to appear on page with “Gallery” template
    5. When you are done editing your gallery item, click on Publish button.
    6. Visible only when Gallery format is selected.

6.1. Click on the “Upload” button to add image to your slider.

6.2. To add another image to your slider click on “+” button and repeat the process from 6.1.

    1. Visible only when Video format is selected.

7.1. Insert video URL.

 

Testimonials

Testimonials post type allows you to add and edit testimonials.

dre testimonial

  1. Testimonial title. First and last name should be entered as a title.
  2. Testimonial content.
  3. Insert job title.
  4. When you are done editing your testimonial, click on Publish button.

 

Additional Support

If you need additional assistance for this theme, please submit a ticket to our support system.