How to customize the Bayfront Child Theme for WPCasa

The way the Bayfront WP Casa theme looks before customizing.

If you are trying to make the Bayfront Child theme for WP casa look like the Demo theme, then you have found the right place.  Here are step by step instructions to make the child theme you just downloaded look like the one you see on their website.

When the WP Casa Framework for Real Estate website came out I fell in love with it. I especially liked the minimal theme, and the way I could integrate my IDX feed From Diverse solutions into it. But over the last few years, web styles change, so I was in need of an update.   At first I though about some other themes, and completely re-doing my Austin Real Estate website, but after a quick look through the web, I found the perfect solution, and it wasn’t a total start over for my WordPress website.

The Bayfront Child theme is a great step up from the more minimalistic, and basic design of WP Casa.  I like how it has the details I’m looking for above the fold like a large changeable background image with IDX search, featured listings (which I change to my sold properties), large contact buttons, and a full width page option for blog posts (no sidebars)

Plus the price was right too.  Since it is a child theme, it doesn’t cost as much as buying a new WordPress theme.

Finally there wasn’t as much of a learning curve, since I knew how the framework worked, and could easily update it.  The support forums over at WPCASA are really good, and have tons of useful tips, many of which I used for this tutorial.

But there are some tricks to making Bayfront WP Casa look like it should right out of the box, so without any more distractions, here’s how to make the changes:

The way the Bayfront WP Casa theme looks before customizing.
The way the Bayfront WP Casa theme looks before customizing.

 

The way the Bayfront WP Casa theme looks after customizing.
The way the Bayfront WP Casa theme looks after customizing.

The Homepage is your Face on the internet, and you want to put your best foot forward.  Every WordPress theme seems to take a bit of a different approach on how to customize it, but with the Bayfront theme it mostly customized through widgets.

Let’s start from the top of the page

Editing the Site Name and Logo

Bayfront Site Logo Original
Bayfront Site Logo Original

At the very top left of the site is a place for your site name or logo and tagline.  The demo version has the words “Bayfront” in white on the first line and wpCasa Real Estate Theme on the second.  I want to change this to my site name “EricEstate” with no tagline below.

The “Bayfront” logo is actually an image.  It is white lettering that is 220×22.  You can design a logo and upload it, but I prefer to use Text, which is super easy to do in WordPress.  Navigate to WP-Admin > Appearance > Theme Options and scroll down until you find the section that says Text Logo.  

Then just type in whatever you want your site title to be.  I wrote in EricEstate.

For the tagline, that gets added in a different place.  Go to WP-Admin > Settings > General and where it says Tagline (the second line) and your tagline.  I wrote in “Desires & their Completion“.  That line is mine, find your own 🙂

Editing the top menu

Bayfront Main menu location
Bayfront Main menu location

There are a number of places in the Bayfront theme for a menu to go.  The first place my visitors go to is the main menu location at the top right of the homepage.

Editing WordPress menus is very easy.  Lots of tutorials have been written on how to do it.  The hardest part is to know which location you are working on.

The original menu has 5 links:  Home, Properties, Blog, Parent Page, and Contact.  I’ll go over how to add each of these, and link to specific pages in this section.

Wordpress Menu editing screen
WordPress Menu editing screen

To begin editing the menu navigate to WP-Admin > Appearance > Menu.  This will take you to the menu editing page, which can look a bit confusing, but once you learn how to do, it it is pretty simple.

Create a brand new menu by clicking on the simple “create a menu” link at the top middle of the page.  This gives you a fresh start, and a brand new menu to work with.

Once you have a new menu, Let’s name and save it.  Think of a descriptive name (it can be anything) and type it into the name box.  Then click the “save menu” button to make it so.   You can always change the name, or even delete using the red link at the bottom of the page it, so don’t worry if you make a mistake.

Now we have to add the links in.  Then once we do, we choose where to put it.  Let’s do it!

The first link in the demo site is Home, and this is the easiest to do:

different kinds of wordpress menus
different kinds of links in a wordpress menu

Notice the five different kind of links you can have.  For the home menu, let’s use the custom links one.  Click the little grey triangle in the right side to expand the section.  Under the URL box, type in the URL to your website.  Be sure to leave the http://   Mine looks like: http://www.ericestate.com/

Then add the Link Text – This is the word you want to appear in the menu – so we want to use the word HOME.    I like to use ALL caps, but the example page actually uses only the first letter capitalized.  The choice is yours, of course because it is your website.

