How To Make A Wedding Website In WordPress — Including An RSVP Contact Form (Using 1-Click Import Astra Starter Websites)

Home » WordPress Design » How To Make A Wedding Website In WordPress — Including An RSVP Contact Form (Using 1-Click Import Astra Starter Websites)

Wedding-Website

Want to create a beautiful wedding website in WordPress?

I will show you how to create a wedding invitation website with an RSVP contact form, but also transform it into a full-scale wedding (or wedding services) website with a gallery and contact page. We’ll be using Astra’s Ready Websites (they have multiple wedding themes to choose from depending on the type of site). These are all pre-built themes that are 1-click import. All the content is already there; you just have to swap it out with yours and make customizations.

We’ll be using SiteGround’s hosting who was rated #1 in numerous Facebook polls and are worlds better than what most bloggers refer you to (Bluehost) in terms of speed, support, and reliability. And by creating your wedding in WordPress, it also means you will own it forever (no pun intended), unlike other wedding websites that are created on The Knot or Wedding Wire.

 

1. Get Domain & Hosting

Domain and hosting are usually the only costs of building your own wedding website.

I recommend getting them through SiteGround since they were rated the #1 host in many Facebook polls and have better speed, support, and reliability than other companies like Bluehost (who is owned by EIG) which is what most people refer you to because of their affiliate commissions. But when you do your research, SiteGround has a better reputation.

2019 Hosting Poll

2017-WordPress-Hosting-FB-Poll

Elementor Hosting Recommendations

July 2019 Hosting Recommendation

WordPress-Host-Poll-Aug-2018

2016-WordPress-Hosting-FB-Poll

Favorite Hosting For Elementor

2018 Hosting Recommendations

WordPress Hosting Poll Sept 2018.png

First, sign up for a SiteGround plan. Their StartUp plan is good and only $6.99/month, unless you need to host multiple wedding websites, in which case you would need the GrowBig plan.

SiteGround-Plans

Next, during the sign up process, choose your domain, hosting plan, and server location. Most people don’t need domain privacy or SG Site Scanner; the options with the lowest cost is fine.

Wedding-Account-Setup

 

2. Install WordPress

Once you fill everything out and sign up, SiteGround will send an email with a launch wizard.

SiteGround Confirmation

Click “Start a new website,” select WordPress, then create your WordPress login details.

SiteGround Setup

Now your hosting account is ready to use!

 

3. Login To Your WordPress Admin

After you install WordPress, SiteGround will send you an email with your WordPress login.

Wedding-Website-Account-Setup

So go ahead, login. Welcome to the WordPress dashboard, take a look around!

Wedding-WordPress-Dashboard

 

4. Secure Your Wedding Website With SSL

Adding SSL makes sure all links and images on your wedding website are using the HTTPS (instead of HTTP). To add SSL, login to your SiteGround account go to My Accounts → Go To cPanel. In the Security settings, click “Let’s Encrypt SSL” and activate it on your domain name.

Wedding-Website-SSL

Next, in SG Optimizer go to Environment Optimization → Enable HTTPS. SiteGround prompts you to force HTTPS and have them automatically configure the settings, which you’ll confirm.

Enable-HTTPS-SG-Optimizer

Here’s with SSL:

Wedding-Website-SSL

Here’s without SSL:

Insecure-Wedding-Website

 

5. Import A WordPress Wedding Theme

We’ll be using the Wedding Invitation Theme by Astra in this tutorial.

Astra has multiple wedding themes that look great, are easy to customize, and are mobile responsive. The Wedding Invitation theme is the only free wedding theme from Astra, but they also have other Agency (premium) wedding themes that require a premium Astra account.

Step 1: Go to Plugins → Add New, search for Astra Starter Sites. Install and activate the plugin.

Astra Starter Sites

Step 2: You will be prompted to install and activate the main Astra Theme. Go ahead and do it.

Astra Theme Notification

Step 3: Select Elementor which is the fastest, most user-friendly page builder for WordPress.

Select Page Builder

Step 4: Find a theme you want to use for your wedding website.

Wedding-Theme-Search

Step 5: Once you’ve chosen a nice wedding theme you like, click it and you’ll see the option to Import Site. When you do this, Astra will download the entire pre-built website onto your domain including the required plugins, WordPress customizer settings, widgets, and content.

Import-Wedding-Theme

Importing-Wedding-Website

