This documentation will cover almost everything to guide you step by step from the start to have your site on air. We encourage you to read thoroughly all section before you go on. If you love a more visual way to learn about CitiLights, see our video tutorials. If you still have to cope with any problem around, get our quick support at blog.nootheme.com/kb-submit-ticket.

Firstly we would love to send our great thanks to you for purchasing CitiLights – Real Estate Wordpress Theme.

Citilights is a premium responsive WordPress theme dedicatedly crafted for Property listing portal, as well as Agent and

Agency’s website. Understanding what online real estate business demands, we included in this theme viable functions

such as Front-end submission, Membership Subscription, Google map integration, Advanced search, Property Featuring,

dsIDXpress IDX Plugin support and more. To turn to the design, we make sure that it brings out premium look and feel to

boost your credibility. Various proprerty listing layouts are available and all are fully responsive.

Whether you are building a Property Sales & Rentals website, or you are an agent/agency looking to expand your online

presence, Citilights is the right fit for you.

Ready to own the best looking real estate website around? Let’s scroll down.

When purchasing successfully our theme from Themeforest, you will need to download theme package for your use. To

download the package, please login to your Themeforest account, navigate to “Downloads”, click the “Download” button

in the left of the theme, choose “All files & documentation” to download our theme package to your computer. The

theme package contains:

             guides you to build your site with our theme.

 

WordPress Installation

Before installing this theme, please make sure you have WordPress already installed. For further guide to install

WordPress, please find in WordPress Codex. To use our theme, please ensure you are running WordPress 3.6 or

higher, PHP5 or higher, and mysql 5 or higher.

 

Theme Installation

There are 2 ways to install the theme. It is up to you to choose your preference.

1. Installation via WordPress: all you need to do is simply to login to your WordPress Admin Panel, navigate to

Appearance > Themes, click Install Themes on the top then hit “Upload” button. Find “noo-citilights.zip” file on your

computer and click “Install Now”. You have done. Just wait for the theme to be uploaded and installed.

Note: If you see this message “Are You Sure You Want To Do This” when installing noo-citilights.zip file via

WordPress, it means that you have an upload file size limit. Try to install the theme via FTP instead, or contact your

host to increase the limit.

2.  Installation via FTP: this way of installing take a little more action, but not much of course. First, login to your FTP

account. Extract the noo-citilights.zip file then upload ONLY the unzipped folder to wp - content/themes folder. You

have just done installing.

 

Theme Activation

After installing the theme, you need to activate the theme to start your customization. Just go to Appearance >

Themes, find Citilights theme and click “Activate”.

When the theme is activated, you will see notification message box on top of the page to activate recommended

plugin. Choose Begin to Install Plugins in the box to start install plugins you need. Below is the list of plugins

accompanied with our theme.

 

Plugins Installation

Here is the list of plugins will come together with our theme when you activated it. You are recommended to install

and activate these plugins based on your own need:

1.  Slider Revolution: A popular slider plugin. Its intuitive interface and diversified options and effects will be a good

choice for your sliders. You saved $18 for this plugin with CitiLights.

2. Visual Composer: The popular drag and drop page builder plugin with intuitive interface to build your content at

ease. Save another $28 for this plugin with CitiLights.

3.Contact Form 7: A free form plugin recommended to create a nice form for your site.

 

Demo Content

When you finished installing our theme, your site will not contain all content like you might see in our live demo. If you

want to have the sample content on your site, you need to import our demo content by following these steps:

 From Admin Panel, after installing and activating our theme, navigate to Tools, choose Import > WordPress.

            download from ThemeForest following guide in DOWNLOAD THEME PACKAGE section above. Click

           Upload file and import to upload the file.

             the plugin. Click Install Now to install and move on.

            choose to map to an existing user on the blog or to create a new user.

             blog.

            content you can import:

-   Images: our stocks might not be in the content due to license issues. Instead, we replace with grey images. Please

change to your own pretty images for your site.

-  Sliders, Posts and Pages: not all sliders, posts and pages in our demo will be consisted in our dummy data when

you import. However, we still add some sliders and pages for your reference.

 

Basic Settings

If you're new to WordPress, you'll probably see that your site after importing data is completely different from our demo. It's because some basic settings is needed on WordPress site. If you know what the problem is and how to fix it, please skip this section.

Step 1: Setup homepage

Please go to Reading setting: Settings -> Reading then choose a Static page for Front page displays. After that, select one of the three home page as your Front page.