Then click Add to menu.

Voila  – you just created your first menu link.  You will notice there is a new box with the word home in the Menu Structure section.  The order of the items in this section is important, because it is how they will appear in the actual menu on your site.  But if you don’t enter them in the order you want, don’t despair, because you can drag them up and down to reorder them.  Once you have a couple try it out.  You can’t really mess it up, unless you don’t save it.

Next we want a Properties link.  This link jumps to the properties page.  And if you put your mouse over the properties menu, you will notice there are actually 2 more links that appear below it – Properties for sale and properties for rent.  This means you need to make 3 more menus.  If you haven’t created pages for these links or if you don’t have any properties yet, you can add the text, but it won’t link anywhere.

Use the Pages section of the Menu link builder.  and navigate to the page that contains the Properties info.  Check the box, and it will appear in the Menu structure area just below and even with the Home link you created.

Do this 2x more, once for the Properties for sale, and another for the Properties for rent.  The will be added the same way, but to make them appear only when you hover over the properties text, gently move them with your mouse a little bit to the right.

Repeat for the other sections you want to add.  Make sure you have already created the posts or pages you want to link to so when people click on the menu they will actually go to the requested page.

Finally, we need to choose where to put the menu.  For it to appear at the top, we want to select the Main Menu one that is in the Theme Location section.  When you are all done, click the Save Menu button – This is important otherwise all the work you did won’t be saved.

Now we’ve taken care of the very top of the page.  Time for more fun stuff.

Uploading a main image

Upload homepage image
Upload homepage image

This is the image that you see right off the bat.  On the demo site for BayFront it is a nice beach shot.  The demo also has a search box overlay with the words “Find your Dream Home”, but that will come next.

Go to: WP-Admin > Appearance > Header

We want to upload an image.   Click the Add new Image button.

If you’ve never used the Media uploader in WordPress just google it or search youtube for a quick tutorial.  You can even upload multiple images and it will rotate through them so a different one appears each time someone visits your site.  Just be sure you have permission from the photographer to use the image you use.

Again be sure to click the Save & Publish button to make the changes take effect.

Adding the Search Box, and text above it

So far, all the changes we’ve been making to create the same home page as the Demo Bayfront WP casa theme have been pretty straightforward, and used the stock WordPress theme.

However, for the Text and Search box to appear we need to visit a new section, and use a little bit of code to make the desired effect.

Click on over to WP-Admin > Appearance > Theme Options.  This section is a unique page that comes with the WP casa framework.  There are several important tabs, and we want to edit the Layout one.

Edit the WP CASA Header text
Edit the WP CASA Header text

In the Layout tab there are several different sections:  The one we are interested in is the one for the Header.  It looks innocuous enough, just an area where you can add some words, but with a little bit of creativity, and a bit of shortcode, and we will get the same results as the demo theme.

Enter this exactly in the text box  Be sure you have the text tab selected, and not the visual tab for it to work properly.

<div id=”hero”>Find Your <em>Dream</em> Home!</div>

[listing_search]

The first line has the text “Find your Dream Home” with the word Dream emphasized (you can see the code around it), and the second line is called a shortcode.  This shortcode in particular calls the listing search box for WPcasa.

If by mistake you cut and paste this into the Visual tab of the editor, you won’t see this appear on your home page.  This is because the visual editor displays every symbol, bracket, and parenthesis like you typed it out.  The Text editor tab converts these special symbols to code.

Now, scroll to the bottom of the page and click Save Options.

Whew, that was a lot of work.  But now we have all of the content area above the fold (the area that you naturally see on the screen before you have to scroll down) looking just like the Demo page.  Congratulations!  We are done with the hard part.

Latest Properties

WP Casa Homepage Widgets
WP Casa Homepage Widget sections

Immediately below the Main image with search bar in the Demo of the Bayfront Theme is a Featured Properties section.  It is important to note that this section is surrounded by the same blue background that is part of the upper header section.  This tells us something important.

A major part of the WPCasa framework is that it uses widgets in different sections.  You can see the major widget sections in the image on the side here ->  Note that this photo is for the WP casa framework without any child themes.  But it still works the same way.

Up to now we have been working using stock Wordperfect features.  Now we are going to begin to make changes using the widgets.

So the next thing is to learn where the widgets are located, and how do we edit them?

Widgets are really simple to do.  Basically, they are zones where we can drop in pre-made content.

