Setting up your theme

Featured Images

This theme heavily utilizes Featured Images. If you don’t know how to set a featured image, read about it here.


Simple posts, will be displayed blog style as usual. In case you have created a front page, you will need to also create a blog page where your posts will be displayed (see Front Page template with Slider below).


This feature applies to the homepage and the slider shortcode (see section Front Page template with Slider for more information).
Your theme comes with a versatile slider on the front page. To assign images, you need to create Slider Items. Each slider item represents one image in your slider and gives you the option to link it wherever you want.
To create a new slider item, go to Slider Items > New Slider Item. Give it a title and set a Featured Image. That image will be displayed on the slider.

When the slider item is clicked, it redirects to a page where the main content of the slider item is displayed. You may optionally add a URL that redirects to the Slider Details box, just below the main content editor.



Show what your rooms look like and the amenities they provide. Create a Room post for each room category. From your admin panel, go to Rooms > New Room and add the room details. Upload one or more photographs and set one as the Featured Image. Next, go to the Room Details box and write the amenities that the room provides (TV, WiFi, Minibar, etc). Press Add Field to add as many as you need. Also if you forgotten something, don’t worry. Just write it and drag it to the top.


Also show the room to your visitors through the -=CI Room=- widget or the Rooms listing templates.

Photo Galleries

In the exact same way you can create photo galleries. Once you have created some photo galleries, create a page and select the Gallery listing template. From the Gallery Listing Options select the number of columns you want.

Booking form

An important part of the theme is the way your users can contact you for more information. The theme includes for that reason, two very special booking/contact forms. First, on every page/post/room (also in your front page) you will find a form that allows the visitor to quickly select check-in and check-out dates as well as number of people. This form is included automatically.

If you click the Check Availability button it redirects to the second form that includes the same information along with personal information (name, email) and an area for comments.This form sends to you emails from your users.

As mentioned above, the first -horizontal- form is shown automatically. You need to do two things to get the second form to work:

  1. Create a page, name it “Booking form” or something similar, and assign it the Booking form template from the Page Attributes box. You can write some content if you want as well, such as your contact information. It will appear on top of the contact form.
  2. From Appearance > CSSIgniter Settings under the Contact Options find Select the Booking Form page and select the page you’ve just created. Click Save Changes.

Contact page template

A simple contact template with a map. Go to Appearance > CSSIgniter Settings > Contact Options to manage your map. Use the Contact Form 7 plugin.


Rooms Listing Page Template

You can have a page that lists your rooms. Create a new page, name it Rooms or something similar, and assign the Rooms listing template from the Page Attributes box. Note that you may create multiple room listing pages, each displayed a different set of rooms. To do that assign your rooms into Room Categories (assuming you have room categories available). You can also select one from the Room Listing Options box, as well as the number of columns you want your grid of rooms to span.

Galleries Listing Page Template

You can also have a page that lists your galleries. All you need to do is to create a new page and name it Galleries” or something similar. Assign the Galleries listing template from the Page Attributes box.

Front Page template with Slider

To set-up a front page you need to create two pages. Name the first one Blog. Name the second one Front Page and from the Page Attributes box assign it to the Homepage template. Go to Settings > Reading and on the Front page displays select A static page. On the following two drop-downs select first your Front Page and then your Blog page. Save your changes.


Full Width Page template

You can have any page displaying full-width without a sidebar. All you need is to use the Full Width No Sidebar template from the Page Attributes box.

The theme also comes bundled with a few widgets. For information on using these widgets see

Custom Menus

This theme supports custom menus. There are two menu locations: Main Menu and Footer menu.


For information on using the menus, read the Appearance Menus Screen.

Theme Settings

The options panel can be found under Appearance > CSSIgniter Settings. Have a look at each tab’s options:

Site Options

Here you can set your website’s properties:

  • Upload your logo: Allows you to upload a logo image. You need to upload it to the correct size. Logo text is used as alternative logo description.
  • Site layout: Allows you to set whether your sidebar will be shown on the left or the right side.
  • Upload favvicon: Allows you to upload a traditional favicon and touch favicons for mobile devices.
  • Download sample content: Allows you to download an XML file containing sample content that you can unzip and import. You can find more information on Importing Content.


Home Page Options

From this tab you can set the properties of your homepage.

  • Featured Room title: Controls the title of the front page template section that displays featured rooms.
  • Amenities: Allows you to set the title and the amenities for the front page. You may add and remove as many fields as you want by drag and drop.
  • Slider Options: Allows you to fine-tune the home page slider.


Display Options

This tab provides multiple options about what your website displays:

  • Left/Right header text: Allows you to set the text that is shown on the left and right of the expandable header’s pointer symbol.
  • Read More text: What will be displayed instead of the default Read More…
  • Excerpt length (in words): Limits how many words the excerpt will be, and whether it should be linked to the post.
  • Excerpt auto cut-off text: When a manual excerpt is not provided, WordPress generates one automatically from your post’s content, limiting the words according to this setting. Because that may be mid-paragraph, the cut-off text shows at the end to show that the text continues.
  • Comments options: Allows you to hide/show the default “Comments are closed” message when comments are disabled. Also from here, you can disable comments for pages.
  • Internal slider options: Allows you to fine-tune the internal page sliders (on rooms and galleries).
  • Featured Image options: Allows you to enable/disable featured images for specific posts as well as set their size and alignment. If you change the sizes, you’ll need to regenerate your images.


Color Options

  • Color scheme: Allows you to set the color scheme for the whole website. You can override this in individual posts/pages.
  • Disable custom background: Unchecking this presents you with a list of options that allow you to override the template’s background settings and set yours. If don’t want that, just keep this tab disabled by checking the checkbox.


Contact Options

These options affect the newsletter form that appears in the front page. Note that you need to use a plugin or a third-party online provider such as Campaign Monitor and MailChimp for the newsletter to work. Please refer to their documentation for the correct settings on Action URL, field names and field IDs described below:

  • Booking Form page: Allows you to select the page you have created and assigned the Booking form page template. Without it, the booking widgets will not work.
  • Header panel: Allows you to set the header and the description for the expandable header panel.
  • Address: Allows you to set the address of your business. This is shown on the Location and Contact pages, if you disable the sidebar from the options below.
  • Map settings: Allows you to set the point that your business will appear on the maps displayed throughout the website.
  • Contact page options: Allows you to show/hide the map, the contact form and the sidebar used in the Contact page.

Archive Options

These options control the behavior of the Archive page (if you created one) with the Archive page template assigned.


Google options

  • Google Analytics Code: Just copy – paste your Google Analytics code exactly as given and you can track your visits.
  • Google Maps API key: Enter here your Google Maps API Key. While your maps will be displayed at first without an API key, if you get a lot of visits to your website (more than 25.000 per day currently), the maps might stop working. In that case, you need to issue a key from Google Accounts.


FeedBurner Options

  • FeedBurner Feed URL: Paste the feed that FeedBurner provides you with and it will be automatically be served to your users.
  • FeedBurner Email URL: Paste the URL FeedBurner provides to register for email updates.


BuySellAds Options

  • Code: Paste the BSA code as given by their website and it will automatically be included on every page. Use the -=CI  widget to display the ads.


Custom CSS

Paste your custom CSS in the box and it will override the theme’s styles along with the Background Options.


Additional Information

Useful Plugins

  • CSSIgniter Shortcodes You can use this shortcode plugin to create a variety of layouts and elements on your site. Instructions can be found here.
  • Socials Ignited Use this plugin to create a widget that links to all your social profiles. You can also customize it with your icons and add new social networks. A guide can be found here.
  • Contact Form 7 Use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.

Image Sizes

The recommended image sizes for the HotelMotel theme are:

  • Post thumbnail size: 640×300px
  • Slider on widgetized homepage: 830×420px
  • Slider on shortcoded template: 1280×440px
  • Room gallery carousel images: 320×200px
  • Room gallery slider (also listing page thumbnail size): 740×420px