You can see more detail at: http://codex.wordpress.org/Creating_a_Static_Front_Page

Step 2: Assign menu

Please go to Appearance -> Menus then find Menu Settings -> Theme locations at the bottom. Check the Primary Menu then save it. This action will assign the menu “Main Menu” to the location Primary (the main menu) on our theme.

You can see more detail at: http://codex.wordpress.org/Appearance_Menus_Screen

Step 3: Change Permalink

Please go to Permalinks setting: Settings -> Permalinks then change the Common settings to Post name.

You can see more detail at: http://codex.wordpress.org/Using_Permalinks

After doing these steps, your site will look like our demo, you can move on to process to build your content.

 

There are 3 methods to update the theme:

1. Manually via WordPress admin: after download the package from ThemeForest, you can delete the old theme and install the new theme. All your settings with our theme will be preserved but it sometimes results in losing Menu or Widgets settings because this method actually switches on/off the menu and widget locations which has been registered by this theme.

2. Manually via FTP: after download the package from ThemeForest, you can extract it and using FTP client like FileZilla to remove the old theme and upload the new theme. With this method, all your settings, include the menu and widget will be persevered.

3. Using Envato WordPress Toolkit introduced on this link: http://premium.wpmudev.org/blog/how-to-update-themeforest-themes-with-the-envato-wordpress-toolkit . This is the plugin developed by Envato to auto update WordPress theme bought in ThemeForest.

Create a new page

Please follow these steps to create your pages:

            know more about Pages in WordPress, use the Help tab in the upper right of your screen.

           Pages are usually ordered alphabetically, but you can choose your own order by entering a number (1 for first,

           etc.) in Order field.

            Default Template.

            Text editor. To build content for your page, you will need our provided Shortcodes. Check out Shortcodes

              chapter for how to use them.

            done, you can Publish your page.

 

Pricing page

1. To create Pricing table using regular Visual Composer’s shortcode:

After everything is set, click Publish or Update the page.

2. To create Pricing table using CitiLights’s Pricing table shortcode which retrieves information from membership packages to display as content (if Memberships is enabled only):

 

Property listing page

To create Property Listing Page, navigate to Appearance>Menus>Links. In the URL field, enter http:// …site-

name/properties. Click Add to Menu.

The Property Listing Page will be automatically generated, showcasing all properties and order them by date.

After everything is set, click Save Menu.

For layout configurations, please go to Customizer>Agents & Properties.

 

Agent listing page

To create Agent Listing Page, first go to Pages>Add new.

For layout configurations, please go to Customizer>Agents & Properties.

 

Register and Login page

To create Register and Login page, go to Pages>Add new.

            Add Element.

            page.

After everything is set, click Publish or Update.

 

Submission page

To create frontend Submission page, go to Pages>Add new.

After everything is set, click Publish or Update.

 

Agent Dashboard page

To create Agent’s Dashboard page, go to Pages>Add new.

After everything is set, click Publish or Update.

 

Agent Profile page

To create Agent Profile page, go to Pages>Add new.

After everything is set, click Publish or Update.

 

Contact page

To create Contact Page, first go to Pages>Add new.

After everything is set, click Publish or Update.

 

Search Result Page

In order to have searched properties displayed in a result page, you must create Search result page first, otherwise searching will lead to No result.

To create Search Result Page, go to Pages>Add new.

After everything is set, click Publish or Update.

 

Page settings

You can choose various settings for your page in this box.

Show Page Title: if not checked, Page Title will be hidden.

Body Custom CSS Class: Add custom CSS class to <body> element.

Enable Onepage Navigation: this option allows you to make an onepage page with separate menu.

Revolution Slider: Select Slider to be displayed on your site or just set No Slider if you don’t need a slider for your page.

Home Slider: enable this option if you want to set up a header for the page. Page header can be slider  or video background.

 

Adding new agent

To add a New Agent, go to Agents & Memberships>Add Agent

After everything is set, click Publish or Update the page.

 

Adding new membership package

To add a New Membership Package, go to Agents & Memberships>Membership Packages

After everything is set, click Save Changes.

 

Agent and Membership Settings

To configure Agents and Memberships, navigate to Agents & Memberships>Settings.

Here you can change the Agent Archive base (slug). To put it simply, it’s similar to Category base, Tag base in

Wordpress.

Regarding Memberships Settings, there are 4 Membership Types that you can select from. Choosing different types

