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!
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.
What We’ll Cover in This WordPress Wedding Website Tutorial:
- Who Should build a WordPress Wedding Website from Scratch?
- How Much are Wedding Websites?
- What to Include on Wedding Websites
- How to Choose a Premium WordPress Wedding Theme
- How to Choose and Set Up Web Hosting for WordPress
- How to Install and Access to Your WordPress Admin Panel
- How to Install a Premium WordPress Wedding Theme (with Plugins)
- How to Import Demo Contents
- How to Edit the Front Page and Inner Pages
- How to Set up a RSVP Form for Guest Confirmation
1. Who Should Build a WordPress Wedding Website from Scratch?
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.
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.
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:
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!
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.
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.
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:
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".
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.
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.
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.
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.
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
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).
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.
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!
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.”
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.
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.
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.
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:
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:
WordPress Themes30 Best WordPress Wedding Themes (Free & Premium For 2022)
WordPress Themes25+ Best Wedding Planner WordPress Themes 2022
ShopifyBest Shopify Themes for Wedding Websites 2022
WordPress ThemesTop 20 WordPress Wedding Themes (+ Tips to Build Your Wedding Website)
HTML15 Best HTML Wedding Website Templates For 2022
Minimalist3 Simple, Minimalist WordPress Themes: Compared
No comments:
Post a Comment