There is the Home Page Top zone at the top, the Home Page Content and Home Page Sidebar just below that, The full width Bottom Home page Section, and the Footer Section.

Let’s navigate to WP-Admin > Appearance > Widgets and see what we’ve got.

Widgets Control Panel for WP Casa
Widgets Control Panel for WP Casa

There are two major sections to the widgets control panel – the actual widgets on the left (called Available Widgets), and the widget areas on the right – starting with the General Sidebar, Active Sidebar, etc…

We want to add some content to the home page Top area.

WP Casa Widget Location
WP Casa Widget Location

Simply find the widget called ::wp Casa Latest Listings and click on it.  It should expand to show all the different locations that you can put it.

Select the Home Page Top one and click “Add Widget”

It will appear in the Home Page Top widget area on the right side.

You can also drag and drop it into position if you want, but sometimes I find there are so many widgets it’s better to do it that way.

Once it is in position, it’s time to customize it and make it display the content we want to show.

Click on the little grey triangle in the Home Page Top widget to expand it (if it isn’t already expanded) and then click the little triangle next to the ::wp Casa Latest Listings to expand it and show all the options.

WPCasa Latest Listings
WPCasa Latest Listings

The Title:  This is what is displayed on the home page.  If you put in “FEATURED LISTINGS” that will make it look like the Demo of the child Bayfront  theme.

The Filter:  This is where you choose what things you want displayed.  As before you will need some sample content you will need to have at least 4 properties.  Use the pull down menu to select the type of property you want to feature

The Number of Posts to show:  Make this 4 to mimic the demo.

Number of words in Excerpt:  I have 10 as my number

Width:  1/4 since you have 4 properties, this evenly divides the space into quarters.

Then click the blue save button and you are good to go.

Second Menu Bar

Right below the Featured properties is another menu bar.  This one is aligned to the left side of the page, and is called

Cruise on over to WP-Admin > Appearance > Menu again and create a new menu just like you did before.

This time you want to create six different main categories and a lot of other sub-categories for drop downs.

Here’s how the menus should look:

  • Latest
  • Sales
  • Rentals
  • Locations
    • Alicante
    • Barcelona
    • Cartenega
    • Costa del Sol
  • Property Types
    • Apartment
    • Country House
    • Finca
    • Loft
    • Villa
  • Agents
  • Properties Map

Remember, you will need to have a page or post written so you can navigate to each of these pages when they are clicked on.

Now we are more that halfway done.  You know about WordPress menus, and wordpress widgets, and those are some of the more difficult things.  The rest is smooth sailing.

Latest Properties

WP Casa Home Page Bottom
WP Casa Home Page Bottom

If you look carefully at the location of the widgets for the WP Casa Theme, you should notice that the next section the Home Page Content area isn’t a full width section.  It’s also not in the Blue are that defines the header widget area. From this we know two things.  It’s in a new area, and that area doesn’t go all the way across the page.  It is split up with the sidebar section in a 70/30 split (or so).

Because the Home page content area isn’t a full width section, and if you look carefully at the Bayfront Demo, you will notice that the next section (Latest Properties) does go all the way across the page.  The only way to do that is to skip the Home Page content, leave it blank, and add another widget to the Home Page Bottom area.  And that’s 100% OK to do.

We are going to use another ::wp Casa Latest Listings but with some different settings to show the same information for different properties with a different look.

Take a look at the screen shot for the widget settings – notice that we are still displaying 4 posts, but this time it is in a 2/4 width.  That gives us a small grid with 2 properties on top, and 2 below – with bigger photos and a white background.

Neat-O!

Want to Sell your House Button