leads to different configuration options.

           Property and Agent is implemented in the admin site, therefore only admin and those who have access to the

            backend can submit property.

            This type of membership is suitable for an agency’s site or an individual agent’s site.

 

            there is no limitation in property listing.

          Select this membership type if your site is a free listing portal, or if you use another WP plugin that allows

           charging user at registration.

          It can also be used for agency’s site if you restrict user registration so that only your agents are able to log in

          and submit property from frontend.

          > Submitted Properties need approval from admin?: choose whether new submissions and newly edited

          properties need admin’s approval.

           > Custom login page: select a page from the dropdown list for login page.

 

           number of listings and featured listings and the price of each package in Agents & 

           Memberships>Membership Packages. For more details, please check the Adding new membership

          package section.

           By choosing this type, you will have option to enable Freemium Membership. This feature allows registered  

           members to have a number of free listings and free featured listings before being asked to purchase

            membership. Checking the Unlimited Listing box means giving registered users unlimited number of free

             listing, and they are only asked for payment to make their properties featured.

          > Membership listing page (Page with pricing table): choose a page from the dropdown list for pricing page.

          > Submitted Properties need approval from admin?: choose whether new submissions and newly edited

             properties need admin’s approval.

          > Custom login page: select a page from the dropdown list for login page.

 

           > Price per Submission: set the price for every submission.

           > Price for Featured Property: set the price to make property featured. Note that this and the Price per

            Submission add up to the total price that agent will pay for a featured property.

           > Submitted Properties need approval from admin?: choose whether new submissions and newly edited

          properties need admin’s approval.

           > Custom login page: select a page from the dropdown list for login page.

            After everything is set, click Save Changes.

 

Adding new property

To add a New Property, go to Properties>Add New Property

           added to the Slider header in the property’s page on front end. You can select multiple images at once. We

           recommend that the images have minimum width of 750px.

Note: In the Price field, don’t type “,” or “.” for thousand separator, they will be counted as decimal separator

instead. Thousand separator will be added automatically when displaying on frontend.

For more configurations, please check theGeneral settings section below.

            fields. To manage custom fields, go to Properties>Settings>Custom fields. For more detailed instructions,

            please check the Custom fields section below.

            To manage property features, go to Properties>Settings>Listing features & Amenities. For more detailed

            instructions, please check the Listing features & Amenities section below.

            the property’s address to the search bar and the map will move to its neighborhood. Click on the map to place

            pin. For more configurations, please check the Map settings section below.

After everything is set, click Publish or Update the post.

 

General setting

To set up Area Unit, Currency, Separator, go to in Properties>Settings>General.

After everything is set, click Save Changes.

 

Custom fields

Custom fields provide additional information about the property. They will appear in the Property detail section in

Property Page on frontend, along with the default fields. You are free to add or remove any custom field.

To manage custom fields, go to Properties>Settings>Custom fields.

You can order fields using drag and drop. After everything is set, click Save Changes.

 

Listing features & Amenities

To manage listing features & amenities, go to Properties>Settings> Listing features & Amenities.

You can order fields using drag and drop. After everything is set, click Save Changes.

 

Advanced Search

This is where you can customize the search filters and Advanced Search fields.

There are 8 possible filters. You can change parameter from the dropdown. To disable a filter, select None.

The Advanced Search Field allows searching by Amenities. Select Amenities from the dropdown.

 

Map settings

For map configuration, go to Properties>Settings> Google Map.

After everything is set, click Save Changes.

 

For Siderbar and Map Header settings, please go to Customizer>Agents & Properties.

 

Note: Payment options are not available if selecting No Memberships or Free for All users in Agents>Memberships>Settings.

 

Adding Order

Note: You can create new order manually, it does not have any impact on the user whom the order is assigned to, but

causes change to the payment log only. For instance, creating an order for a user does not make him a member, nor

authorize him to submit property.

To add new order, navigate to Payment>Add Order.

 

Payment Settings

After everything is set, click Save changes.

 

Our theme customizer works as the original WordPress customizer feature but be much more versatile. All our theme

options can be changed in our Customizer on the left side and live previewed instantly in previewed site on right side.

With its intuitive interface, you can customize your website as you wish at your fingertips without writing a line of code.

To start using Customizer, in Admin Panel, navigate to Customizer, you will be redirected to a live preview screen

where you can change options on left side and preview your site on your right side promptly. All your change will not

be committed and viewed on your site until you click Save & Publish on top right of Customizer bar. You also are

able to Export your settings in Customizer and Import to apply for other sites.

Let’s take a quick overview throughout all options in our Customizer. When using Customizer, you also will get our

