Advertisement
  1. Web Design
  2. WordPress Themes

How to Make a Wedding Website With WordPress

Scroll to top

I’m getting married soon. And when the “wedding website” item reached the top of my to-do list, I thought to myself “Hey, I think I can do it. I only need to set up a new WordPress account, choose and install a professional theme and customize it. I got it.”

Well, if you’re a couple about to get married, want to build your own wedding website, and had the same thought process as me, this tutorial aimed at WordPress beginner users is for you. 

You’ll learn how to make your very own wedding website: from choosing your own domain, to having a functioning RSVP confirmation right in your email. If you also thought getting a professional WordPress wedding website up and running was as easy as I thought, buckle up. It will take more than a few steps, but we’ll get there!

After I learned how to set up a wedding website, I used a mockup from Placeit to show it!After I learned how to set up a wedding website, I used a mockup from Placeit to show it!After I learned how to set up a wedding website, I used a mockup from Placeit to show it!
After I learned how to set up a wedding website, I used a mockup from Placeit to show it!

Here you’ll find some tips and little nuggets of information that will help you along the way. We’ll go over the recommended web hosting services, why you need one, and what are the important things to look for in one. We’ll also go over why you need to use certain plugins and how to use plugins like Slider Revolution and Contact Form 7. Hopefully, at the end of this tutorial you’ll have a beautiful website whose creation process went seamlessly.

You can also take this as your guide for first-time WordPress premium theme users and adapt it to other types of websites. And don’t forget to check out these resources as well:

What We’ll Cover in This WordPress Wedding Website Tutorial:

  1. Who Should build a WordPress Wedding Website from Scratch?
  2. How Much are Wedding Websites?
  3. What to Include on Wedding Websites
  4. How to Choose a Premium WordPress Wedding Theme
  5. How to Choose and Set Up Web Hosting for WordPress
  6. How to Install and Access to Your WordPress Admin Panel
  7. How to Install a Premium WordPress Wedding Theme (with Plugins)
  8. How to Import Demo Contents
  9. How to Edit the Front Page and Inner Pages
  10. How to Set up a RSVP Form for Guest Confirmation

1. Who Should Build a WordPress Wedding Website from Scratch?

This project is for couples who want to have absolute customization control on their wedding website.

Using premium themes allows you to have full control on everything: from background color to the position of the last comma and link in your website. And you don’t need to be a web designer or know how to code. You just need time and patience. And to have fun while doing it! After all, you’re building an actual website that will serve a purpose and that your loved ones will visit.

On the other hand, if you’re looking to make a wedding website for free, this isn’t the route for you. You won’t depend on a third party, like a web designer, and you’ll save some money by going the DIY route. But it won’t be for free. Neither is it the route for you if you’re strapped for time or can’t spare a couple of weekends building this. Making a functional website takes time, but it’s so worth it at the end.

2. How Much are Wedding Websites?

If you want to know how much wedding websites are, that will vary greatly depending on where you’re located, what you’re looking for, and if you’ve hired a web designer. 

For this project, the cost of your wedding website will be the sum of the web hosting service you choose, plus the wedding theme you pick. So, between $100 and $150 USD for a website hosted for 12 months.

3. What to Include on Wedding Websites

What to include on wedding websites will change as well depending on the couple’s preferences. However, wedding websites serve a particular purpose and that is to share the details about a set event. The basic information you should include is:

  • Date, location and time of the event
  • RSVP confirmation
  • Gift registry information 
  • Specific details such as dress code and accommodation suggestions

Other nice optional details to include are:

  • Story of the bride and groom
  • Bridal party
  • Image gallery
  • Social media links

4. How to Choose a Premium WordPress Wedding Theme

Now that you know what to include on wedding website, let’s talk about how to choose the best WordPress wedding theme for your needs. If you want full customization control and the most professional result, a premium WordPress wedding theme is the way to go.

I’ve picked The Aisle, a WordPress wedding wedding theme from ThemeForest because it’s well documented (this will come in handy later on), always updated and features modern designs. 

the aisle wedding wordpress themethe aisle wedding wordpress themethe aisle wedding wordpress theme

