Transcripts
1. Introduction: Hi, I'm Sarah. I'm a designer and front-end developer based in Toronto. As a fellow bride to be, I know how important it is to keep your costs to a minimum and keep everything super simple. With this course, I'm going to show you, how to create a website for your wedding from start to finish. Everything from purchasing the domain to going live. At the end of the course, you'll have a website where your guests can RSVP as well as find out everything they need for the big day. You don't need to know how to code to create this site. The theme is totally customizable to fit your wedding and responds to all screen sizes.
2. Purchase a Domain : First thing you need to do is buy a domain name. The most common thing to do is use the first names of the bride and groom. If you go to godaddy.com, you can search a domain name and see if it's available. As you can see, I searched Kevin and Sarah, kevinandsarah.com was gone, but I chose to go with kevinandarh.rocks just to be cute. Then you can add it to your cart. However, you might want to go and purchase hosting first, and then you get the domain name free. However, I already have hosting with GoDaddy, so I'm just going to purchase the domain name. You do need to purchase hosting, otherwise your site won't be viewable. You can continue to cart. Once you have all of the items you need and checkout using PayPal or credit card. You can also choose between a year to five years. I only chose a year because I won't need it after the wedding, but feel free to choose more of you want to keep it as a memory. Once you've checked out, everything should be good to go and you'll soon get an e-mail with all the information about your new website. Next thing you want to do is click on your name at the top right and choose visit my account. This is where you're going to find all of your products, information about your domain as well as your hosting. This is where we're going to start to get into how to add the WordPress page to your site.
3. Set Up Hosting: Next thing we want to do is put the hosting with the domain name. If you click on the top right and go to "My Account," you'll see your web hosting in the second row, click that and choose "Manage". Once you're in the hosting page, you'll see a list of all your domains, I have quite a few, but you may only have one. To add a domain to your hosting, click "Add Domain" and type in the name of the website you just purchased. For me it's KevinandSarah.Rocks. As soon as you type in the first letter, it will populate underneath. Then choose a name for your folder. This can be whatever you like, something that's easy to remember, and click "Okay". When you are typing in the name under the domain field, if it didn't populate that means it wasn't ready yet. Maybe you'd come back in a few hours to see if it's there, because sometimes it can take a bit longer. Once it's added, you'll see it pop up in your list. It'll say "Pending" under the status. This also takes some time. You'll usually get an e-mail, the notification that it's ready.
4. Install Wordpress: Now that the hosting is finished, we can install WordPress. If you go into the top left of the green navigation menu and click home, you'll see this page. On the right-hand side, you'll see options and settings. Click Wordpress. Now you can manage your WordPress applications. So you'll want to click install. You want to choose the domain name of the wedding website and then you want to put a directory. The directory is where your WordPress site is going to live. I want it to be on the page that people land on when they type in kevinandsarah.rocks. However you might want it to be kevinandsarah.rocks/wedding. To get it to the main route, which would be kevinandsarah.rocks, just leave it blank. You also need to add your admin name and admin password. This is what you'll need to log in to the WordPress site to make any changes, upload photos, all the stuff we're going to do in the future. You'll also need to add your email and you can type in a blog title. But no worries, you can always change this later once we log into the WordPress site. When you have all the fields filled out, click Okay. As you can see, it says WordPress is installing. This also takes some time. So sit back, relax and wait for the email to say that it's ready.
5. Login to Wordpress: Once WordPress is installed, we can log in and make some changes. If you're typing your wedding website right now, this is what you'd see. An unfinished theme, however, to make changes, you'll want to log in. So you'll want to go to your website address slash wp dash admin. When you get to the login page, you're going to see the admin name as well as the admin password. If you remember, we set these up when we're setting up the WordPress application in Go Daddy. Type in the password and your username and click Log In. You're now in WordPress, this is where we're going to build your site. Make sure you bookmark this page, sometimes it's hard to remember the long address you need to type to get here.
6. Purchase a Theme: You're now ready to add a theme. There are lots of themes out there, for purchase and for free. The one I'm using in this tutorial is from themeforest.com. If you go to themeforest.com, and type Lily, in the search bar, you'll find this theme. I chose this theme because it's beautiful and I really liked the timeline near the bottom that showcases all the important events of you and your bride to be or groom to be's wife. This theme has everything from your bridal party registry, RSVP location, as well as any other details you want to add. This is a paid theme. There are pros and cons about paid and free themes. Purchasing of paid theme is great because you get the support. If you have any questions, you can email the developer and usually they're pretty good about responding. I personally had a question about this theme and email the developer and he was really quick with the response and answered my questions. You can pay using PayPal or credit card. Once you've paid, you'll see a Download button where you can download the theme to your computer.
7. Install Wordpress Theme : Your next step is uploading the theme to WordPress. When you download it, you'll have a ZIP file like the one on my desktop. You'll want to double-click that to unzip it. When you open the file, you'll see a bunch of other files. If you open documentation, you'll see an index.html page. Double-click that, and it'll open in your browser. This is a quick tutorial to show you everything you need to know about this theme. The first part shows you how to upload it to WordPress. The theme you want to upload to WordPress is the lily.zip file. Go into your WordPress Dashboard, and go to Appearance, Themes. Click Add New. This is where you can upload a theme or use one of the three WordPress themes. You can see a few of them on the first page, and you can also search themes in the search bar. We're going to use the one we downloaded from ThemeForest. To do that, you want to click the Upload Theme button in the top left. Then click Choose File, and select the folder, and then lily.zip. Click Install Now. When it's done, you'll be able to click Activate. You're also going to notice that this theme requires a few plugins to run all of the different features it shows you. If you click Visit Site, you'll see what it looks like without the plugins and without any content.
8. Install Theme Plugins: Now you want to install all the plugins in order to have the RSVP, photos, all that fun stuff. Click Begin Installing Plugins. You'll see a list of the plugins, select all, and in the bulk actions menu, choose Install, and then click Apply. It takes a few minutes to install all the plugins. Once it's finished, you'll have a list of everything you've installed, and a link to go back to the installer. Click the link to go back to the installer. Here you'll see all the plugins you just installed. But you'll notice that it says, the installation still needs to be activated. All of your plugins are located on the left hand menu. Click Installed Plugins. Here you'll find a list of all the plugins installed in your WordPress site. Some of them are there by default from GoDaddy or WordPress. There's a few that I personally will delete, because the more plugins the more weight is on your site and the slower it will be. So only keep what's necessary. Right now I'm selecting all the ones we just installed, and from the bulk Actions menu, I'm clicking Activate. Once you've hit Apply, you'll see there's some information on the top. Akismet is for regulating spammy comments. I don't plan on having a comment section on my website, so I'm just going to ignore that message and move on to the Jetpack message. You'll need to connect the wordpress.com in order to get this plugin to work. I have an account, so I'm just going to log in with my username and password. However, if you don't, there's a link to create one right there. Once you've logged in, you'll see this message, and if you click Jumpstart, you'll be able to adjust some of the settings with Jetpack. Some of them you won't need. You can turn a lot of them off and just help with the wait and load of your site again. So I'm turning off site stats, sharing, publicize, related post, enhanced distribution, because none of these is really necessary. I only want the people who are invited to my wedding to go to this website. Now everything's installed, and we're ready to move on.
9. Install Demo Content: The easiest way to see the website is to see it with some demo content. This theme comes with demo content in order to give you a guide of where you can put some photos or some text and just give you a better idea of how it can look like in the end. To import this content, go to Tools, Import. You'll see a list of different import options. Click WordPress. You'll need to install the Importer in order to import this content. Go ahead and click Install, click Activate and run Importer. I'm going to show you a quick before and after. If you remember, this is what our site looked like before the content. Now click Choose file and we're going to import the content in the folder. In the theme folder, you'll see an XML file. Choose that and click Open. Then click Upload file and import. Next you'll see a page with some settings. You want to check off download and import file attachments, and then select one of your existing users and hit "Submit". It takes a little while to import, but once it's done, it will tell you and you're ready to view the new website. Click Refresh on the website, and you can see now that there's some content in there. It doesn't look how it did on the example, but we're getting there. If you click on one of the posts, you'll be able to see some text and maybe some photos.
10. Basic Customizations: Now that we have some demo content, we should customize it so it's more in line with our wedding theme. So go to "Appearance" and click "Customize". Here you have a menu with some options. First thing we want to do is change what the page looks like when it loads. Right now it showed all of those boxes. But we want a homepage that has a large feature image. So click "Static Front Page", and then under front page displays, choose "Static Page". Under front-page from the drop down menu, select "Homepage". This is a preview of what the website will look like. Now you see a spot where you're going to have the large homepage image. If you view it live, you'll see that it's there. We also want to change the title and tagline. Right now it says just another WordPress site. Here you can put the date of your wedding as seen in the example. If you look through the menu, there's lots of options and we're going to get to those soon. Make sure you hit "Save" and "Publish" to save all the changes you just made. Here's a quick overview of the settings in the menu. If you choose colors, you can see here that you can change the text color, your accent color, your background color, and you view all the changes on the right-hand side. You can also change your header image here. You can have the background image be a slideshow, where you have multiple images rotating one after the other. I chose to turn off the slide show. The demo content includes photos with dimensions on them. This will help you and choosing the right photos. You can also go into "Settings", "General", this is where you change some of the behind the scenes stuff, like the email address associated with the account. You can also change the title and tagline here, the way dates are displayed on blog posts. You can also go into the writing and reading section and change any settings in there. However, for this tutorial, I will not be changing any of those settings. So feel free to leave those alone for now.
11. Adding Content: Now we need to add some content. To do that, go to Appearance and click on Widgets. This theme works with widgets in order to get all of those features that you see on the Homepage. You'll see on the left-hand side a list of a bunch of widgets that you can drag over there. Located near the bottom, you're going to see all the widgets that came installed with this plugin. They all start with Themechills. These are the ones you see on the Homepage on the demo site. We want to drag them over to that directory. I've added three widgets. To check them out, I'm going to click Visit site. I should see a timer, some events and a map. If you scroll down, there's your countdown timer, there's your list of events and your maps should be there, but it's not quite ready to be installed yet. Now I'm going to add the rest of the widgets to the section.
12. Homepage Photo Gallery: The first section or widget we're going to work on is photos. This is the area where you have a horizontal scroll of some photos of you and your significant other. You can title this section with whatever you'd like. You can also add a description. I copied and pasted one in there. You'll also want to add a button or call to action minus for more information on the reception for guests who can't make it out to the destination wedding. You'll need to put in a URL for the button to work. If you don't have one now because the page isn't ready yet, just leave it for later. If you go to this site and click "Refresh," you'll see the text that you just entered right there. Now we need to add our photos. On the left-hand side, if you click "Photos," you'll see a list of the demo content that's already in there. We can just edit these instead of adding new photos. Just choose one and click "Edit." You'll see on the right-hand side, there's a feature image. This is where the image is actually going to show up on the website. I remove that feature image and change the title to engagement party. And I'm going to add a feature image. And this image is going to be at the engagement party. Click "Browse" and then go through your folders and check the image that you want. I have a few that I'm going to upload at ones that have to do with this photo section. I'm going to do that now. I shows multiple images by hitting command and selecting with my mouse. After they've finished uploading, I chose the one that I wanted to be the feature image for this photo section. Select that and then hit "Set featured image." Click "Update" to save your changes. Go back to photos and do the same thing for as many photos as you have. When you're finished, go back to the site and click "Refresh." The photos appear below the text and you can view them by scrolling left or right.
13. Countdown & Timeline: Next, we're going to add the countdown and events. The countdown is that section with the days, months, and hours before the wedding. So in the widgets area under "Appearance" in the Homepage section, open the countdown timer drop-down. Here you can put in the date for the wedding and the time. Under the timer are two spots for messages. First field is a message for when the countdown has finished, and the one below is the message that's going to be shown with your countdown. You can see that it has the days, hours, minutes, and seconds in that order. You can definitely change those just by copying and pasting in the spot you want. If you refresh your page, you'll see the countdown with the gray background in the middle of your photo section and the events section. Now we're going to update the events. You can add a title if you want, but I'm going to choose not to. On the left-hand side, I'm going to click "Events" to go in and change the ones that are with the demo content. Just like the first one and click "Edit". This is where you can change the title as well as change the description and add a feature image. I'm going to upload files the same way did his last time. Just grabbing a few for this section at once. Then once they're done uploading, I'm going to choose the one for this event that I want to be the feature image. When you're done, click "Update". A little tip, if you hover over and click "Quick Update", you're able to make some small updates here, like the date and the title. Continue on with the rest of the event titles and change them to fit your website. Make sure you get the dates right because this is how they're going to display on the site from start to finish. When you're all done, you should be able to hit "Refresh" and check out your new timeline.
14. Callout & Wedding Party: There are a couple other features we can add, one being the callout and the other being your bridal party. In widgets under homepage, you can see the section for callout. This is basically just some extra text. Anything you want that goes with that Grey background, the same as the countdown. The crew are under profiles. This is where you're going to put all of your groomsmen and bridesmaids' photos and bios. You can add a title and just hit "Save". Then from the left-hand side, click "Profiles". Here you have a bunch of examples already in there. We're going to do the same thing and just edit the ones that are already there. Just choose one and click "Edit". Change the name at the top and the little description about them. Then in the feature image, it's the same as events, just upload some images and select the right one. Set feature image, and click "Update". Keep doing this for all of your bridesmaids and groomsmen until you're done. If you need to add more people than you have in the examples, just click "Add Profile" on the top left beside the profile's title. When you're done, hit "Refresh" and you should see all the photos popup underneath your callout. If you hover over them, you'll get to see the name and the quick description, and you can click on them to see more about that person. There's also some navigation on the bottom. You can go through the next or the previous bridesmaid or groomsmen.
15. Location Map: We're now going to add a map for the location of the wedding. Under appearances in widgets, under homepage, you'll see the map, drop down, you can add a title, and then we'll also need to grab a code to put into the embed or short codes section. If you go to the plugins page and find the map plugin that we installed called Responsive Styled Google Maps. Click "Settings", here you have your map, this is where you're going to choose the pointer color, the background color, and also where you're going to input the address for people to find your wedding. All the map styles are in this drop down, I selected number 8. There's lots of other options, but really you only need to change the colors and make sure you put in the right address. When you have everything set how you like, make sure you go to the right in the dark gray box, select all that text and copy it. Then go back to your widgets and open the homepage widgets in the map section, and paste that information into the embed or short code section, hit "Save." Refresh your website and check out your new map. There it is. If you click on the little pointer icon, you're going to get the address with a link to directions.
16. RSVP & Instagram: Now we're going to add a way for guests RSVP and follow along on Instagram. In the widgets, this tech section is where the actual contact form is going to go. We'll be going on the left-hand side and click Contact and click Edit under RSVP. This is the RSVP form. This is where you're going to choose what you want them to put. Right now where they have full name, email, will you be attending as well as menu choices. You'll also want to change the email address in the two section, because you want the RSVP sent to your email address. You can also change the message body. When you're done, hit Save. Make sure you copy and paste the contact form code in the blue background and go back to widgets. Under texts, you're gonna paste that code into the content section and then hit save. If you refresh your page, you'll see the contact form right there. Instagram is pretty easy, all you have to do is put in a hashtag, hit save and all the photos that have that hashtag are going to show up on your website. Just note that photos that are on a private account won't show up. They have to be public in order to show up on your website.
17. Homepage Header Image: To change the header image, you need to go into appearance, customize. Choose header image from the left menu. As I mentioned before, there's a place holder image with dimensions. We want to upload an image with the same dimensions. There are two ways to do that. One, you can take your photo into Photoshop, adjust the dimensions there. Using the crop tool, change it to 1920 by 1080. You want to make sure you save for web because you want the image size to be as small as possible. In the save for web options, on the top right, you'll see a dropdown for the image type as well as the quality of the image. I choose high, but I thought it was still too high, so then I chose medium. You can see that decrease the file size. Now I'm going to go ahead and save that for my homepage. As I said before, I don't have a slideshow, so click add new image, upload files, select the file you just saved, then hit select and crop. Then hit skip cropping if it's already cropped and there you have it. There's your image. If you don't have Photoshop, you can easily do it in WordPress. Choose the full size image and click select and crop. In the next page, you're going to have the option to change the dimensions of the image. You can see there's already a pre-loaded size for this section. Just move it around until you get a spot that you like, then select crop image. You want to make sure you delete the placeholder image with the dimensions in order to see the new image you uploaded on your website. If you refresh the page, you should see the new image in the background now. Now, we're going to add the text on top of the background image. Click on Header Hero Text, type in what you'd like to appear over the image. When you're done with that, you can add a button for under the text. I chose to put an RSVP button here. In the dropdown, you can choose the linked page that you want the button to take you to, and then you can type in the text that you want to show on the button. Don't forget to hit save and publish.
18. Navigation Menus: We're going to add the menus that you see on the top right-hand side on the website. In the same customize menu, choose "Menus," then choose "Menu Locations". Under the drop-down, click "Top Menu." You can see on the right-hand side where this menu is going to appear. There're a few default items in there right now: blog, registry, timeline. If you go back, and then choose the menu, you can decide if you want to keep those or remove those. I'm not going to have a blog, so I removed it.You can also add more menu items by clicking the Add menu button. You can add a custom link, you can add posts, you can add the pages that you've already created, there're lots of options to choose from to put in your top right-hand menu. You can also drag the menu items around to put them in a different order. When you're done, click Save and Publish.
19. Gift Registry: For the registry, we're going to have a separate page. It's not going to be on the homepage. You're going to be able to get there from the top right-hand menu. If you click on the "Registry" link right now, you'll see this page. It's telling you you have to download another plugin. This one you have to download separately outside of WordPress. Choose free download, and enter in your e-mail address. You should get a link in your e-mail to download the plugin. Once it's downloaded, go to the Plugins page and click upload plugin. Click "Choose File" and select bean-registry.zip file, click "Install Now" and when it's done, click "Activate Plugin". Now when you go to this site and click the "Registry" page, you should see some images with stores and logos to go to your registry. To change these, we're going to go into pages and click "Edit" under Registry. You'll see a bunch of short codes on this page. This is where you're going to change the store name. To get a list of the store names offered, select the image folder in the file you just downloaded. You'll see a list of all the different logos that they offer. Copy and paste that file name into the short code on WordPress. In the spot where there's two hashtags, that's where you're going to put the address to get to your registry. Once you hit "Update", the link should be updated and you should see the new logo on your site. When the guest clicks that logo, they should then be brought to your registry.
20. Adding a New Page: You may want to add a new page to your site. From the left-hand menu, click "Pages", "Add New". Enter the title of your page at the top. When you're done, click "Publish". You might want to add this page to your menu. So go to Appearance, Customize. Click on "Menus", select "Top Menu". I'm going to replace the Timeline Menu with this new one. So I removed that, and now I click "Add Items", choose "Pages", grab "Details", and hit "Save". You should now see it on the top right. When you click the "Details" Page, you're probably just going to see an empty page with a headline. To add content, just enter all the information into the white box below the title. This is where I'm going to put the ceremony details, the hotel location, as well as the dinner afterwards. If you want to add style to your text, click the icon, to open up the toolbar underneath. Then add headings or color or font size and center or left align your text if you wish. You can also add a link by highlighting the text and using the link icon to add the address.
21. Css customizations: In this last section, I'm going to show how to do some advanced customization. First thing I'm going to show you is adding custom fonts. You go into Plugins and search Google fonts and find a plugin called WP Google fonts. Click to activate the plugin. Once it's ready. You can go to it on the left-hand side and click "Google Fonts". The rest of the customizations require CSS changes. To do this, I have a few steps outlined here, and it's basically the same steps for every time we want to change something. It's best if you use a Chrome or Firefox browser. When you find that web element that you want to change, you right click it and click Inspect Element or Inspect depending on what browser you're in. I used the background image as an example here. Once you've pressed Inspect, you'll see a developer toolbar pop-up window show up with a bunch of HTML code and CSS. You'll then want to find the HTML that goes with the elements that you want to change. Then from there, you click on that and then change the CSS values. You then copy and paste that and bring it into the CSS section in WordPress.We'll have a file for you to download in projects that has all the CSS changes I made if you'd like to apply the same ones. This is a quick before and after. This is what the standard font looks like. If you right click it and click inspect, you can see what style of text it is, it's an H3. This is important to know so you know which font to put with which style. Check off H3 to change the header. If you want to see the styles of fonts Google Fonts has, go to google.com/fonts. Here you can scroll through all the different style fonts, then when you go back to the plugin you can choose that one from the dropdown menu. When you're done, click "Save All Fonts". If you refresh your page, you should see a new font. Now we're going to add a custom image to show when the guest clicks on the map icon. I'm going to search the Tropicana and grab their logo from Google Images and save it to my computer. I'm then going to open a new tab with the Media Library. Then upload the image we just saved, click on the image to open it, and then click on "View Attachment Page". Right click the image and click "Open Image in New Tab". Here you can copy and paste the top address bar, paste it into the address that's in the description box. I'm just going to re-select my colors, and then make sure you copy the text in the gray box to overwrite the old text. Go back into Widgets, open Homepage, open Map and replace the old text with the new text. Click "Save". If you refresh the page and click on the map icon, you should see the new image. Now we're going to change the pink flower that shows up in the divider under the titles. To do this I'm going to grab an icon from flaticon.com. I searched heart and found one with engagement ring with a heart on top. If you click the eye, you should be able to download a PNG file with whichever color you choose. Click "Free Download", and if you right click and Inspect element, you'll see that it's set as a background image called lily.svg. We're going to replace that with our new image. We're going to do that by going to godaddy.com, go into manage your web hosting site, and then clicking on File Manager. When you're in here, you should navigate to the wedding website, open up that folder, open up wp-content, then Themes, and then the name of your theme which is lily. Then open up Image and you'll see the lily.svg file, so you're going to drag your new file into that folder. To put this in place you're going to want to go into appearance editor. You'll see a list of pages on the right-hand side, you scroll all the way down you can click on style.css. Before you make any changes a good idea is to copy all the text from the page that you're changing and paste it into a text file. Just in case you mess anything up you can place it back to how it was originally. Once that file is open, if you click Apple F to search the file and then type in lily, it'll bring you to that style. Then you can change the lily.svg to the name of your new file. When you're done, refresh the page and see if the icon shows up. For me it didn't. It's still there but it's hidden in the background. I'm going to change the background size to 100 percent. There it is. You'll want to copy that whole entire section of text where you just change the background size, now we need to add that style we just changed. If you go to appearance and click on edit CSS, you have a blank CSS page. Paste the text you just copied into the CSS style sheet editor. Save the style sheet and move on. We're going to add more styles. I'm going to change the overlay on the background image. It's a little dark so I right clicked that, I went to inspect element and then found the background color was an opaque gray, I'm changing that to transparent so it's a little brighter. You're going to want to do the same thing and highlight the text so you can copy it and then paste it into the CSS editor. Now I'm going to change the size of the font for the headings. But when I right click and click Inspect Element, I can see that the font size is a little bit big so I took it down one REM, and now it all fits inside the line. I'm also going to change the font size and font color of the top right navigation. It was a bit too light so I changed it to the color 666666. Again, delete everything that you're not using when you paste it all back to the style sheet. Now I'm going to change the color of that very light border around to a solid white color. I'm changing the transparent RGBA color to white, which is FFFFFF. Now, I'm just changing the height of the background image because I found it was a little bit big, so I changed it from 800 pixels to 700 pixels. Right now I'm changing the background color of the count down to the same color as the gray that's behind it. I first went to check out the gray background elements and found which color of gray is, and then went to the white background and changed that to be the same. I'm also changing the font size because they're a little small so I'm going to make it quite a bit bigger. One thing I'd like to get rid of is the copyright in the footer. I purchased the theme so I have the rights to use it. I'm just going to put a display none style on the footer so that nothing shows at the bottom.
22. Wrap up: To wrap up, this is an example of what the finished website will look like. At the end, I'm going to show you the different screen size resolutions, how it will look in tablets, and mobile devices. If you grab your browser handles and slide the browser to a little smaller size, you'll see that it turns into a tablet view and then you bring it in even smaller and you're going to see it go all the way to mobile. As you move your browser, you'll notice that the site looks good no matter what size of screen you view it on.
Sarah Trafford, Designer