short guide for each option right in Customizer bar.

 

Site Enhancement

Custom Favicon: A favicon is a simple square image viewable in browsers for users to identify your website among

many tabs. Ideally, it should be a 32×32 pixels or a 16×16 pixels image. Most modern browsers can display a favicon

in PNG format but older versions of Internet Explorer may not. To make sure your favicon be shown nicely, it is

recommended to be in .ico format. Add your favicon in our customizer simply by clicking "Open Library" button in

"Custom Favicon", selecting your existing image or uploading new image.

Smooth Scrolling: Enable/disable the smooth scrolling feature.

 

Design & Layout

Site Layout: Choose Full-width or Boxed layout for your site. With Boxed layout, you will have additional below

options for background setting:

Site Width: Set width of the boxed layout in regard to full-width layout

Site Max Width: Set max width of the boxed layout in any screen size.

Background Color: Choose color of background

Background Image: Upload your background image along with some settings: Background Image Repeat,

Background Image Alignment, and Background Image Attachment.

Link Color: Choose color of links on your site and color when you hover in.

 

Typography

Custom Font: CitiLights integrated all Google Fonts. Enable Custom Font to customize font, font size and other

settings for heading and body text.

Custom Font Color: Enable Custom Font Color to customize font color of headings and body

 

Header

Customize your settings for your Header including Navigation Bar (Logo and Navigation) and an optional Top Bar.

Navigation Bar: Control the navigation bar with all the related settings here: its position, font, link color, link hover

color and more. Check the box beside Custom Dropdown Style to change background color, font size, link color and

link hover color on dropdown bar.

Logo: Upload your logo image and retina one (a larger image, with double the amount of pixels that your image will

be displayed at). Enter your image height you want to display on navigation bar and we will do the calculation part for

you to make it look great on all screen size.

NavBar Alignment: Adjust link alignment, height of navigation bar and size of mobile navigation button.

Top Bar: Enable/disable top bar. Top bar lays on top of your site, above Navigation Bar. It is suitable for placing

contact information and social media link. You can choose to display social icons, set it as a top menu or custom

content by checking each option. By checking Custom Content option, you are able to add content for top bar.

Choose layout to display social icon and content of top bar.

 

Footer

This section contains all settings for Footer in your site.

Footer Columns: Set the number of column shown in footer.

Upload Footer Logo: select a photo to be displayed at the right bottom corner of the footer.

Bottom Bar Content: Add content shown in bottom bar.

 

Widgets

You can create widgets with various type of contents to put in the footer. To create a widget, click Add a Widget.

 

Blog

Blog Page: Choose page layout for your blog page. It can be full-width, with right sidebar or left sidebar. If you

choose layout with sidebar, select blog sidebar for your blog.

Archive Page: Setup layout and style for your Archive Page. You can choose same layout and style as blog page by

checking the box beside each option or uncheck the box to select other layouts and styles.

Single Post: Choose Post layout same as blog layout by checking the box beside the option or uncheck to choose

another layout. You also can choose to show or hide Post Meta, Tags and Author’s Bio. In addition, by enabling

Social Sharing, you enable visitors to share your post. Enter Social Sharing Title and decide which social media your

post can be shared.

 

Property

Property Layout: Configure the layout of single property’s page. You can choose between Full Width and With

Sidebar (Left or Right).

Property Siderbar: select a sidebar that will appear in property’s pages. Main Sidebar is default, although you can

create custom sidebar in Appearance>Sidebar Generator. You can find details about this plugin and instruction at

https://wordpress.org/plugins/smk-sidebar-generator/

 

Social Media

Input URLs of your social media profile. Inputting URL here means that corresponding social icon will be displayed

when Social Icon is enabled on Top Bar and/or on Bottom Bar.

 

Custom Code

In this section you can add custom JavaScript and CSS to your site. Your Google analytics tracking code should be

added to Custom JavaScript field.

 

Import/Export Settings

All themes from NooTheme share the same theme setting structure so you can export then import settings from one

theme to another conveniently without any problem.

Import Settings: Click Upload button then choose a JSON file (.json) from your computer to import settings to this

theme. All the settings will be loaded for preview here and will not be saved until you click button "Save and Publish".

Export Settings: Simply click Download button to export all your settings to a JSON file (.json). You then can use

that file to restore theme settings to any theme of NooTheme.

 

Advanced Search Widget

To use this widget, navigate to Appearance>Widgets. Drag Advanced Search Property widget to a sidebar, give it

a Title, then Save. You’ll have a widget as below:

 

Recent Properties widget/Properties widget

This widget does more than its name suggests. It displays recent properties by Type, Label, Location, Sub-Location. It can also display Featured properties.

 

CitiLights is equipped with powerful shortcode set that enables you to build any layouts you can imagine of. All

shortcodes can be accessed in the Visual Editor after you complete installing the theme. If you use Visual

Composer to edit content, all our shortcodes were already built into its Elements.

To use shortcodes to shape your layouts in Visual Editor, open visual editing tab of a page or post in Admin Panel.

In top bar of editing field, hit Noo Shortcodes icon and navigate to a shortcode you want to use. A pop up window

with some attributes of the shortcode then will appear for you to make change easily. Finally, click Save to generate

the shortcodes. Be noted that values of shortcodes have always to be inserted in quotation mark “ ”. Insert any

shortcode you need to make up your perfect pages and posts.

 

Resposive Slider

Responsive Slider is a custom shortcode that we added into Visual Composer. It is used to put a simple responsive

slider into a post or page. In Visual Composer’s backend edior, click on Add Element, then select Responsive Slider

shortcode.

Set up some basic configuration, then Add silde into slider by clicking the + button

Next, select the input between Image and HTML content. Insert caption and Save changes.

Repeat the 2 steps above to add more images.

 

Beside regular Visual Composer shortcodes, CitiLights has specific shortcodes designed for real estate business.  To

use these shortcodes, switch to Visual Composer’s Backend Editor, click Add Element button then select the

shortcode you want.

 

Recent Properties

In Show section, select showing all recently added properties or Featured Properties only. There are 4 styles to

choose from.

 

Style: Grid

Style: List

Style: Slider

Style: featured

This style is used to showcase properties in a slider as below. 

 

Recent Agents

This shortcode showcases your agents in the order in Agents & Memberships>All Agents, if you wish to put some certain agents on top, you can change their page’s Published Date to most recent.

 

Advanced Search Property

Style: Search Horizontal

Use this shortcode to instantly insert Google map with horizontal search bar into your page and post.

Style: Search Vertical

Choose this style to instantly insert Google map with vertical search bar into your page and post.

 

Membership Packages (Pricing table)

This shortcode is used to automatically create a pricing table. It retrieves information from membership packages and

displays as content of the columns. To set up a pricing page using this shortcode, please refer to chapter Set up your

pages>Pricing page above.

 

Login/Register

Include Login form, Register form or both in a page with this shortcode. 

 

Property Slider

This shortcode is used to put up a slider with properties’ images and main information, along with horizontal search

bar. You can also use custom image. 

 

Single Property

This is used to display one property by ID in various styles. See the property’s ID in Properties list.

 

 

 

 

 

CitiLights supports dsIDXpress plugin. That means that all dsIDXpress widgets and pages will run flawlessly and be

styled to match with other elements of the theme.

            Shortcodes, IDX pages:

IDX Widgets

IDX Shortcodes

IDX Pages

Map with IDX Listings

To have a Map with IDX Listings, use Property Map & Search shortcode. Set Source at IDX.

 

CitiLights is compatible with WPML plugin, thus can be translated into multiple languages. Follow this link for guide.

You can also use POEdit plugin for translation.

           you save the files, you must name them according to your language code. Find a list of language codes

          at WordPress in your Language. As an example, the language code for English is en_EN, so you would save the

          translated files as en_EN.po first, then en_EN.mo.

Codestyling Localization is a good alternative for POEdit. It also works with .po/.mo files and is very easy to use.

How To Import Demo Content

How To Customize Website With Customizer

When you come to this section, we hope that you found all the information provided in this documentation helpful and you

have finished installing and polishing your site as what you have imagined of. After reading carefully this guide, if you still

need help, don’t hesitate to contact us at http://blog.nootheme.com/kb-submit-ticket/. You will be asked to create an

account if you are new to us and enter purchase code to submit a ticket for support. To get your purchase code, please

login to your Themeforest account, navigate to “Downloads”, click the “Download” button on the left of our theme, choose

“License Certificate” to download the license file where you can find the purchase code.

Please be noted to submit a ticket with your issues be clearly clarified. It is recommended you send us together with link

of your site and your admin account. These will help to save time for both of us. Finally, please be patient. It will take us

some time to check all the tickets and we will solve tickets from oldest to newest.

Hope you enjoy using Citilights! Thank you for choosing our theme.