Another important thing to look for is mobile optimization. We reach for our smartphones when we want to quickly browse anything on the web. Chances are, your guests will mainly use their phones when you share your website link. So, my top priority when choosing a WordPress wedding theme is mobile optimization.

tip
If you want to see how a WordPress wedding theme looks on mobile, click on Live Preview and pick a demo. Then, send yourself the link and check it on your phone!

Here is the criteria I used to pick my WordPress wedding theme:

  • Responsive design optimized for mobile devices
  • RSVP guest confirmation 
  • Clean and elegant design 
  • Easy to customize for a beginner
  • New and recently updated theme
  • Well documented

If you visit ThemeForest’s WordPress theme library, you’ll find hundreds of themes that meet this criteria and more. And the best part is that the themes are made by professionals who offer 24/7 support. No doubt it’s the best source for professional themes.

5. How to Choose and Set Up Web Hosting for WordPress

I’ve bought the theme I liked the most: The Aisle Elegant Wedding Theme. Now, it’s time to figure out web hosting for WordPress. 

If you’re a beginner like me, here’s an important thing to know: WordPress.com, the platform to use if you want a free blog, does not support premium themes. Instead, we’ll be using WordPress.org.

Now, WordPress.org requires you to use a web hosting provider in order to be able to install custom, premium themes. And it recommends three main providers: 

It’s up to you which one to pick. But here a couple of tips to consider:

tip
These services will offer a cheap monthly fee, but the discounted rate is only for the first month of hosting. Therefore, a 12-month period is usually cheaper than going monthly.
tip
Look for a web hosting service that includes an email account with the domain. You’ll need one later on, as I discovered too late.

Once you’ve picked the web hosting, you can choose your site domain, fill in the details and you’re good to go to the next step!

Choose and Set Up Web Hosting for WordPressChoose and Set Up Web Hosting for WordPressChoose and Set Up Web Hosting for WordPress
I’m using Dream Host for my website, here’s where you choose your own website domain.

6. How to Install and Access to Your WordPress Admin Panel

With your web hosting for WordPress set up, you’ll see in the Admin panel the option to install WordPress.

install wp on web hosting serviceinstall wp on web hosting serviceinstall wp on web hosting service

Once the installation is complete, remember to check you email for the access credentials to WordPress. You’ll find the instructions to log in to the WordPress admin panel. 

wp login screenwp login screenwp login screen
You’ll see this screen once you’ve installed WordPress and follow the link in your email.

7. How to Install a Premium WordPress Wedding Theme (with Plugins)

You’re doing a good job, hang in there! Now we’ll see how to install a WordPress theme.  Here’s a tip:

tip
If your theme is well documented, look for the documentation link to find a detailed user guide to check when you need help.

IMPORTANT: if you downloaded “All files & documentation”  from ThemeForest, you’ll get a .zip file. But that’s not the zip you need to upload to WordPress. You need to decompress it and only upload theaisle.zip. Or just download the "Installable WordPress file only".

files from themeforestfiles from themeforestfiles from themeforest

Step 1

On your WP admin panel, go to Appearance > Themes. Click on the Add Themes button. This will take you to the screen for finding and installing themes. Select theaisle.zip and click on Install.

install new wp themeinstall new wp themeinstall new wp theme

Step 2

After installing the theme, you’ll see a notification at the top of the screen telling you some required plugins need to be installed. You don’t need to download anything else at the moment since the plugins are already included.

required pluginsrequired pluginsrequired plugins

To install these plugins, go to Appearance > Install Plugins and install all of them, since they are necessary for the theme to function properly. Once the plugins are installed, you need to activate them in the Plugins menu.

activate pluginsactivate pluginsactivate plugins

Step 3

When the plugins are ready, it’s time to activate the theme. Go to The Aisle Dashboard and enter the required information, and click on Register Theme.

activate themeactivate themeactivate theme

8. How to Import Demo Content

You’ve installed the WordPress wedding theme and the necessary plugins; and you’ve activated everything. Next up, we’ll see how to import the demo content of the theme. This way, you can start your website with the demos you saw before buying the theme, and customize them to your needs.

