Theme installation
The easiest way to install the theme, is by accessing your WordPress admin panel, then go to Appearance → Themes. Select the Install Themes tab and click the Upload link located just below the tab’s name. Click on Browse… and select the WordPress theme zip file you just downloaded. Then click the Install Now button, and after a few seconds, your new theme should be installed. Click activate and the theme is ready to use.
In order to install the theme manually, or in case you have trouble installing it through the admin panel, you have to unzip the WordPress theme’s zip file on your computer, and upload via FTP the resulting theme folder into your WordPress installation themes folder (wp-content/themes). Then, from the WordPress admin go to Appearance → Themes. The theme should be available in your themes list. Click activate.
After activation, you will be redirected to the CSSIgniter Settings panel (accessible from Appearance → CSSIgniter Settings) to start customizing your brand new theme.
This theme heavily utilizes Featured Images. If you don’t know how to set a featured image, read about it here.
Image Sizes
The recommended image sizes for the HotelMotel theme are:
- Post thumbnail size: 640x300px
- Slider on widgetized homepage: 830x420px
- Slider on shortcoded template: 1280x440px
- Room gallery carousel images: 320x200px
- Room gallery slider (also listing page thumbnail size): 740x420px
Useful Plugins
These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.
- CSSIgniter Shortcodes you can use our custom made shortcode plugin to help you 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.
Importing Sample Content using One Click Import
To automate the process of importing and for a better experience we have natively included support for OneClick Import Plugin. Let install it fist:
From your WordPress dashboard
- Visit ‘Plugins > Add New’,
- Search for ‘One Click Demo Import’ and install the plugin,
- Activate ‘One Click Demo Import’ from your Plugins page.
From WordPress.org
- Download ‘One Click Demo Import’.
- Upload the ‘one-click-demo-import’ directory to your ‘/wp-content/plugins/’ directory, using your favorite method (ftp, sftp, scp, etc…)
- Activate ‘One Click Demo Import’ from your Plugins page.
Once the plugin is activated you will find the actual import page in: Appearance > Import Demo Data.
Click on the Import demo data button and you are done!
This plugin requires PHP version of at least 5.3.x, but we recommend version 5.6.x or better yet 7.x. Please contact your hosting company and ask them to update the PHP version for your site.
Theme features
Blog
Normal WordPress functionality. Writing normal posts, will be displayed blog style as usual. In case you have created a front page, you will need to create also a blog page where your posts will be displayed (see Front Page template with Slider below).
Slider
This feature applies to the home page and the slider shortcode. Please see section Front Page template with Slider for more information.
Your theme comes with a beautiful slider on the front page. To assign images to it, you need to create Slider Items. Each slider item represents one image in your slider, and gives you the opportunity to have it linked 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 gets clicked, you get redirected to a page-like page where the main content of the slider item is displayed. You may optionally add a URL to redirect to in the Slider Details box, just below the main content editor.
Rooms
There is no hotel/motel without rooms. From plain rooms, to themed rooms, to luxury rooms, to presidential suites. You need to show what your rooms look like, what their histories are and what amenities they provide. That’s why you should create a Room post for each room category you have. From your admin panel, go to Rooms → New room and start writing what make this room unique. Once you’ve done that, upload one or more high quality photographs and set one to be the Featured Image. Next, go to the Room Details box and write the amenities that the room provides. You know, TV, WiFi, Minibar, etc. Press Add Field to write one more. And one more. And one more. Oh, you should have written “View on the Ocean” first? No problem, just drag it to the top.
Don’t forget to show the room to your visitor, by using the -=CI Room=- widget, or the Rooms listing templates.
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, and from the “Gallery Listing Options” select the number of columns you want.
Booking form
An integral part of the theme, is the ability for your users to be able to contact you inquiring availability information. For that reason, we have created two very special booking/contact forms. First, on every page/post/room and also in your front page, you will find a gorgeous form that allows the visitor to quickly select check-in and check-out dates, and number of people. This form is included automatically. Once you hit the Check Availability button, you will be redirected to the second form, which includes the same information, along with personal info (name, email) and an area for comments. Once you hit the Send button, you will get an email with the details entered.
As mentioned above, the first -horizontal- form is shown automatically. You need to do two thing to get the second form to work:
- 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, and it will appear on top of the contact form.
- From Appearance → CSSIgniter Settings, under the Contact Options find Select the Booking Form page and select the page you’ve just created. Hit Save Changes and you’re all set.
Contact page template
A simple contact template with a map. Please go to Appearance > CSSIgniter Settings > Contact Options to manage your map. HotelMotel uses the Contact Form 7 plugin for the contact form functionality.
Rooms Listing Page Template
You can (and should) have a page that lists your rooms. All you need to do is to 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 room. This is achieved by previously assigning your rooms into Room Categories. Assuming you have room categories available, you may 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 (and should) have a page that lists your galleries. All you need to do is to create a new page, name it “Galleries” or something similar, and 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” or something similar, and from the Page Attributes box assign it the Homepage template. Next, go to Settings → Reading, on the Front page displays select A static page and on the following two drop-downs select first your Front Page and then your Blog page. Save your changes.
Full Width Page template
You may have any page displaying full-width, without a sidebar. All you need is to assign the Full Width, No Sidebar template from the Page Attributes box.
The theme also comes bundled with a few widgets developed by CSSIgniter. For information on using widgets, please see http://codex.wordpress.org/Widgets_SubPanel
Shortcodes
For the full shortcode list bundled with the theme and how to use them please refer to this page: https://www.cssigniter.com/preview/hotelmotel/shortcodes/
Custom Menus
This theme supports custom menus. There are two menu locations defined, Main Menu and Footer menu. For information on using custom menus, please read Appearance Menus Screen.
Theme Settings
Our custom options panel can be found under Appearance → CSSIgniter Settings. Let’s have a look at each tab’s options:
Site Options
From this tab you can set your site’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.
- 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, which you can unzip and import. More information on Importing Content.
Home Page Options
From this tab you set the properties of the home page.
- 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 themselves for the front page. You may add and remove as many fields as you want, and you may rearrange them by drag-and-drop.
- Slider Options: Allows you to fine-tune the home page slider.
Display Options
Various options that affect 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 the setting above. Because that may be mid-paragraph, the cut-off text is appended at the end to show that the text continues.
- SEO options: Allows you to set some elementary SEO options when no SEO plugin is found.
- Comments options: Allows you to hide/show the default “Comments are closed” message when comments are disabled, as well as disable comments for pages, globally.
- Internal slider options: Allows you to fine-tune the internal page sliders, such as on rooms and galleries.
- Featured Image options: Allows you to enable/disable featured images for specific post types, as well as set their size and alignment. If you change any sizes, you’ll need to regenerate your images.
Color Options
- Color scheme: Allows you to set the color scheme that the whole website will use. 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 as needed. 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 for to work. Please refer to their documentation for the correct settings of 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 by their website, and you are all set for tracking 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 site (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 server to your users.
- FeedBurner Email URL: Paste the URL FeedBurner provides for registering to email updates.
BuySellAds Options
- BuySellAds.com Code: Paste the BSA code as given by their website and it will be automatically included on every page. Use our accompanying widget -=CI BuySellAds.com=- 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.
How to use the page builder template
The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.
To use that template start by going to Pages > Add New. This will create a new page. Add a title to your page and select the Page builder template from the template drop down in the Page Attributes metabox.
That’s it. You can now start building your page using the page builder of your choice, once done publish it and check it out.
Next Steps
Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums