This tutorial was submitted by Jessica Thornsby and Alex Booker

Online dating is big business.

The most popular online dating website boasts 23.5 million users, and according to research from Badoo.com millennials spend an average of 10 hours every single week on dating applications. 

If you have a great idea for a dating website, then you have a huge potential audience.

While there’s no shortage of dating websites for people to choose from, a newcomer with a great idea can still grab a huge chunk of the market. In 2018, 22-year old web developer Harry Dry launched a Kanye West-themed dating website, where lovelorn singles could search for a partner - but only if they appreciate “the genius Mr. Kanye West” and definitely not if they’re a fan of Taylor Swift. 

This Yeezy Dating website caught the attention of popular news outlets, including The Guardian, The New York Post, Mashable and Vice. According to the site’s creator, the press attention alone saw Yeezy Dating gain 5,000 users in just a few days. 

So, you have a great (or maybe just an amusing) idea for a dating app - in this tutorial, I’ll show you how to bring your idea to life without writing any code! 

By the end of this article, you’ll have built a website where people can register, create a dating profile, browse a Member’s Directory of other singles, and send an instant message to anyone who catches their eye.

In this tutorial, I’ll show you how to quickly and easily create an online dating WordPress website where users can exchange messages in real time.

What we’ll be building

Online dating revolves around creating a profile and connecting with other users, so we need to give people a way to register with our website and manage their membership. 

To provide this functionality, we’ll be creating the following webpages using WordPress, CometChat Go and the free Ultimate Member plugin: 

• Registration. This page will contain a form where newcomers can register by entering their email address and creating a password.

• Visitors. 
• Login. This is where registered users will log into their account.

• Member’s Directory. We need to give visitors a way to scroll through all the people who are registered with our website. The Member’s Directory will display the name, profile picture and cover photo for each user; if a visitor wants more information, then they can click through to that person’s profile and potentially send them a message.

• User Profiles. This is where the user can view and edit their profile, for example by adding a bio, uploading a cover photo or changing their profile picture. 
• Account. This page will allow users to make various changes to their account, including updating their email address, password, making their profile private or deleting their profile entirely.

• Logout. Following the website’s “Logout” link will sign the user out of their account. 
• Password Reset. This will contain a form where users can reset their password.

• If a user forgets their password, then they can trigger a password reset using this simple form.

Adding membership features to your WordPress website

We can quickly and easily generate all the above webpages, using the free Ultimate Member plugin for WordPress:

• Log into your WordPress account, if you haven’t already. 
• In WordPress’ left-hand menu, navigate to “Plugins > Add New.”
• In the “Search plugins…” field, type “Ultimate Member.”
• When the Ultimate Member plugin appears, select “Install now” followed by “Activate.”

• You can install Ultimate Member, and many other free WordPress plugins, in the “Plugins > Add new” area.
• In WordPress’ left-hand menu, select “Pages.”
• When prompted, click “Create pages” and Ultimate Member will generate all the following webpages: User Profiles, Account, Registration, Login, Password Reset, Logout, Member Directory.
• Click “Save Changes.” 

Add a navigation menu

At this point, you have all the pages required to provide membership functionality, but depending on how your website is setup it may not currently be possible for users to navigate between these pages. 

To ensure the Ultimate Member pages are always within easy reach, I’m going to add them to a menu that’ll appear along the top of my website. 

You can help visitors navigate your WordPress website, by adding menus. 

While building this menu, I’m also going to edit some of the pages’ navigational labels to better reflect their contents - specifically, I’m changing “User Profiles” to “My Profile,” and “Account” to “Settings.”

• In WordPress’ left-hand menu, select “Appearance > Menus.”
• Select “Create a new menu.”
• Give your menu a name, and then click “Create new menu.”
• Click to expand the “Pages” section and select all of the following pages: Password Reset, Account, Logout, Members, Register, Login and User.  
• Click “Add to menu” and all of the selected webpages will be added to the “Menu structure” section. 
• Your menu items will be displayed in the same order as “Menu structure.” You can change where an item appears in your menu, by grabbing it in “Menu structure” and then dropping it into a new position.

•  If you want to change a page’s title, then in “Menu structure” click to expand that page’s corresponding section and then edit its “Navigation label.”
• When you’re happy with how your menu is setup, click “Save Menu.” 
• To place this menu on your website, click the “Manage Locations” tab. 
• Assuming that you want this menu to appear across your entire website, open the “Top Menu” dropdown and select the menu that you just created.
• Click “Save Changes.” 

Customising the Ultimate Members forms

Ultimate Member generates the registration, login and profile editing forms automatically. By default these forums are pretty sparse, so you may want to add some extra fields. 

Since we’re developing a dating site, you might add fields where the user can specify their birthday, geographical location, and provide some information about the kind of partner they’re looking for. For my website, I’ve added two custom fields to the profile editing form: one where the user can write a short bio, and another where they can answer the question “who is your dream dinner guest?” 

You can add a wide range of custom fields to your Ultimate Member forms. I’m creating “Bio” and “Dinner guest” fields, which will appear when the user is editing their profile. The process of creating fields will be largely the same, regardless of the kind of field you have in mind, so you can use the following instructions to create all kinds of custom forms:

• In WordPress, select “Ultimate Member > Forms.”
• To edit the form that appears when the user is updating their profile, open the “Default profile” page for editing.
• To create a new field, give the little “+” button a click. This adds a new item, represented by another “+.” Note that you may need to scroll, to find this second “+.”
• Click to select the new “+” section. This launches the “Field Manager” window.
• “Field Manager” contains various options that you can use to create a range of custom fields. I want to create a text field where the user can enter their bio, so I’m opting for “Text Box.”