Step 6: When your theme is done downloading, refresh your website; it’s ready to customize!

Wedding-Website

Alternative Wedding Themes – there are plenty of free and premium WordPress wedding themes to choose from, including in WordPress under Appearance → Themes. There are also theme stores like ThemeForest or StudioPress. But I still recommend using an Astra theme.

Free-Wedding-WordPress-Themes

 

6. Name Your Wedding Website

You will name your wedding website in WordPress under Settings → General. Leave the tagline blank and don’t change the WordPress Address or Site Address since it can break your website.

Wedding-WordPress-Title

 

7. Design The Homepage

If you’re using a wedding theme from Astra, the homepage is pre-designed.

To edit it, go to Pages → All Pages → hover over the homepage → click “Edit With Elementor.”

Edit-With-Elementor

Now you can change the page’s layout, content, and design. Nearly everything is point and click.

Edit-Wedding-Homepage

Elementor also has tons of YouTube tutorial videos, but it’s very user-friendly.

Use Elementor Block + Page Templates – the easiest way to change a page’s layout/design is with Elementor’s templates. Click the “folder” option when editing a page, then choose from blocks (individual blocks on the page) or full page templates (a completely pre-designed page). They have templates for wedding pages, RSVP contact forms, gallery pages, and much more.

Add-Elementor-Templates

Elementor-Wedding-Templates

 

8. Create An RSVP Form With Wedding Details

WPForms is a contact form plugin that lets you easily build an RSVP form for weddings. If you’re using an Astra theme, chances are it’s already being used for any forms on your website. On the Wedding Invitation theme, an RSVP contact form is already built-in to your homepage.

Wedding-Contact-Page

To edit it, in your WordPress dashboard, go to WPForms → Edit → Contact Form. You can customize where the email is sent to and add or remove fields by dragging and dropping them in the editor. In the WPForm settings, you can also add new contact forms or customize them.

To add a contact form, edit a page with Elementor, then select the WPForms widget. Select which contact form you want, then add it to the page. Drag and drop where you want it to go.

Add-WP-Forms

WPForms-Builder

 

By default, Astra’s wedding theme only comes with a single page (the homepage).

You can add additional pages under Pages → Add New. To create a gallery page, simply add a gallery in Elementor’s widgets. Search for “Gallery,” choose an option, then add your images. You can change the size of the images in the gallery and make it a 2, 3, etc column layout. You can add a gallery to your homepage the same way; it just depends which page you want it on.

Add-Wedding-Gallery

Just one example:

Wedding-Gallery-Page

 

Some wedding themes are 1 single page and don’t have a built-in navigation menu.

If you want to add one, this section shows you how.

Step 1: Create Your Pages – you will need to create (publish) the pages you want in your navigation menu. They don’t have to be fully designed, but they do need to be published.

Wedding-Pages

Step 2: Create A Navigation Menu – once your pages are published, create your navigation menu under Appearance → Menus. Drag and drop the pages from the left to your navigation menu on your right. You can create a dropdown menu by dropping the page with an indent.

Wedding-Menu

Step 3: Customize The Navigation Menu – you can customize parts of your navigation menu and header under Appearance → Astra Options including the layout on both desktop + mobile.

Wedding-Header-Layout

 

11. Customize The Website’s Design

Almost every global customization can be done under Appearance → Astra Options.

Astra-Options

This is where you change fonts, colors, upload your logo, and customize the header/footer. The Astra Options make it very easy to do basic customizations on your WordPress wedding website. Many Astra Options will lead you to the WordPress Customizer where you can edit other global options. Be sure to go through both the Astra + WordPress Customizer options.

Adding the logo:

Wedding-Site-Identity-Settings

Changing colors:

Customize-Wedding-Colors

Customizing the footer:

Wedding-Footer

 

12. Customize Your Mobile Wedding Website

All of Astra’s wedding themes are mobile responsive.

This means your wedding website will automatically format for desktop, phones, and tablets. However, if you want to change something specific on your mobile website, you can do that using Elementor’s responsive mode. Simply edit a page with Elementor, then near the bottom left of your screen you will see a Responsive Mode Option. This will let you view how the page looks on desktop, mobile, and tablet. Just like you would edit any page in Elementor, you would do the same for your mobile site. Just point, click, edit, and save! You can do this for any page.

Customize-Mobile-Wedding-Site

 

13. Customize How Your Website Looks In Google

For a wedding invitation website, you probably only need to customize the homepage. But for more robust wedding websites (those offering services and wanting to rank higher in Google to get more customers), you will want to create a page for each service and customize it’s snippet.

Here’s how to customize how your pages look in Google:

  1. Install the Yoast SEO Plugin
  2. Edit your homepage and scroll down to the Yoast SEO section
  3. Write your homepage snippet (the SEO title + meta description)
  4. Try to follow the character limits (the bar in Yoast should be green)

Wedding-Yoast-Snippet

And if you’re targeting wedding service keywords, here’s how to find them:

Wedding-Keywords

If you want to go a step further, sign up for a free Google Search Console account, verify your domain, then submit your Yoast XML sitemap in the Sitemap section of Google Search Console.

Wedding-Website-Sitemap

 

14. Make Your Website Format Nicely On Facebook

Want to make your wedding website look nice on Facebook?

To do this, you will need the Yoast SEO plugin. Once installed, edit your homepage and scroll down to the Yoast SEO section, head to the Social tab, then click the Facebook + Twitter tab.

Yoast-OG-Image

Here, you can upload custom images to both social media networks so the image formats nicely when your wedding website is shared. You can even customize the title and description on social media. Facebook’s image dimensions are 1200 x 630 pixels, Twitter’s are 1024 x 512px.

Without custom images:

Wedding-Sharing-Before

With custom images:

Wedding-OG-Image

 

15. Add A Blog

Want to add a blog to your wedding website? Here’s how.

Step 1: Add a page called “Blog” and publish it.

Step 2: In the WordPress customizer → Homepage settings, set the blog page as “posts page.”

Add-Wedding-Blog

Step 3: Choose if you want a sidebar or make it full-width.

Add-Sidebar-To-Wedding-Blog

Step 4: Create a blog post with an image and some text.

Wedding-Blog-Pag

 

16. Make Your Website Load Quickly

There are a few easy things you can to make your wedding website load faster.

First off, use GTmetrix as your speed testing tool since it provides several benchmarks (load times, scores, requests). Next, follow the 4 recommendations listed below. I have a full guide to optimizing slow WordPress sites but for a simple wedding site, you shouldn’t need to do much.

Wedding-Website-GTmetrix-Report

  • Configure SG Optimizer – this plugin has additional settings that can make your site load significantly faster. I recommend enabling everything in the Frontend Optimization tab, then enabling lazy loading in the Media Optimization tab. You probably don’t want to optimize images (compress them) to avoid loss in quality.
  • Activate Cloudflare’s CDN – in your SiteGround account, go to My Accounts → cPanel → Cloudflare → Activate Free (see below). This activates Cloudflare’s content delivery network which hosts your site on 200+ data centers around the world, reducing the geographical distance between your server and visitors.
  • Avoid Slow Loading Plugins – avoid installing these 65+ slow plugins.
  • Avoid Uploading Huge Images – avoid uploading oversized images (otherwise you will see serve scaled image errors in your GTmetrix report). For example, if your Elementor gallery images calls for 1024 x 1024px, use those dimensions!

Wedding-Website-Cloudflare-Activation

 

17. Install Basic WordPress Plugins

For a simple wedding website, you probably don’t need too many plugins.

Below are the somewhat “mandatory” plugins I would install on your website. Between all these, they will help you with design, security, backups, and controlling your Google snippets.

  • Duplicate Page – duplicate pages on the fly.
  • Elementor Pro – paid plugin with more templates.
  • iThemes Security – 1-click security plugin.
  • SG Optimizer – SiteGround’s plugin that comes pre-installed when you setup their WordPress hosting and launch wizard. Go to the settings, then some things you want to do are force HTTPS, select managed PHP, and enable minfiication and combination of files (makes your wedding website load fast).
  • UpdraftPlus – free, easy, and lightweight backup plugin.
  • Yoast SEO – SEO plugin which lets you control how your website appears in Google. Once installed, edit a page, scroll down to the Yoast SEO section, then edit your SEO title + meta description and write custom ones. It will take a few days for these to update in Google. The Yoast settings have additional options.

 

Get A Custom Wedding Website Design

If you want something a little more special (custom), contact our team. We build custom designed wedding websites in WordPress. Of course if you’re getting married, chances are you’re already on a tight budget! If you have any questions on build a wedding website in WordPress, comment below and I’ll get back to you as soon as I can. Hope this was helpful!

Cheers,
Tom

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments