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.
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.
- 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.
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
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 the latest version of 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.
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:
Home this will serve as your homepage, assign to it either the Homepage template from the Page attributes panel on the right.
Blog this will be your posts page. Just create it, no further action needed.
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.
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.
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.
(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.
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.
The property details panel has nine tabs which will allow you to fill in all necessary info regarding your property.
- 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.
- 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.
- In the Pricing you can add the property’s pricing information.
- In the Attributes tab you can fill in area, bedroom, bathroom and garage numbers.
- In the Images tab you can add photos from the property and floor plans if you wish to do so.
- Similarly in the Videos tab you can add the URL of a YouTube/Vimeo video you have created for your property.
- 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.
- In the Agent tab you can select the agent that’s responsible for the property.
- 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.
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.
7) Changing Footer text
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.
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.
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.
To create a gallery using our gallery management system follow these steps:
On the “Gallery Information” panel click the Add Images button.
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.
Your “Gallery Information” panel will look like this
You can re-arrange the order of images by drag & drop.
If you wish to remove an image from the gallery, hover your mouse over it and click the X as shown below.
By checking the Randomize order box your gallery images will appear in random order which will change on every page refresh.
When done, publish the gallery item.
If you need to add images after the gallery’s creation just follow the same procedure.
Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out! Please visit our support Hub