• In the subsequent window, enter a “Title” which will be used on the back-end as a reference, and will not appear anywhere on your website.
• Give your custom field a “meta key.” This will be used to manage any information that the user enters into this field, and won’t be visible on your website. This key must be unique and should be in lowercase with an underscore separating words.
• You can now assign a label to this field, which will be user-visible; I’m opting for “Tell us about yourself!” 
• In the “Placeholder” field, enter some placeholder text; I’m using “This is my bio.”
• Make sure the “Can user edit this field?” checkbox is selected. 
• When you’re happy with the information you’ve entered, click “Update.”
• Rinse and repeat for every custom field that you want to add to this form. 
• When you’re happy with the changes you’ve made, don’t forget to save your work by clicking “Update.” 

Now, when the user is editing their profile they’ll have access to two new custom fields.

Adding live chat to your dating website

The best way to connect with a potential new partner is to strike up a conversation!

While your users could make a connection by exchanging messages or even emails, you can provide a much better user experience by letting them communicate in real-time.

You can quickly and easily add live chat to your dating website, using the CometChat Go plugin. 

If you haven’t already purchased CometChat Go, then you can grab your license now, or they offer a free 7-day trial, so you can see exactly what the plugin has to offer, and then decide whether it’s right for you. 

If you’ve just purchased CometChat Go, then the first step is uploading it to your WordPress website:

• Once you’ve completed your purchase, download the CometChat Go plugin. 
• In your web browser, sign into the CometChat Client Area.
• Select “Manage.”
• In the menu bar, select “API keys.” 
• Make a note of the following information, as you’ll need to add it to your WordPress account: Auth Key, API Key, and License Key.
• Log into your WordPress and navigate to “Plugins > Add new.” 
• Select “Upload Plugin.”
• Click “Add New” followed by “Choose file.” 
• Select the cometchat.zip file you downloaded in the previous step. Click “Open,” followed by “Install Now.” CometChat Go will now be uploaded to your WordPress website. 
• When prompted, select “Activate plugin.”
• In WordPress’ left-hand menu, select the new “CometChat” item.
• Enter your license key and click “Install.”
• Enter your Auth Key and API Key, and then click “Update.” 

Sending private messages with CometChat Go

At this point, your website already has live chat functionality!

If you open any webpage, then you’ll see the CometChat Go popup in the bottom-right corner. Anyone who visits your dating website can now view a list of everyone who’s online, and send instant messages to any of these people in real-time.

However, this isn’t how people tend to use dating websites. The majority of your users will want to browse the Member’s Directory, and then send private messages to specific users - they’re unlikely to pick a random person from a list of everyone who’s currently online! 

To provide a better user experience, I’m going to add a “Send me a message!” link to every user’s profile. Whenever someone clicks this link, it’ll launch a private CometChat Go session with this specific user, making it easy to reach out to someone after viewing their profile.

You can send any user a private message, by opening their profile and clicking the “Send me a message” link. 

To deliver this functionality, we’ll need to add some code to the “User” page and the Ultimate Member plugin’s template - but I’ll be providing the exact code you need, so you can copy/paste it straight into your WordPress account.

Adding chat to user profiles

Firstly, we need to add a docked CometChat Go window to the user profile page:

• In WordPress’ left-hand menu, select “Pages.”
• Open the “User” page for editing.
• Copy and paste the following text into this page: [cometchat layout='docked' width='990' height='600']
• Click “Update”

Editing WordPress plugin templates

Every time someone clicks the “Send me a message” link, CometChat Go needs to identify the profile this person is currently viewing, and then launch a private chat session with this particular user.

In this section, we’re going to edit the Ultimate Member templates so that CometChat Go can dynamically retrieve the profile’s all-important user ID: 

• In WordPress’ left-hand menu, select “Plugins > Plugin Editor.”
• Open the “Select plugin to edit” dropdown and choose “Ultimate Member.”

• Give the accompanying “Select” button a click.
• In the right-hand “Plugin Files” menu, select “templates,” followed by “profile.php.”
• Scroll to the very bottom of this file. It should currently look like this: do_action( "um_profile_content_{$nav}_{$subnav}", $args ); ?> <div class="clear"></div> </div> <?php } } do_action( 'um_profile_footer', $args ); ?> </div></div>
• Copy/paste the following section into this exact position:do_action( "um_profile_content_{$nav}_{$subnav}", $args ); ?> <div class="clear"></div> </div>//Add the following///<a href="javascript:jqcc.cometchat.launch({uid:'<?php echo um_profile_id(); ?>'});">Send me a message!</a>        <?php } } do_action( 'um_profile_footer', $args ); ?> </div></div>

• Click “Update file.”

And that’s it! If you navigate to any user profile, then it should now feature a “Send me a message” link; click this link and CometChat Go will launch a new private chat window with this specific user. 

Conclusion

In this tutorial, we built a dating website from scratch without writing any code. 

If you’ve been following along, then users will now be able to register with your website, create a dating profile, browse a Member’s Directory and send private instant messages to other users in real-time, using CometChat Go.  

Now the rest is up to you! Regardless of whether you have an idea for an innovative, cutting-edge feature that’s completely new to the world of online dating, or a gimmick to rival Yeezy Dating; you’ve laid the foundations for a successful dating website. Now it’s time to really bring your vision to life, and make your website stand out from the crowd.

If you do use this tutorial to kickstart your online dating project, then we’d love to see your creations! Why not Tweet @CometChat and @Makerpad so we can share your work.