WPCASA Buttons
WPCASA Buttons`

I’ll be honest, one of the major reasons I purchased the WPCasa theme was because I liked the style of these buttons.  The just match the overall theme seamlessly.  They are made to be a part of it.

And it is super easy to add them when you have the theme.

Still working in the Widget area, and still in the Bottom widget area (because the button spans the entire width of the screen), select the ::wpCasa Call to Action.  This is one of my favorite widgets and I love to use it as much as I can because it makes my site look more professional.

Title:  This is what appears in bold in the CTA (Call to Action).  It needs to be an attention grabbing headline.  “Want to sell your House?” Does the job nicely.

Text:  Write in a short paragraph of compelling text.  The goal is to get the reader to click on the button.  That’s all you want them to do.  Try out some A/B testing or different variations of text on several different pages and see what performs the best.

Button:  This is the link the button goes to.  In the Demo example it doesn’t link anywhere, but I’d link to a landing page if I were you.

Label:  This is the text on the button.  Again, it needs to be compelling to get people to click.

The last option is the “Open link in new tab or window” and if it is checked, a new window will open and the user will be directed there, otherwise the link will open in the same page.

Latest News Section

Moving right along, there are only a few things left to change to get your originally blank Bayfront Child Theme from WPCasa looking like the Demo theme.

WP Casa Latest News
WP Casa Latest News Widget

You probably work pretty hard blogging, and creating evergreen content for your readers.  Am I right?  Do you dominate long tail real estate searches?  Now we are going to create a little News section where your 4 latest blog posts are automatically shown.

As you might have guessed, this is also a widget in the home page bottom section.  Go to WP-Admin > Appearance > Widgets and find the :: WPcasa Latest Posts widget. 

Click on it, and add it to the bottom home page section.  You are getting to be a pro at this now.

The tricky part with this one is getting only 2 blog posts to show up, and have them be side by side.

Select 2 as the number of posts to show (you can of course show more if you want).

And to get the 2 to appear next to each other choose the width to be 2/4  That divides the page in half perfectly.

Be sure to hit the save button, and you are set!

Another CTA box

The very last element of the Bottom section is another ::wpCasa Call to Action 

You make this exactly the same way as you did the one before.

Yep, you can have the same widget in a section an unlimited number of times.  If you wanted 20 of these in a row, all you need to do is add it 20 times, and write 20 unique call to actions.

wpCASA Footer Section

Now that you are done customizing the entire page, from the header to the bottom of the main section, we need to spend a little time on the often forgotten footer.

WPcasa Footer Bayfront Child theme
WPcasa Footer Bayfront Child theme

The Bayfront Child theme footer is simple, but not bland.  There are three parts to focus on to make it identical to the demo theme:  A menu, Social Share Icons, and Footer Text.  Pay attention, because this will be fast, now that you are a pro customizing WP casa themes.

The blue color is a carryover from the header section.  I don’t know how to make a custom color using the WP Admin screen, but I know it can be done with Custom CSS in your stylesheet.

Footer Menu

To add the 3rd and final menu, just follow the same instructions as before.  Click to WP-Admin > Appearance > Menu and follow these simple (same) steps:

  1. Create a new menu
  2. Name it
  3. Add links
    1. customize text if desired
  4. Save it

Social Share Icons

Editing WP Casa Social share button
Editing WP Casa Social share button

Everybody is on Facebook, Twitter, LinkedIn and more today.  If you aren’t you are missing the party!  The Bayfront theme comes with an easy way to add social proof to your website.  It’s simple to customize, and link right to your pages on Social Media.  Just follow these easy instructions:

First go to the Theme Options page for Bayfront WP-Admin > Appearance > Theme Options.  You’ve been here before to customize the header text.  Now you need to click on the  5th tab the one labeled Social.

For each social media site you want to add, there are 3 steps.  Add an icon, add a link, name the link.

The Bayfront theme comes with a bunch of pre-made social media icons that match the theme beautifully.  Use the pull down selector to find the one you want to add.

Then add the direct link to that page.  I just go to Facebook or Twitter, or whatever, and visit my profile page.   I copy the URL and then paste it into this box.

Finally to name the button, enter the name of the social media network.

Ta-DA!

Editing Footer Text

There is one last section you can edit in the Bayfront Theme.  At the very bottom of the footer is some additional text and links.

WP Casa Footer Section
WP Casa Footer Section

There’s no need to go into the CSS files and do hard coding to make stuff appear here.  Just visit the WP-Admin > Appearance > Theme Options page and click on the Layouts tab.

Scroll to the bottom and where you see WP-Admin > Appearance > Theme Options, that’s where the text goes to appear at the very bottom of the footer.

I personally like to customize this a little bit, and add the logo for my brokerage, but you can do whatever you want.

You now have the tools to go crazy if you want.  Make the site your own, and know that you have the information needed to restore it back if you want to.  Like I tell my clients, you can’t break it!


 

I’d love to learn if you found this tutorial helpful.  The best way to do that is to leave a comment below.  Also I’m all over Twitter, and will respond immediately if you contact me there.

Of course, if you have any questions, or want more detailed instructions, please leave a comment below.