About Oikia

Oikia is our first real estate WordPress theme. It is designed to help you promote your properties in a clean and efficient way. It features two custom post types, Properties and Agents. The above act as standard WordPress posts but each of them has extra fields or custom layout which differentiates them from the former. The homepage is comprised of the homepage slider which displays properties of your choosing and custom widgets specially crafted to bring those custom post types together as discussed later on in the documentation.

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.

Image Sizes

The recommended image sizes for the Oikia theme are:

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

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.
  • 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 this to create a contact form instead of Contact Form 7, insert sharing buttons etc.

Importing sample content

The easiest way to get started and find your way around using this theme, is by installing it into a fresh WordPress installation, and importing our sample content.
To get it go to CSSIgniter settings > Site Options, scroll all the way down and click the Download sample content link. Extract the zip file you downloaded and upload the xml file in Tools > Import > WordPress (if not already present, you will be prompted to install the WordPress importer plugin), assign the authors to an existing user and make sure you check the “import attachments” box. You can now import the sample content.

You can also download the Sample Content for Oikia by clicking here

Once the sample content is imported, navigate to Settings > Reading and set the “Home” page to be your static frontpage and the “Blog” page as your posts page, as demonstrated in the image below.

ReadingSettings
then navigate to Appearance > Menus  and set the imported menu to be your main theme’s menu.

 

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the oikia_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Setting up your theme

1) Creating theme pages

Let’s start by adding 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 either the Homepage template from the Page attributes panel on the right.
  2. Blog this will be your posts page. Just create it, no further action needed.
  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 will display 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.
    property_listing
  5. Agent Listing this page will display 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.
    agent_listing

(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 and set the “Home” page to be your static frontpage and the “Blog” page as your posts page, as demonstrated in the image below.

ReadingSettings

2) Populating your blog

To add new posts to your blog, go to Posts > add new, title your post, 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, if you so desire, from the respective panels and publish the post by clicking “Publish”.

3) Adding Properties

Let’s move to the most important bit, adding our properties. Start with creating the various attached info for your properties, like types, statuses, amenities and locations. Go to Properties > Types  and create a few, for example condos, villas, apartments etc, next go to Properties > Statuses and create new ones, like “for sale”, “for rent” etc, 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 are done adding the info 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 we created before (type, status, amenities & location), next move to the Property Details panel below the main text editor.

property_details

The property details panel has nine tabs which will allow you to fill in all necessary info regarding your property.

  1. In the General tab you can fill in the property ID to help you and your clients refer to and identify a property, set open house date/dates and select whether this will be a featured property, which will place it 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 you won’t lose your competitive advantage by revealing the property’s exact location.
  3. In the Pricing you can add the property’s pricing information.
  4. In the Attributes tab you can fill in area, bedroom, bathroom and garage numbers.
  5. In the Images tab you can add photos from the property and floor plans if you wish to do so.
  6. Similarly 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 the customer get a better idea on the area where the property is located, like crime rates, air & noise pollution etc.
  8. In the Agent tab you can select the agent that’s 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, add a featured image, any relevant text in the text editor and move to the Agent Details panel below.

agent_details

in the Contact tab you can fill in the agent’s contact details and in the Social tab links to the agent’s social profiles in the 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 and create a menua, name them “Main menu”. Customize it by adding menu items and then go to “Manage Locations”, set 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 on Oikia consists of the slider and the Homepage widgetized area. You can access this area and add content to it in 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 we have three slider items, a CI Property Filters widget to create the search bar, a CI Latest Posts widget which displays the latest four properties in a two column layout, a CI Hero widget, a CI Properties widget which displays four random properties by a selected agent, a CI Items widget which displays two agents in a two column layout, the CI Property Map widget and finally a CI Carousel Latest widget displaying the latest 15 properties in a carousel.

The theme’s footer features an area for you to enter your copyright info, 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 info displayed on the header you need to 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 need to select the default properties search page and you can also set the default area unit & currency symbol, finally you can select the automatic property ID box, so the theme assigns IDs to your properties automatically, if you don’t have a predefined ID scheme of your own.

11) Widgets

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

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.

ci_page_builder_template

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.

Additional Information

Creating Galleries

To create a gallery using our gallery management system follow these steps:

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

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

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums