Setting up your theme

1) Creating theme pages

Start by adding the pages you are going to need. Go to Pages > Add New and create the following pages:

  1. Home. This will serve as your homepage. Assign to it the Homepage template from the Page attributes panel on the right.
  2. Blog. This will be your posts page. Just create it, no need to add content now.
  3. Contact. Here you can place your contact form, which you will create using the Contact Form 7 plugin or Jetpack’s contact form add-on.
  4. Property Listing. This page displays your properties. Apply the Properties Listing template from the page attributes panel, in the Property Listing Options panel that appears. You can select the number of columns you want your listing page to have, toggle the appearance of a map, change the layout of the listed properties to horizontal and finally select whether the listing page will have a sidebar or not.
  5. Agent Listing. This page displays your agents. Apply the Agents Listing template from the page attributes panel and proceed to the Agent Listing Options panel to select how many columns will the agent listing page have and how many items per page it will display.

(TIP: all page titles serve as examples, you can name your pages according to your needs.)

Once the pages are created, navigate to Settings > Reading, set the “Home” page to be your static frontpage and the “Blog” page to be your posts page, as demonstrated in the image below:


2) Populating your blog

To add new posts to your blog, go to Posts > Add new, title your post and enter the content in the editor. Upload a featured image by clicking Set featured image on the Featured Image panel, add a category and/or tag to the post from the respective panels and publish the post.


3) Adding Properties

Let’s move to the most important part. Adding your properties. Start by adding information for your properties, like types, statuses, amenities and locations. Go to Properties > Types and create a few posts. For example: condos, villas, apartments etc, next go to Properties > Statuses and create a few more (for sale, for rent etc). Next go to Properties > Amenities and add the amenities (for example: garage, fireplace, pool etc.) Finally go to Properties > Locations and fill in the locations you are active on.

Once you add the information above, go to Properties > New Property. Add a title, a featured image, some text and make sure you check the relevant boxes for the taxonomies you created before (type, status, amenities & location). Next move to the Property Details panel below the main text editor.

The property details panel has nine tabs, allowing you to fill in all necessary information regarding your property.

  1. In the General tab you can fill in the property’s ID to help you and your clients refer to a property. Set an open house date or dates and select whether this will be a featured property (meaning that it will be placed on the homepage’s slider).
  2. In the Address tab you can add the address of the property and its position on the map. You can leave the address boxes blank and set the map to display a non-exact location so that you won’t lose your competitive advantage by revealing the property’s exact location.
  3. In the Pricing tab you can add the property’s pricing information.
  4. In the Attributes tab you can fill in the properties area, bedroom, bathroom and garage numbers.
  5. In the Images tab you can add photos from the property and floor plans.
  6. In the Videos tab you can add the URL of a YouTube/Vimeo video you have created for your property.
  7. In the Useful Data tab you can add information that might help your customers get a better idea on the location of the property and its attributes, like crime rates, air & noise pollution etc.
  8. In the Agent tab you can select the agent responsible for the property.
  9. Finally, in the Attachments tab you can upload documents related to the property.

Once you are done filling the information above, publish the property.

4) Adding agents

To add an agent go to Agents > New Agent. Add the agent’s name as the title, a featured image and insert relevant text in the text editor. Next move to the Agent Details panel below.

In the Contact tab you can fill in the agent’s contact details and in the Social tab the links to the agent’s social profiles in four major social networks.

5) Creating your menu

Now that your content is in place, you need to set up the menu. Go to Appearance > Menus create a menu and name it Main menu. Customize it by adding menu items and then go to Manage Locations, place the menu on their respective position and save.


(TIP: for more info on creating and managing menus, please read the WordPress Menu User Guide here)

6) Adding content to your Homepage

The homepage of Oikia consists a slider and the Homepage widget area. You can access this area and add content to it trough Appearance > Widgets.

The slider items are the featured images of selected properties. To add a property on the homepage slider, edit the property and check the Featured Property box in the General Tab in the Property Details metabox.

Duplicate the demo’s layout

On the demo’s homepage you can see three slider items. A CI Property Filters widget that creates the search bar, a CI Latest Posts widget that displays the latest four properties in a two column layout, a CI Hero widget, a CI Properties widget that displays four random properties by a selected agent, a CI Items widget that displays two agents in a two column layout, the CI Property Map widget and a CI Carousel Latest widget displaying the latest fifteen properties in a carousel.

7) Changing Footer text

The theme’s footer features an area for you to enter your copyright information, privacy policy etc. To change the text you need to go to CSSIgniter settings > Site options and scroll down to the Footer text box.


8) Change the header contact info

To edit the contact information displayed on the header go to CSSIgniter Settings > Contact Options.


9) Modify section titles

You can modify the titles for the blog listing page, the search page and the 404 page under CSSIgniter Settings > Section Titles.


10) Property options

Under CSSIgniter Settings > Property Options you can select the default properties search page. You can also set the default area unit & currency symbol. Finally you can select the automatic property ID box, so the theme assigns ID’s to your properties automatically if you don’t have a predefined ID scheme of your own.


11) Widgets

The theme features fourteen widgets designed to help you display your properties easily and efficiently. You will find a small description on each widget explaining its function.


Additional Information

Creating Galleries

To create a gallery using the gallery management system, simlpy follow these steps:

  1. On the Gallery Information panel click the Add Images button.
  2. To upload your images, drag & drop them in the Edit Gallery window that will pop-up. Alternatively, select Add to Gallery in order to select already uploaded ones. Once you are done, click the Update Gallery button on the lower right side.
  3. Your Gallery Information” panel will look like this:
  4. You can re-arrange the order of images by drag & drop.
  5. If you wish to remove an image from the gallery, hover your mouse over it and click the X as shown below:
  6. By checking the Randomize order box your gallery images will appear in a random order which will change on every page refresh.
  7. When you are done, publish the gallery item.

If you need to add images after the gallery’s creation just follow the same steps.

Useful Plugins

  • CSSIgniter Shortcodes  You can use this custom made shortcode plugin to modify a variety of layouts and elements on your website. 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.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • WordPress Jetpack: You can use Jetpack to create a contact form instead of using Contact Form 7.

Image Sizes

The recommended image sizes for the Oikia theme are:

  • Fullwidth homepage slider: 1920×670px
  • Property slider: 850×530px
  • Post thumbnail: 750×400px
  • Square thumbnail: 555×555px (for horizontal layouts on agent & property listing, single agent & property pages & the carousel widget)
  • Map thumbnail: 320×190px
  • CI Item thumbnail (general listing page image): 555×400px