Step 1

info
If you try to import the demo right away, you might run into a problem: the PHP settings need to be modified in order to successfully import demos.
php settings needs modificationphp settings needs modificationphp settings needs modification

How do you modify the PHP settings? You’ll need to download the free Custom PHP Settings plugin and activate it in Plugins > Installed Plugins.

Step 2  

Go to Tools > Custom PHP Settings and find the settings you need to modify on the Settings tab, then go to the Editor tab. In this case, the two settings you need to modify are: max_execution_time=300 (was 120) and max_input_vars=5000 (was 1000).

new php settingsnew php settingsnew php settings

Important: TICK the box on Update configuration file, otherwise the settings won’t be saved.

Step 3

Now that we changed the PHP settings, we’re ready to smoothly import the demo. Go to the Aisle Dashboard > Import and select the demo you wish to import. In my case I chose to import the Elementor version without attachments, and click on Import.

install demoinstall demoinstall demo

9. How to Edit the Front Page and the Inner Pages

Let me tell you something: the most technical part of the process is over. Now the fun part starts: the customization

imported demoimported demoimported demo
To see how the imported demo and the front page looks, go to the top left corner and click on the website name.

Step 1 

How to Delete the Pages you Won’t Need

The demo comes with many pages, since you can also use it as a business website or more. Therefore, it’ll have many pages you might not need for your website. 

To delete them, go to Pages > All Pages. There you’ll find all the pages the demo includes and you can delete the ones you don’t need. In this case, I don’t need blog pages, portfolio or anything about shopping pages.

delete extra pagesdelete extra pagesdelete extra pages
Select the pages you don’t need and click on Trash.
tip
You can go to the website preview and click on Pages in the top menu.  There you can see the pages you have left in the demo. Also, you can go to Home and see the front pages available.
pages on websitepages on websitepages on website

Step 2

How to Choose a Different Front Page

Now we’ll change the front page. To see which page is designated as front page, Got to Pages > All Pages. The page designated as Front page will have that legend next to it. 

To change that go to Settings > Reading and pick the page from the Homepage dropdown menu and click on Save changes. We’ll pick the Wedding home.

choose new front pagechoose new front pagechoose new front page

Now that we’ve chosen a new front page, go back to Pages > All Pages and you’ll see the page you picked is now designated as Front Page. And to edit it, click on Edit page with Elementor.

edit new front pageedit new front pageedit new front page

The Elementor editor will open and while it may seemed intimidating, it’s actually easy to use. There you can change some aspects of the front page, such as the date, the countdown, and some text from some sections. Remember to click Update after every change you make there.

elementor front pageelementor front pageelementor front page
Here’s how the front page looks on the Elementor editor.

Step 3

How to Use the Slider Revolution Plugin

You’ll see a few sections or modules you can’t edit on the Elementor editor, like the slide show at the top. For that, we’ll go back to the Admin dashboard > Slider Revolution menu.

revolution sliderrevolution sliderrevolution slider

Pick the module you’ll edit, in this case it’s the wedding announcement-2. The editor is really easy to use, you can easily change the images, the text and the animation effects. Once you’re happy with it and click on Save, you will see the changes reflected on your website preview immediately. 

slider revolution slide editorslider revolution slide editorslider revolution slide editor
The Slider Revolution editor is easy to use.

Step 4

How to Change the Website Menu 

Another aspect of your front page you should edit is the menu right in the top part, in the header of your website. Go to Appearance > Menus and in the dropdown menu,  select a menu to edit: Main Menu.

create new menucreate new menucreate new menu

Delete the menu to create a new one with the elements you want. Go to Create a New Menu. Tick Main Navigation and Mobile navigation. Then add the elements from the Add Menu Items box on the left and click Create Menu. I chose to add:

  • Home
  • Our Story
  • RSVP Page
  • Gift Registry
  • Gallery
front page new menufront page new menufront page new menu
Here’s how my front page is looking with my new slideshow and menu.

Step 5 

Continue Customizing the Rest of your Front Page and Inner Pages

As you scroll through the Elementor editor on your front page, you’ll notice which sections you can edit right there - like the time line - and which ones require you to go to Slider Revolution - like the "Our Story" module. 

