Developing a WordPress theme for a real estate website can be a long process. In this article, I will explain the process of creating a website for a real estate agency and explain methods and best practices that are not only standard to WordPress, but also to make it easier to develop such a site.
What This Article Is About
This article will show a simple HTML 5 layout with some CSS 3. It will also include the structure as created by WordPress with a combination of WordPress functions and additional PHP code. We will also include a top navigation menu from WordPress.
Planning the Requirements of the Real Estate Site
We first need to plan the exact WordPress functionality and features that we will be using in addition to the HTML 5 and CSS structure that we will be creating.
Planning the Web Pages and WordPress Code That We Will Be Creating
Since our theme will revolve around a real estate agency, we will be performing the following actions:
- Create a home page that will list news from the agency
- A sidebar for listings as well as the featured salesperson of the month
- A top navigation menu to display some links to other pages.
- A footer that displays the current date and other legal information about the real estate agency.
- A simple web page to display full content for listings, news, and salespeople
Using the WordPress Features to Create Our Various Web Pages
The Home Page – Our home page will be a simple HTML 5 web page with a main column and a sidebar. Our main column will contain news about the agency, maintained by the WordPress administrator entering posts with a category of “news”. The sidebar will include the titles of the 10 newest listings with links to the full listing. Also, we will include one salesperson of the month with a bio and a photo.
To have listings and the featured salesperson show up, the WordPress administrator will add all listing posts to a category called “listings”. Although all salespeople posts will be added to a category called “salesperson”, the WordPress administrator will add a tag called “featured” to the one salesperson who will be featured.
Our listings page will contain five of the most recent listings with a link displayed as the title.
Step 1: Preparing the WordPress Folder Structure
Add a new folder to your wp-content/themes. Call it “realestate”. Create five blank PHP files which will conform to the WordPress standard for all themes. The files will contain these titles:
- index.php – Since index.php is the main file for all PHP sites, this file will be the file that always gets called when someone visits your real estate website and it will call the other files using standard WordPress theme functions.
- style.css – WordPress themes use normal CSS to format your HTML layout.
- header.php – All WordPress themes have headers and this is named exactly that.
- sidebar.php – Since we want to have listings and the salesperson of the month, we need a sidebar and this file will list the information here.
- footer.php – All standard WordPress themes have a footer, so all of your code will go into this file.
- single.php – To display full posts of single posts for listings, news, and salespeople.
The HTML will be broken down into these files and I will go through each one with the corresponding HTML 5 and PHP by the following steps:
Step 2: Creating Our Header With header.php
<!DOCTYPE html>
<html>
<head>
<title> ABC Real Estate Agency </title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<header>
<div id="header">
<nav>
<?php
if ( function_exists( 'register_nav_menu' ) ) {
register_nav_menu( 'main-menu', 'Main Menu' );
}
wp_nav_menu();
?>
</nav>
<h1> Welcome to ABC Real Estate </h1>
</div>
</header>
Explanation of header.php
Here, I am simply creating the opening HTML and I use standard CSS attributes in my HTML including wrapper and header.
Some notes about header.php:
- I start the header with
<!DOCTYPE html>which tells the web browser that I want it to display the web page with HTML 5. - I wrap my entire header in the
<header>tag which is new in HTML 5. - I have added the standard
<link>tag to call my style.css, but I specifiedbloginfo('stylesheet_url')instead of saying style.css. WordPress knows how to use this code to load style.css automatically. - I started a
<DIV>for wrapper, but I do not close it. I will close it later in my footer.php file. -
I use the following code:
if ( function_exists( 'register_nav_menu' ) ) { register_nav_menu( 'main-menu', 'Main Menu' ); } wp_nav_menu();To create and display the navigation menu and in the WordPress administration screen, all of my links will be in the main menu link. Since I use “'Main Menu” as the second parameter in my
register_nav_menu()function, it will display in the WordPress administration screen for the admin to enter links. - I also use the
<nav>tag which is new to HTML 5 and describes the code as a navigation bar. Best practices dictate that this tag should be used only once in your HTML 5 document, although, it will not break the website if you need to use it more than once.
Step 3: Create the index.php, the File That Will Be Called When the Theme Loads
<?php get_header(); ?>
<div id="main">
<div id="content">
<h1> News From ABC Agency </h1>
<?php query_posts('category_name=news&showposts=10'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><? php the_content(); ?></p>
<hr>
<?php endwhile; else: ?>
<p><? php _e(‘No news has been reported at this time’); ?></p>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div style=” clear: both; ”></div>
<?php get_footer(); ?>
Explanation of My index.php Code
This is the entire HTML 5 that I am using in my theme. Since I want news to appear, we have to take into consideration that news may not be available. Otherwise, we can mislead people to see an unfinished website and that is not professional.
My first line: <?php get_header(); ?>
This executes my code from header.php.
The next three lines are standard HTML 5 and are simply <div> tags that display HTML using ID attributes that we can call with our style.css file.
The next line: <?php query_posts('category_name=news&showposts=10'); ?>
This is a very important line. It tells the theme that we want to show posts that only have a category of “news”. Without this line, our theme will print every post including listings and salespeople and we do not want that in this place. We only want news. If the real estate agency has new listings, then the WordPress administrator can list it as news, but the actual listings will not be published here as we save that for the sidebar.
The next line: <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
This is the line that creates a loop of our posts and since the previous line is using the query_posts function, only posts with a category of news will display in this loop.
One special line: <?php get_sidebar(); ?>
This line tells our WordPress theme to print the entire sidebar and will pull all of the HTML and PHP code from sidebar.php.
Another special line: <?php get_footer(); ?>
This line tells our WordPress theme to print the entire footer and will display all of the HTML and PHP code from footer.php.
Step 4: Our Sidebar Code in sidebar.php
<aside>
<div id="sidebar">
<h2> Latest Listings </h2>
<?php query_posts('category_name=listings&showposts=5'); ?>
<?php while (have_posts()) : the_post(); ?>
<h3><?php the_title(); ?></h3>
<?php endwhile;?>
query_posts( ' cat=1↦tag=apples&orderby=date&order=ASC ' );
<h2> Salesperson Of The Month </h2>
<?php query_posts('category_name=salesperson&tag=featured&showposts=1'); ?>
<?php while (have_posts()) : the_post(); ?>
<h3><?php the_title(); ?></h3>
<p><? php the_content(); ?></p>
<?php endwhile;?>
</div>
</aside>
Explanation of My sidebar.php Code
I start off with the <aside> tag which is new in HTML 5 and it tells the web browser that this is all sidebar text or the content is beside the main the content intended for the website visitor.
Next I add the HTML: <div id="sidebar"> which tells WordPress to format this <div> tag according to the CSS in #sidebar in my style.css file. The last line closes this <div>.
The next thing I want to do is display my latest listings and I start it off with the HTML: <h2> Latest Listings </h2>
To show the listings: I enter the line <?php query_posts('category_name=listings∓orderby=date&order=DESC&showposts=5'); ?>
This line of code will display any posts that have the added to the category “listings” and will display them in descending order, so every time I add a new listing, it appears first in my list.
The next three lines will display the actual listing titles with links to their full pages.
Finally, I want my sidebar to display the salesperson of the month and I also use the WordPress query_posts() function. Since all of my salespeople have a category of “salesperson”, I use the code <?php query_posts('category_name=salesperson&tag=featured&showposts=1'); ?> to show one salesperson. Notice, that I also added a tag called “featured”. Since I have more than one salesperson in my agency, I want to display only the salesperson I feature and in the WordPress administration screen, I add a tag called “featured” to any salesperson that I want in this section, so the query_posts() parameter for “tag” matches it exactly. I also narrow my results to just one post (in case the WordPress administrator tagged more than one salesperson as a featured post).
Step 5: Creating My Footer Using footer.php
<footer> <div id="footer"> © <?php echo Date(‘Y’) ?> ABC Agency. All rights reserved. </div> </footer> </div> </body> </html>
This is pretty simple. I have a <div> and a </div> tag to include all of my footer information. I wrap the entire footer in my <footer> tag which is new to HTML 5.
Also, my last 3 HTML tags close my wrapper <div> tab as well as my <html> and <body> tags. I also use the PHP Date function to print the current year. I will point out that most webmasters hard code the current year and that is a mistake and bad practice. The reason for this is that when the new year changes on January 1, the previous year is still displaying unless the webmaster was waiting until midnight on January 1 to manually change the year. To make matters worse, most webmasters forget to change the current year for several years making the website look unprofessional and behind in its updates. Using this simple PHP date function will save the headaches for both the webmaster as well as the website owner and update the year automatically allowing the webmaster to focus on other, more important tasks.
Step 6: Creating the Single Page for News, Listings, and Salespeople
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> /* if have posts */
<div class="post" id="post-<?php the_ID(); ?>">
<div class="post-info">
<img src="<?php bloginfo('template_directory') ?>/images/authors/<?php the_author_ID()?>.jpg" alt="<?php the_author() ?>" alt="<?php the_author() ?>" title="<?php the_author() ?>" />
<em><?php the_time('F jS, Y') ?></em>
<span class="post-tag"><?php the_tags('', ' . ', ''); ?></span>
</div>
<div class="entry">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?> /* load post content in full version */
</div>
Here, I use simple HTML 5 to display the full post data when a hyperlink leads a website visitor to a post for listings, news, and salespeople.
Finally...
Step 6: Adding Your CSS With style.css
body {
text-align: center;
}
h1,h2,h3 {
color: #3399FF;
font-family:arial;
}
h1 {
font-size: 14pt ;
}
h2 {
font-size: 12pt ;
}
h3 {
font-size: 10pt ;
}
#wrapper {
display: block;
border: 2px #999 solid;
border-radius: 10px;
box-shadow: 3px 3px 7px #333;
width:92%;
margin: 0px auto 0px auto;
}
#header {
border: 2px #999 solid;
}
#content {
width: 75%;
border: 2px #999 solid;
float: left;
}
#sidebar {
width: 23%;
border: 2px #999 solid;
float: right;
}
#footer {
border: 2px #999 solid;
}
.title {
font-size: 11pt;
font-family: verdana;
font-weight: bold;
}
This CSS will create a main section with a sidebar on the right. I use some of my favorite colors, but you can change this CSS to suit the needs of the website or the website owner.
Conclusion
In conclusion, this is the standard way to create a WordPress Real Estate theme. It includes all of the main features of any real estate website including salespeople and listings. I also demonstrate the standard parts of any WordPress theme including the header, posts loop, footer, sidebar as well as single page templates. Furthermore, since HTML 5 is becoming mainstream, it is time to develop all WordPress themes in HTML 5 and I included some of the most popular and important HTML 5 tags.
Let us know what you think in the comments below!
Comments