CityBook - Directory Listing WordPress Theme

Welcome to  CityBook - Directory Listing WordPress Theme

"CityBook – Directory Listing WordPress Theme" is perfect if you like a clean and modern design. This theme is ideal for designers, photographers, and those who need an easy, attractive and effective way to share their work with clients.

Finally thanks for selecting CityBook

This documentation is briefly describe all of sections and themes options. I wish it is help you to customize your site what you want.

What's Included

When you purchase our theme from Themeforest, you need to login to Envato then download theme zipped file from Downloads tab. We recommend you download theme with All file & documentation option selected.

Theme zipped file:

  • Demo Content – folder contains exported .xml demo content file and shortcode content for all demo pages, CityBook Listing.
  • Documentation - folder contains off-line documentation version for CityBook theme.
  • Documentation - Elementor Page Builder - folder contains documentation for Elementor Page Builder plugin.
  • citybook - folder is unzip theme folder which is used when Install CityBook theme Manually (FTP).
  • – file is CityBook theme file which is used when Install CityBook theme using the Administration Panels and Install CityBook theme by using cPanel.
  • – file is CityBook child theme.
  • Update – folder contains information for updating CityBook theme. Will be updated in new version.

Get an overview of versions, file modifications and potential issues in CityBook theme.


You have to use Wordpress version 4.7+ .

System Check:

The system check shows you all critical files or potential problems.

File permission: Check out the WordPress documentation for more information on file permissions.

PHP Version: Checks, if your theme runs on an unsupported/deprecated PHP version.

PHP 5.6 or higher version, and version MySQL 5.6 or higher version(for legal environments also needing versions PHP 5.6 will work well, but it is recommended to be on at least version PHP 5.7

PHP Extensions: Checks, if these necessary PHP extensions are installed (JSON, DOM XML, Multibyte String).

Setting up a CityBook theme follows the standard WordPress installation procedure and works like with any other theme.

  1. Download WordPress from the WordPress website.
  2. Setup a new WordPress install.
  3. Install and activate your theme.

For more information in regard to installing the WordPress platform, please see the WordPress Codex WordPress documentation.

When you are ready to install a theme, you must first upload the theme files and then activate the theme itself. The theme files can be uploaded in three ways:

Install CityBook theme using the Administration Panels

  1. Log in to the WordPress Administration Panels.
  2. Select the Appearance panel, then Themes.
  3. Select Add New.
  4. Use the Upload link in the top links row to upload theme zipped file ( file in the downloaded package) that you have previously downloaded to your machine.

Install CityBook theme by using cPanel

If your host offers the cPanel control panel.

  1. Download the theme to your local machine and extract it then you will find file in the extracted folder.
  2. In cPanel File Manager, navigate to WordPress themes folder. If your WordPress is installed in the document root folder of your web server you would navigate to "public_html/wp-content/themes" and if you have WordPress installed in a sub-folder called wordpress, you would navigate to "public_html/wordpress/wp-content/themes".
  3. Once you've navigated to the themes folder in cPanel File Manager, click on Upload file(s) and upload that .zip file you saved in Step 1.
  4. Once the .zip file is uploaded, click on the name of that file in cPanel, then in the panel to the right, click on "Extract File Contents", and that .zip file will be uncompressed.
  5. Follow the instructions below for selecting the new Theme.

Install CityBook theme Manually (FTP)

To add CityBook theme to your WordPress installation, follow these steps:

  1. Download the Theme to your local machine and extract it then you will find citybook folder in the extracted folder.
  2. Using an FTP client to access your host web server.
  3. Upload the theme folder to the wp-content/themes directory provided by WordPress on your host server.
  4. Follow the instructions below for selecting the new Theme.

We recommand using the first method to prevent file permission issue.

Selecting the Active Theme

To select CityBook theme for your site:

  1. Log in to the WordPress Administration Panels.
  2. Select the Appearance panel, then Themes.
  3. From the Themes panel, roll over the Theme thumbnail image for the CityBook you are interested in to see options for that theme.
  4. You can view more information about any theme by clicking Theme Details.
  5. A live preview of any Theme (using your blog's content) can be seen by clicking Live Preview.
  6. To activate the Theme click the Activate button.

For more detail on install and using a Wordpress Theme please read this tutorial: Codex - Using Themes


Install Required and Recommanded Plugins

After activating the theme you will see a submenu in your admin Appearance > Install Plugins. Where you have to install and active all required plugins.

Before you can get started with your CityBook theme and have your site look like the demo, you first need to add content to WordPress. There are two way to import demo data for the theme.

Notice: please make sure that all theme required plugins are installed and activated.

Method 1: - Using One Click Demo Import plugin intergrated in Appearance menu.

When installed and activated the theme and its required plugin named One Click Demo Import you can import demo data by follow these steps:

  1. Log into your site as an administrator.
  2. Go to Appearance -> Import Demo Data admin menu.
  3. On Import Demo Data screen select data you want to import to your site then click to Import Demo Data button and wait until you get the success message.

With Full Demo Content (widgets included) demo data selected you don't need to follow Import Demo Widgets tutorial from Sidebars and Widgets section.

Method 2: - Using WordPress Importer plugin.

In your downloaded theme package folder there is a file named citybook.wordpress.2017-08-02.xml in Demo Content folder, it is the demo data .xml file that was exported from our demo. It will be used in WordPress Importer plugin to import all demo data to your site.

There are also separated content files for each post type from the demo, was exported there if you only want import one of them. They are in \Post Types .XMLs/post_type.xml format.

To import from a WordPress export file into a WordPress blog follow these steps.

  1. Log into that blog as an administrator.
  2. Go to Tools > Import in the blog's admin panels.
  3. Choose WordPress from the list. (You need install the plugin for the first time)
  4. Upload the file using the form provided on that page.
  5. You will first be asked to map the authors in this export file to users on the blog. For each author, you may choose to map to an existing user on the blog or to create a new user
  6. WordPress will then import each of the demo pages, posts, galleries, media, comments, categories and contact froms contained in this file into your blog.

After import the demo content let setup your blog like our demo

Setting up your front page

  1. Go to Settings > Reading in the blog's admin panels
  2. In Front page displays option you will have two options
    • Your latest posts - If select this your front page will look like our blog demo page (listing posts from your blog)
    • A static page (select bellow) - Select one (Home page) of our demo pages that imported to your site before - Then your front page will look like our home demo page.
  3. Click Save Changes button

When done your Front page will look like this:

For more details you can check this article:Creating a Static Front Page

Many of features has in our theme. Please take a look in total features.

  1. Elementor Page Builder : Drag and Drop page builder (save $34)
  2. Advanced Elements for Elementor Page Builder
  3. Contact Form 7
  4. Filterable Portfolios
  5. 8 different home page styles
  6. Limitless Options with Metabox Fields
  7. Unlimited Color
  8. Sidebar and full width page
  9. Right or Left sidebar position
  10. Fully Responsive
  11. Infinit scroll to load CityBook Listing and gallery
  12. Awesome Icons font
  13. Bootstrap 3.x
  14. Much More ...



All our themes have support for Custom Navigation Menu, and here are quick instructions on how you can create menus for your site.

Building the Main Navigation menu

You must define a menu before you can add items to it.

  1. Login to the WordPress Dashboard.
  2. From the Appearance menu on the left-hand side of the Dashboard, select the Menus option to bring up the Menu Editor.
  3. Select Create a new menu at the top of the page
  4. Enter a name for your new menu in the Menu Name box
  5. Click the Create Menu button.

Your new custom menu has now been defined.

Adding Items to a Menu

You can add different link types into your menu, these are split between panes left of the menu you're currently editing.

  1. Locate the pane entitled Pages.
  2. Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.
  3. Select the Pages that you want to add by clicking the checkbox next to each Page's title.
  4. Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.
  5. Click the Save Menu button once you've added all the menu items you want.

Your custom menu has now been saved.

Note The Screen Options allow you to choose which items you can use to add to a menu. Certain items, like Tags are hidden by default.

Customising Menu Items

Navigation Label 
This field specifies the title of the item on your custom menu. This is what your visitors will see when they visit your site/blog.
Title Attribute 
This field specifies the Alternative ('Alt') text for the menu item. This text will be displayed when a user's mouse hovers over a menu item.
Link Target 
Select "Same window or tab" or "New window or tab" from the pulldown.
CSS Classes 
Optional CSS Classes for this menu item,

Creating Multi-level Menus

When planning the structure of your menu, it helps to think of each menu item as a heading in a formal report document. In a formal report, main section headings (Level 1 headings) are the nearest to the left of the page; sub-section headings (Level 2 headings) are indented slightly further to the right; any other subordinate headings (Level 3, 4, etc) within the same section are indented even further to the right.

The WordPress menu editor allows you to create multi-level menus using a simple 'drag and drop' interface. Drag menu items up or down to change their order of appearance in the menu. Drag menu items left or right in order to create sub-levels within your menu.

To make one menu item a subordinate of another, you need to position the 'child' underneath its 'parent' and then drag it slightly to the right.

  1. Position the mouse over the 'child' menu item.
  2. Whilst holding the left mouse button, drag it to the right.
  3. Release the mouse button.
  4. Repeat these steps for each sub-menu item.
  5. Click the Save Menu button in the Menu Editor to save your changes.

menu-screen4.png menu-screen5.png

Adding Menu to Your Site

CityBook theme supports custom menus, you will be able to add your new menu to one of two Display Locations: Top Menu, Social Links Menu.

  1. Scroll to the bottom of the menu editor window.
  2. In the section titled Display locations, click the check box for the location where you want your menu to appear.
  3. Click Save menu once you've made your selection.

1. Main Menu structure

This menu will display on header of your pages.

2. Social Links Menu structure

This menu will display on footer of your pages.

And this is how they display on the front-end site.

For more details in creating wordpress menu please read this guide: WordPress Menu User Guide

Elementor Page Builder for WordPress will save you tons of time working on the site content. Now you’ll be able to create complex layouts within minutes! It’s build on top of the modern technologies – get the best for your lovely website!

Have you ever noticed how much time you spend fighting with [shortcodes]? No more trial and errors with “shortcodes magic” – Elementor Page Builder will take care of that.

Add columns/elements with single click, then use your mouse to drag elements around to re-arrange them.

Elementor Page Builder ″ comes as a part of CityBook.

Please visit   Plugin Website for more details.

Row section

You manage and customize each of these elements, by clicking on the corresponding section, column, or widget handle. Access the handle by hovering over the top right corner of widgets until a blue box appears, or on the top left corner of a column until a gray box extends.

Let’s edit a section.

Hover over the top middle outline of a section to access its handle - the blue box.

The handle lets you:

  • Move a section up or down the page by clicking Edit Section and dragging it
  • Duplicate, add, save, or delete a section
  • The same handle options are available for columns and widgets.

Advance Options:

There are 2 important options we have to notice you:

CSS ID and CSS Class: is 2 important fields you need to notice. We will use some special CSS class and do highlight for you.

1. Section Banner:

There are 2 parts need to notice on the banner section:

1.1 Hero Slider

1. Add New Slider: Click to button Add Item to add new Slider

3. Content: You can use HTML/CSS code on this Editor

4. Show Search Form: Select "Yes" if you want to show search form on current slider

5. Save: Click to save icon to save the change

1.2 Hero Section:

In this section you only have one introduction, and the background can have many different options.

We have 6 styles banner: Parallax background, Vimeo background, Local video background, Slider background, Youtube background, and Map banner

1.2.1 Parralax and Slider background:
  1. Type: Select Paralax or Slider type for background
  2. Background Image: select the image you want to set background
  3. Overlay Opacity :Overlay Opacity value 0.0 - 1. Default 0.5
  4. Overlay Color :Pick the color of overlay.
1.2.2 Video Background:
  1. Background Type: Select Youtube video / Vimeo video / Hosted video
  2. Youtube or Vimeo Video ID: enter the ID of Video
  3. Background Image: select the image you want to set background on Mobile
  4. Overlay Opacity :Overlay Opacity value 0.0 - 1. Default 0.5
  5. Overlay Color :Pick the color of overlay.
1.2.3. Map background:

On this Style we will get the Address of Listing to build Map

  1. Categories to get listings: enter the category of Listing you want to show on map
  2. Enter Post IDs: enter the ID of Listing post that you want to show on the map
  3. Or Post IDs to Exclude: Enter post ids to exclude, separated by a comma (,). Use if the field above is empty.
  4. Posts to show: Enter number City book Listing you want to show on the map

2. Section Title

This element help you build title area for each section, there are 4 fields option for you:

1. Title: Enter the title of section

2. Overlay Title: Enter the title that show blur on underground

3. Show Separator: Turn OFF if you don't want to show the Separator

4. Sub-Title:You can use HTML/CSS code on this Editor

5. Save: Click to save icon to save the change

3. Listing Category

The Category list will be added on this element, there are 2 tabs option for editing.

Categories Query

1. Select Categories to include: (Leave empty for ALL)

2. Order by: Select how to sort retrieved categories.

3. Sort Order:Select Ascending or Descending order.

4. Hide Empty: Whether to hide categories not assigned to any listings

5. Save: Click to save icon to save the change

Categories Layout

1. Columns Grid: You can select from 1 to 10 columns

2. Categories Items Width: Defined category width. Available values are x1(default),x2(x2 width),x3(x3 width), and separated by comma. Ex: x1,x1,x2,x1,x1,x1

3. Space: there are 4 styles for spacing: Big / Medium / Small / Extra Small / None.

4. View All Link: Enter link view more

5. Save: Click to save icon to save the change

How to create new Category for Listing?

4. Listing Slider

1. Categories to get listings: select the category name you want to show on section

2. Enter Post IDs: enter the post ID you want to show on section

3. Or Post IDs to Exclude:

4. Order by: Select how to sort retrieved categories.

5. Sort Order: Select Ascending or Descending order.

6. Posts to show: Number of posts to show (-1 for all)

7. Save: Click to save icon to save the change

CSS Classes: gray-section

5. Collage Image

1. Title: Enter the title of element, remember to use HTML as the sample

2. Images:

  • 1. Add image to section
  • 2. Select the position of image by enter the position (%) related to element (top-left corner)
  • 3. Animation Image? Turn Yes, if you want to add animation to image

5. Save: Click to save icon to save the change

CSS Classes: color-bg tablet-resp-one

6. Section Process

1. Step: Enter the step number, that show blur underground.

2. Icon: select icon you want to use as the feature service

3. Title: enter title of element

4. Content: enter description for you service

5. Show Right Decoration: TURN OFF if you don't want to show the right Decoration.

CSS Classes: tablet-resp-one

7. Section Parallax content

1. Title: Enter title of section

2. Content: enter short description

3. Button Link: enter link to redirect to page detail. if you want to remove button, just need to leave blank field

4. Button Text: enter button text

5. Save: Click to save icon to save the change

8. Section Pricing table

1. Title: enter the title of Pricing table.

2. Sub-title: you can leave blank thì field.

3. Price: enter the price.

4. Currency: enter your currency

5. Currency: the time for amount

6. Featured Price: If you want to set Feature item, just need to Turn On this fields.

7. Recommended Icon: Select the icon you want to show on the Feature item

8. Recommended Text: enter text to set the recommend item.

CSS Classes: tablet-resp-one

9. Section Counter

1. Counter Number: enter the number of counter

2. Title: enter the title of counter

3. Save: Click to save icon to save the change

CSS Classes: tablet-resp-two mobile-resp-one

10. Section Testimonial

On this section, you have to enter follow the list item, Press Add Item then enter the information below:

1. Name: Name of testimonial

2. Job: Job of testimonial

3. Review: Their review

4. Avatar Image: Upload their avatar

5. Star mark: select the star mark

6. Save: Click to save icon to save the change

11. Section Our Partner

1. Partners Images: Upload the image to set list Partner

2. Partner Links: Enter links for each partner (Note: divide links with linebreaks (Enter) or | and no spaces).

3. Is External Links: Turn Off if you want to disable the link.

4. Save: Click to save icon to save the change

12. Section Post Grid

1. Post Category IDs to include: select the post category.

2. Enter Post IDs: enter the special post(ID) you want to show on this section

3. Or Post IDs to Exclude: or enter the ID of post that you don't want to show on section.

4. Order by: Select how to sort retrieved categories.

5. Sort Order: Select Ascending or Descending order.

6. Posts to show: Number of posts to show (-1 for all)

7. Save: Click to save icon to save the change

There are some options for layout, you can disable or enable the Date / tag / comment.. on the section. Just need to check the Post Layout

13. The end section

There are 2 parts needs to add on this section:

1. Text Editor: Just need to enter the text with HTML code then Turn ON the Drop cap if you want to show it on background

2. The Button: there are some information need to check: Type, Text, Link, Alignment, Size.. You can select the best style for your design.

CSS Classes: gradient-bg join-wrap-cus

15. Popup Video element

1. Video URL: Your Youtube, Vimeo or hosted video url

2. Image: upload landing image for video

3. Button icon: select icon for video background

1. Create new Listing

1. By default your listing page is (as in our demo: )

Or (as in our demo: ) if Post name option was checked on wordpress Permalinks setting screen.

Create new Listing From Backend:

We don't recommend you create new City Listing from Backend, but on some case you can follow these steps below:

Step 1 – Navigate to CityBook Listing > Add new Listingin your WordPress admin sidebar.

Step 2 – Click on the Add New option to make a new CityBook Listing. Create a title, and insert your description about CityBook Listing in the editor.

Step 3 – Add Listing Categories from the right side. To assign it to the current CityBook, check the box next to the Listing Categories name.

Step 4 – For a single image, click the first Featured Image Box, select an image and click the Set Featured Image button.

Step 5 – Scroll down to Media Settings box, inside you can custom information for your  CityBook Listing

Step 6 – Once you are finished, click Publish to save the post.

Submit new City Listing from FRONTEND

We RECOMMEND you should create new Listing from Front end, It's really visual and easy, see the screenshot below:

2. Create Category for Listing

Navigate to CityBook Listings > Listing Category, you can add new Category manually

This is important option of CityListing, after creating it, you should press to the Edit button to update some important information for them:

  • 1. Available Features: This is feature list for the Category, you can pick it easy on box
  • 2. Additional Features: This option is really good for custom job if you want to use theme for other purposes
  • 3. Content Widgets Order: You can customize the display position of content area in a single listing depending on its category.
    Ex: Car category, you need to arrange the price at the top, detailed information at the bottom .. But a single listing of Restaurant is another layout
    This option allows you to customize the layout easily

3. Create Features for Listing

This features is created and assigned for Category item, you should create it base on the Category list

Membership Plans

1. Normal Account

1. Register new Account

Now just need to register new Account and Login by this Form, after registing you willn't be annoyed by email Email Confirm.

2. Manage your Information

After login, you can edit all Person Informations here:

3. Manage your Booking Informations:

Navigate to Dashboard > Booking to check your Booking History

You also CANCEL this BOOKING by Press to the Cancel

2. Upgrade to Partner Role

Partner Role allows you SUBMIT NEW LISTING, MANAGE YOUR BOOKING.. and more other Features on site, This is Membership feature of theme. There

On Page you can see this table:

How to create new Membership package?

Just need to press to "CHOOSE" button, you will be redirected to Checkout Page:

After the payment is successful, please check your mailbox. Confirmation email will be sent to the user automatically. You can start Submit new Listing

How to create new Listing?

Manage Booking

Of course, You can build new Listing, then all of them is saved on the Listing > My listings:

Manage the Booking Order:

You can manage your booking here:

Now you have successfully installed CityBook theme. You can go to Appearance -> Customize to customize your own unique website!

1. Site Identity

2. Menus

3. Static Front Page

4. Thumbnail Sizes

5. Colors & Fonts Options

6. Blog Options

7. Footer Options

8. Error 404

9. Additional CSS

1. General settings

2. Membership settings

3. Submit settings

5. Listing settings

6. Single Settings

7. Google map setting

8. Payment Settings

9. Email Settings

10. Widget settings

11. Maintain Page Settings

12. ADs Settings

The theme and its plugins come localization ready out of the box – all that’s needed is your translation, if the theme does not come bundled with one for your language.

There are several methods to create a translation, most of which are outlined in the WordPress Codex. However, we find the easiest method is to use a plugin called Loco Translate. More advanced users can use PoEdit. Both methods are covered in this doc.

Before you begin

The theme includes a language file (.po or .pot file) which contains all of the English text. You can find this language file inside the theme folder in \public_html/wp-content/themes/citybook/languages/.

Set up Wordpress

WordPress needs to be told which language it should run under.

  1. Go to: Dashboard > Settings > General and change the Site language.

Once this has been done, the theme will be displayed in your locale if the language file exists. Otherwise you need to create the language files (process explained below).

Translating with Loco Translate

Loco Translate is a free plugin that you can download here. You can also add directly from the WordPress administration, in Plugins > Add New.

Once you downloaded and installed Loco Translate, a new “Loco Translate” menu item is created with two sub-sections. By default the “Manage Translations” section will list all your themes and plugins and will display all available translations for each of them:

Loco Translate Listings

You can easily add new languages to a theme or a plugin using the Add New Language link:

Loco Translate: add new language

Then choose the language to add in the list, or enter the language ISO code (ex: fr_FR, en_US etc…), and select the folder to add the translation files to, and hit Start Translating:

Loco Translate: create new language

Finally start translating, and save when you finish:

Loco Translate: Start translating!

Translating with PoEdit

PoEdit is a more advanced alternative to Loco Translate. Only advanced users should attempt this method.

CityBook comes with a POT file which can be imported into PoEdit to translate

To get started open PoEdit and go to File > New catalog from POT file. Once you have done this, choose citybook.pot and PoEdit will show the catalog properties window:

Enter your name etc so other translators know who you are and click ‘ok’. After this you will be prompted to save your .po file – name it based on what you are translating to, for example, a GB translation would be saved as en_GB.po . Now the strings will be listed.

After translating all strings you can save – the .mo file will also be generated automatically.

Translate the strings

Update your translation

After updates, you can update your po file by opening it and then going to Catalog > Update from POT file. Choose the file and it will be updated accordingly.

Envato Market plugin was integrated with this theme to help you update it automatically when a new version release.

To use this plugin you should install it as required plugin for CityBook theme. Navigate to Appearance -> Install Plugins submenu and check to Envato Market plugin to install and active it.

Envato Market plugin screen:

You will need to generate a personal token, and then insert it to Token field:

After saving it, you can Go to Appearance -> Themes click to the Update, the newest version will be update automatical

Update Plugin

The new version comes with the update of the CityBook Add-ons plugin. Please remove the current plugin and then install the new plugin to get the latest version

If you like our work, Please rate it 5 stars on Themeforest by Visiting your Downloads Page: We appreciate your help :)

Thanks all of you who stay with us, your co-operation is our inspiration.