continue editing front pagecontinue editing front pagecontinue editing front page

Now you only need to edit the sections until you’re happy with how they look and update it along the way. You can also edit the position of the modules, add new ones or delete the ones you don't need. And of course, the same process apply to the inner pages you've chosen to keep.

Others aspects you can edit are the widgets (Going to Appearance > Widgets) and the logo in the header (going to The Aisle Options > Logo).

10. How to Set up a RSVP Form for Guest Confirmation

The last step of this tutorial is setting up one crucial function of wedding websites: the RSVP confirmation. After all, wedding websites have become so popular because guests can easily access the information and the couple can easily request and receive a digital confirmation.

To customize the RSVP in this theme, we’ll learn how to set up Contact Form 7 in WordPress.

tip
Here’s where you’ll need an email address with your website domain. If you haven’t set it up with your web hosting, it’s time to do so.

Step 1 

How to Customize the RSVP Forms Already Created within the Theme

Go to Pages>All Pages, locate the RSVP page and click on Edit on Elementor. There you’ll be able to edit the general details, like the text there. In this case, there’s also a Slider Revolution module and we’ll go there to edit it in a moment.

Before leaving the Elementor editor, click on the RSVP button to see the name of the contact form we’ll edit in another section. In this case, the form is called “RSVP-vertical.”

locate rsvp form namelocate rsvp form namelocate rsvp form name

Once you’ve edited some details in RSVP page Elementor editor, go to the Slider Revolution editor and choose the module you want to edit, in this instance the “Wedding Announcement”. There you can change the images, the animations and the text. Click on Update when you’re happy.

Step 2

How to set up Contact Form 7 in WordPress

Now, let’s see how to edit the contact form for your RSVP so you’ll actually receive your guests’ confirmations! We’ll use the Contact 7 plugin that came included in the theme and it’s already installed and activated. 

In the Admin dashboard, go to Contact > Contact Forms and locate the RSVP forms to edit them.

locate RSVP forms on pluginlocate RSVP forms on pluginlocate RSVP forms on plugin

Step 3

Click on “RSVP-vertical” and edit it to add the email address where you want to receive the guests’ confirmations. The first thing you see when you click on edit is a box with code. No need to panic, we don’t need to edit anything there, unless you want to change what the pre-made form says. 

To specify which email address will receive the responses, click on the Mail tab and change the email address in the To field. You can edit further details, like what the mail body message will say, or just hit Save.

edit rsvp formedit rsvp formedit rsvp form
Troubleshooting: if you haven’t set up your email with your website domain, you’ll get an error that reads: (configuration error) Invalid mailbox syntax is used.
email erroremail erroremail error

That’s because the email address in the From field has to belong to the site domain. This email address is the email that sends the guests confirmations to your email! 

Step 4

Once you have your email address from your own website domain, you can add it in the From field and finally be able to save the form without errors.

functioning rsvp formfunctioning rsvp formfunctioning rsvp form
tip
If you want to see on the subject line your guest’s response, this is what you need to add on the field: [radio-275] which is the mailtag for the Yes/No reply

And we’re done. Once you set up these details on both forms, you’ll have a couple of functioning RSVP forms. 

Since the RSVP page and the buttons with the RSVP links already have the right form selected inside the Elementor editor, you don’t need to do anything else there. 

Of course, the next thing to do is test it and send yourself a RSVP reply from the website. If you receive this test reply on your personal email, you will be very happy, just like I was!

Bravo! You’ve Got a Wedding Website Up and Running!

Here concludes this tutorial on how to set up a wedding website. We’ve covered the basics of how to edit the pages using the Elementor editor, how to edit slideshows and how to set up a functioning RSVP form. In this link you can see how the front page from the demo looks like, and here's a snippet of how my final front page looks like:

final fron pagefinal fron pagefinal fron page

It’s not a quick job, but it definitely is a rewarding one. Plus, how many couples can tell their friends they did their own wedding website practically from scratch? 

If you’re interested in a few more tutorials and resources about wedding websites and more, don’t forget to take a look at these:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.