How to Build an Architecture Site with OceanWP

Architecture websites belong to a specific type of business site category. They need to showcase your best work and encourage a potential client to purchase a project from you or at least contact you for a consultation.

If you’re building your architecture site with WordPress, you need a theme capable of allowing you to showcase your portfolio in a beautiful manner and get a potential client to take action.

OceanWP comes with several sections designed for that purpose, and it allows you to build an architecture site with ease. Let’s learn how.

Installing the OceanWP Parent Theme

First thing’s first, you need a theme capable of building an architecture website. Our OceanWP theme comes with 13 demos, one of them being an Architect demo designed and optimized for architects.

Head to OceanWP.org, and click Get OceanWP.

Download the theme, and save it to your computer. Sign into the admin area of your WordPress site, and go to Appearance → Themes. Click Add New, and then click Upload Theme. Click Choose File, choose the OceanWP ZIP folder you downloaded, and click Install Now.

Click Activate once the theme installs successfully. After you activate it, you’ll be prompted to install the Ocean Extra plugin. This plugin is required in order for the theme to function properly. Click Begin Installing Plugin to install it.

Click Install on the Install Required Plugins page. The plugin should activate automatically.

Importing the Architect Demo

The next step involves installing the Architect demo. If you’re an architect trying to set up your own website for you or your agency, you’ll find the demo simplifies the process of having to learn how to design and build your own website. The hard part has already been done for you.

If you’re a developer building a website for a client in the architecture industry, you’ll find this demo also simplifies the process for you, allowing you to get the project done in less time than you thought it would take.

This demo uses the free page builder plugin Elementor, our own social sharing plugin Ocean Social Sharing as well as the contact form plugin Contact Form 7, so we need to install those first before we import the demo.

Installing the Required Plugins

The instructions for this part are targeted toward architects designing their own websites. If you’re an experienced WordPress user, feel free to whip right through these installations.

Go to Plugins → Add New.

Let’s start with Elementor. Type “elementor” in the search field, install it, and activate it.

Click Add New again after you activate the Elementor plugin. Type “contact form 7” in the search field, install it, and activate it.

Click Add New again after you activate Contact Form 7. Type “ocean social sharing” in the search field, install it, and activate it.

This demo also uses a few of our premium extensions. These are the Ocean Sticky Header and Ocean Elementor Widgets extensions, to be specific.

The header in the preview of the Architect demo on our site uses a sticky header that remains static at the top of the page no matter how far you scroll down. If you want to replicate this effect on your own site, you need to purchase a license for the Ocean Sticky Header extension.

Similarly, if you want the blog posts carousel that appears at the bottom of the demo’s homepage, you need to purchase a license for the Ocean Elementor Widgets extension. This extension adds several custom widgets to the Elementor plugin, including the required Blog Carousel Widget.

You have two options when it comes to pricing. You can either purchase a Single Site license for both of these extensions at $39/year each or purchase the Core Extensions Bundle at $44.50/year. This bundle comes with six extensions, including the Sticky Header and Elementor Widgets extensions, that can be used on an unlimited number of websites.

If you decide to purchase the extensions, use the OceanWP documentation to learn how to install and use them.

Importing the Demo

Now we’re getting into it. Importing OceanWP demos requires the Ocean Demo Import plugin. Go back to the Add New plugin page, enter “ocean demo import” in the search field, install it, and activate it.

Go to Theme Panel → Install Demos.

Click on the Architect demo, and wait for it to install.

If you run into this error, you’ll likely need to import the demo manually.

Skip to the next section if the demo installed correctly for you. If you got the error above, follow along to learn how to import the demo manually.

Visit the OceanWP Sample Data Repository on GitHub, click Clone or Download, and Click Download ZIP.

Download the ZIP folder, and save it to your computer. Extract the folder, and open the extracted folder. Open the folder inside of the extracted folder, and open the Architect folder. If those instructions are a little confusing, do this:

1. Extract main folder.
2. Open oceanwp-sample-data-master folder.
3. Open oceanwp-sample-data-master folder.
4. Open architect folder.

We’ll need these three files in this folder:

We need to install the sample-data.xml file first. Back in WordPress, go to Tools → Import, and install the WordPress Importer.

Click Run Importer, and click Choose File on the next screen. Choose the sample-data.xml file, and click Upload File and Import.

The importer will ask you if you’d like to re-assign the demo posts to an existing user. Select the user account that will be used to publish blog posts on your site.

Some demos are very large. If you or your client are on a cheap, shared hosting server, do not tick the Download and Import File Attachments box. If you think your server can handle it, go ahead and tick it.

Click Submit once you’re done configuring these options.

Next, we need to import the customizer settings. We’ll need the oceanwp-export.json file for this. Go to Theme Panel → Import/Export. Click Choose File in the Import Settings section, choose the oceanwp-export.json file, and click Import Settings.

Next, we need to install the widgets, which is where the widgets.wie file comes into play. Install and activate a free plugin called Widget Importer & Exporter.

Go to Tools → Widget Importer & Exporter. Click Choose File in the Import Widgets section, choose the widgets.wie file, and click Import Widgets.

There are a few more steps you’ll need to complete on your own:

• Setting your menu locations in Appearance → Menu.
• Adding your widgets in Appearance → Widgets.
• Setting your homepage to Home by going to Settings → Reading, and selecting Home as your site’s static front page.

If you visit the frontend of your site, you’ll see the Architect demo has been imported.

However, architecture sites can’t just look pretty, as we hinted at in the beginning. They also need to serve a function. Be sure to download our 7 Features Every Architecture Site Needs to Succeed resource to learn how to optimize the content you add to the Architect demo.

On a side note, we have some terrific news for you! 🙂

Life is easy, and we want you to have more fun and less stress when it comes to building websites, especially if you’re just starting out.

That’s why OceanWP has partnered up with Cloudways to bring you your superior and the most unique WordPress experience yet 🙂

From now on, you can purchase the Ocean Core Extensions Bundle, choose one of the many OceanWP WordPress website templates you wish to start with, and get all essentials installed on Cloudways servers with just 1-click.

Good luck and be sure to ask any questions you may have in the comments below!