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.

Architect demo

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 Extra 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! 🙂

OceanWP and Cloudways 1-click WordPress website template install

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!

Brenda Barron

Brenda Barron is a writer from southern California specializing in business and WordPress.

This Post Has 20 Comments

  1. jivansutra

    I like The great pleasing Look of Oceanwp. But like other themes i’m unable to edit the text of demo files which is in a bizzare language. can you give any hint. I wasted my whole day just to find how to edit it. Why did you make correction so complicated, while with other themes it was just a matter of few minutes.

    1. Hello, what text? The text of the posts are dummy text, you can edit it by modifying your posts, there is nothing complicated.

  2. Magalie Laniel

    Hi,
    I also have an issue with customizing the demo I imported (stylish). When I clic on a page (in wordpress dashboard) and want to edit in Elementor, I get this error: “Sorry, the content area was not found in your page. You must call the_content function in the current template, in order for Elementor to work on this page.” I am only able to edit the home page, or create a new page. So the “demo template” seems incomplete. Any help will be appreciated!
    Thanks!

  3. victor

    $44.50/yearis the extensions bundle pricing in this writeup.

    1. Nicolas Lecocq

      Hello, if you look at the post date, it was released on March 11, 2017, the price of the bundle on that date was $44.50, since, I have added several premium extensions so the price has increased.

  4. victor

    Can beaver builder be used instead of elementor for the demo. also where are the links to other demos required plugins.

    1. Nicolas Lecocq

      You can use Beaver Builder with OceanWP but all the demos have been created with Elementor, so the pages created with this plugin will only work with it.
      For the pro demos, the required plugins links are in the documentation.
      If you have more questions, feel free to ask them here: https://oceanwp.org/pre-purchase-question/

  5. rovin singh

    mam how to remove menu below content

    1. Alex de Borba

      At OceanWP, we are very apologetic of not comparing us to others, everyone runs their business to the best of their capacities, and we are no different. OceanWP user base should be enough to show how much we have accomplished, as well as the feedback left by the community.

  6. Jafar

    I used OceanWP for my website.
    but I can not add telegram Icon and change the menu like my home page. for example my Blog has different menu to my home page.
    THANKS FOR YOUR ADVICE

  7. vivek

    Thank you for sharing wonderful information, I always follow your articles.

  8. Agboola Damilola

    Great to join the OceanWP Family. really appreciate your work here.

    1. MarkoS

      Hello Agboola, welcome to the OceanWP Family!

  9. Guide

    Thank for this particular demo, I love this theme so much.

  10. Razeakhar

    I like Oceanwp, is that fast enough? thanx in advance. I want to switch Oceanwp.

    1. MarkoS

      Hello Razeakhar, thanks for stopping by 🙂 OceanWP performs just as all other themes labeled as the fastest, even though it offers much much more optimization options. So even if you’d like to create a fully loaded website (compared to standard blog sites), you still wouldn’t lose performance. However, the end speed or page scores depend on your hosting primarily and your website building skills – optimized images, usage of CDN and caching, avoiding excessive slider or animation usage etc. Each page will have different speed / scores. While choosing a good and well-coded theme is really important for variety of reasons that do not just concern speed, it all comes down to you and your skills

Leave a Reply to Nicolas Lecocq Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.