Category: How to

In the previous article, we stopped right after we created a community poll website, which enables users to submit their own polls. . In this post, we’ll walk you through the rest of the process.  The next step is setting up a homepage where users will be able to see the latest votes, filter them based on their tags and also be able to search between them. After that, we’ll need to design the single poll page.

Step Four: Implement the single polls page and the homepage

This is what I want from the homepage: a list of the latest approved polls, which includes the title, subtitle, latest vote date and created date. In case the poll was closed, it should also show a lock icon in the top right corner.

Also, if the user is  logged in, the polls that I’ve already voted on should turn green, so it becomes possible to distinguish between the polls that I’ve participated in and the ones that I haven’t.

At first look, it seems possible to implement this by using a simple listing with the help of Jet Engine and Jet Smart Filter plugin. Well, this is true for sure.  However, one thing that is missing is the conditional logic of colors. Jet Engine doesn’t give me the ability to distinguish between the polls I’ve voted in and the ones I haven’t.

So, the trick here would be to define a custom shortcode, place it inside a listing and then use it to have smart filters. The following code will give me a shortcode that I can use inside a Listing template on Jet Engine. It represents a single topic with the desired conditions that let me style it as I wish:

add_shortcode( 'custom_poll_item', 'custom_poll_item_function' );


function custom_poll_item_function( $atts ) {
   global $_gdpol_poll;
   $topic_id =  get_the_id();
   $poll_id = gdpol_get_topic_poll_id($topic_id);
   $custom_clasees = " " . get_post_status($topic_id) . " " . " poll_list_item";
   $topic_title = get_the_title($topic_id);
   $topuc_desc = get_the_content($topic_id);
   $uploads = wp_upload_dir();
   $upload_path = $uploads['baseurl']; 
   $topic_thumbnail = get_the_post_thumbnail($topic_id) ? get_the_post_thumbnail_url($topic_id) : $upload_path . 'https://d34b8fs2z18t5a.cloudfront.net/2020/01/chart.png' ;
   $topic_post_date = get_the_date('U', $topic_id);
   $topic_url = get_post_permalink($topic_id);
   $last_active = strtotime( get_post_meta( $topic_id, '_bbp_last_active_time', true ) );   
   $topic_button_text = "I want to Vote!";

   

  if(is_user_logged_in())
  {
  	$user_id = get_current_user_id();
  	$has_voted_or_not = gdpol_db()->user_voted_in_poll($poll_id, $user_id);
  	if($has_voted_or_not) 
  	{
        $custom_clasees .= " voted ";
        $topic_button_text = "Already Voted";
  	}
  	else {
  		 $custom_clasees .= " not_voted ";
  	}
  }
  else {
  	$custom_clasees .= " not_voted ";
  }


  $output = "
			    <a href=\"" . $topic_url .  "\"  class=\"poll_link_list_big\" >
	  				<div class='" . $custom_clasees . "' >
		  				<div class='thumbnail_poll' >
		  					<img src='".$topic_thumbnail."' />
		  					<div class='topic_date' >Created: " .  esc_html( human_time_diff($topic_post_date, current_time('timestamp') ) ) . ' ago' . "</div>
		  					<div class='topic_date_last_activity' >Last activity: " .  esc_html( human_time_diff(date('U', $last_active), current_time('timestamp') ) ) . ' ago' . "</div>
		  				</div>
		  				<div class='poll_body' >
		  					<h3>". $topic_title."</h3>
		  					<div>". $topuc_desc."</div>
		  				</div>
		  				<div class='poll_list_last_column'>
		  					<div class='poll_permalink_button'   >".$topic_button_text. "</div>
		  				</div>
	  				</div>
  			    </a>
  			 " ;

	return $output;
   
}

Just put this in your child theme’s functions.php, and the shortcode will be available. I also need to style it a little bit, so I’ll go ahead and add this CSS fix into the jupiterx-child/assets/less/style.css:

.poll_link_list_big .poll_list_item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.thumbnail_poll {
    max-width: 100px;
    padding: 6px;
    background: #E0E0E0;
}

.topic_date {
    /* font-size: 7px; */
    /* margin-top: 7px; */
}

.thumbnail_poll {
    min-width: 100px;
    font-size: 7px;
    color: #777575;
    text-align: center;
}

.thumbnail_poll img {
    max-width: 48px !important;
    margin: 9px;
}

.poll_body {
    justify-content: flex-start !important;
    text-align: left;
    width: 80%;
    padding: 5px 15px;
}

.poll_link_list_big {
    display: flex;
    background: rgba(224, 224, 224, 0.48);
    position: relative;
}

.poll_body >h3 {
    color: black;
    font-size: 18px;
}

.poll_body > div {
    color: grey;
    font-size: 12px;
}

.poll_list_last_column {
    padding: 10px;
}

.poll_permalink_button {
    background: #fb6800;
    color: white;
    padding: 12px 10px;
    border-radius: 10px;
    font-size: 13px;
    text-align: center;
}


.publish.poll_list_item.voted {
    background: rgba(84, 218, 100, 0.14);
}

.voted .poll_permalink_button {
    background: #00ab00;
}





body .poll_link_list_big .closed:before {
    font-family: "Font Awesome\ 5 Free" !important;
    display: block;
    width: 16px;
    hright: 16px;
    color: #ababab;
    font-size: 16px;
    font-weight: 900;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
     content: "\f023";
     position: absolute;
     right: -7px; top: -4px;
}

Now, go to Jet Engine -> Listings and add a new Listing Item. I named it as “polls.”

While editing the listing, set the Listing Source as “Posts” and assign the “Topics” post type to it. You can set the whole item to be clickable as well.

Now drop the Shortcode element into the page, and add this shortcode to it:

[custom_poll_item]

This is the name of the shortcode that we previously built in the functions.php file.

As soon as the shortcode is added, you should be able to see the result in the preview. It’s better to set the margin and column gap of the sections here to 0. Now that you added the listing template, you need to use it on a Listing Grid and put it on your page. 

Go to your homepage and drop a Listing Grid element into the content. Then configure it as follows:

In order to load more polls, you need to add a button and set it’s ID as “loadmore_latest,” which is the ID you set in the Load More Element ID section of the listing grid.

Now it’s time to add the search box on top of the polls list and then add the tags filter at the bottom. I’ll use a Smart Filter plugin to do that.

Go to Smart Filters and add two filters: 

• Tags Selection filter 
• Search for polls

For the search box, use the Search filter type:

And for the tags, use a Radio type as follows:

Update the filters and go back to the homepage. Now drag and drop the search filter and radio filter into the page.

And assign the filters as you wish. Then style them using their styling options.

Also, this CSS snippet is needed to remove the radio circles and to also show a different color on the selected tag:

.elementor-element .jet-radio-list__input:checked ~.jet-radio-list__label {
    background: #ff5c08;
    color: white !important;
}

.elementor-element .jet-radio-list__input ~.jet-radio-list__label {
    background: white;
    padding: 2px 20px 8px;
    color: #0a0a0a !important;
}

The homepage is ready now! Publish the changes, assign this page as your homepage in WordPress Settings -> Readings and check your website. 

‌By clicking on every vote item, you’ll be directed to the polls page where you can participate in the polls. Styling this page requires some modifications in the child theme. 

In the previous article, we showed how to override the bbPress template files in a child theme. Just like before, I would need to override gdpol-poll-content.php from wp-content/plugins/gd-bbpress-toolbox/templates/default/bbpress/ in wp-content/themes/jupiterx-child/bbpress/gdpol-poll-content.php. 

Also I need to override content-single-topic.php from wp-content/plugins/bbpress/templates/default/bbpress/ in the same directory of my Jupiter X child theme (bbPress). 

You can edit the rest of the template files in order to get the look you’re going for. You can find more information here.

Instead of the poll title and description, we used the topic title and description in the previous article. So, we need to show the topic title and description in the poll single page template.

In the end, adding this CSS snippet to jupiterx-child/assets/less/style.less will give you a better look in the single topics page:

.gdpol-choices-list legend {
    font-size: 12px;
}

.gdpol-topic-poll header h2 {
    font-size: 2em;
}

.gdpol-topic-poll header p {
    margin-top: 20px;
    /* background: #fffdfd; */
    padding: 20px 0;
}
.gdpol-topic-poll footer, .gdpol-topic-poll header {background: none; }

.gdpol-topic-poll {
    border: none;
    background: #fff;table.wp-list-table.widefat.fixed.striped.posts {
    width: 100% !important;
}
}
.um-dropdown-b li:nth-child(2) {
    display: none !important;
}


a.gdpol-action-show {
    margin-left: 8px;
}


.gdpol-poll-choices label span {float: right;}
.gdpol-poll-choices label input {float: left  !important;margin: 4px 6px 0 0px !important;}


.gdpol-fields-wrapper {
    display: block !important;
    border: none !important;
}

#gdpol-poll-status, #wc-comment-header, .wc_stick_btn.wc-cta-button, .wc_close_btn.wc-cta-button, .bbp-form.gdpol-topic-poll-form legend, .d4p-attachment-addfile
,a.gdbbx-attachment-add-file, .gdbbx-attachment-control >div:nth-child(3), .gdbbx-attachment-control >div:nth-child(4),
.wc-field-submit .wpd_label{
    display: none !important;
}



table.wp-list-table.widefat.fixed.striped.posts {
    width: 100% !important;
}


.bbp-form .gdbbx-attachments-form .gdbbx-validation-active .gdbbx-attachment-preview  {
   float: left !important;
   margin-left:  0 !important;
}

.bbp-form .gdbbx-attachments-form .gdbbx-validation-active .gdbbx-attachment-control {float: left; margin-left: 15px;}
.gdbbx-attachments-form {
    text-align: left !important;
}


.jupiterx-post-image picture{
    display: flex;
    text-align: center;
    margin-bottom: 50px
}
.jupiterx-post-image img {
    width: auto;
    height: 100%;
    max-height: 400px;
    margin: auto;
}



.single-topic #bbpress-forums ul.gdpol-poll-choices, .single-topic  #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li {
    padding: 12px;
    font-size: 1.2em;
    color: white;
    list-style-type: none !important;
    margin: 0 !important;
    vertical-align: middle;
    padding-top: 24px;
    position: relative; min-height: 75px;
    display: flex;  align-items: center; width: 100%; columns: 1;  flex-direction: column;
    flex-wrap: wrap;
}

.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li label {position: absolute;  top: 0; bottom: 0; right: 0; left: 0; text-align: right; width: 100%; display: flex;  align-items: center; padding: 10px; cursor: pointer;}

/* different colors on the poll choices */
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(odd) { background-color: #292ab1; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(even) { background-color: #1e7b48; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(3n) { background-color: darkcyan; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(4n) { background-color: mediumorchid; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(5n) { background-color: dodgerblue; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(6n) { background-color: darkorange; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(7n) { background-color: firebrick; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(8n) { background-color: lightseagreen; }

This is the final look on the single polls page:

Step Five: Design the header and footer with Jupiter X and Raven

The next part when you create a community poll website involves designing the headers and footers of the website. There’s nothing special in this section since everything is possible with the Jupiter X’s Custom Header and Custom Footer capability. You may want to put menus and call to actions in the header and ensure they are looking as they should. More information about this section can be found here.

Step Six: Install Ultimate Member and its add-ons and configure

Using a membership plugin can help you create a membership directory and add social networking features to your app. This will also help you monetize your project. For this particular website, we used the Ultimate Member plugin.

Dozens of add-ons offered by this plugin can help you build a social network. Imagine that the users of your community create polls, share them on social media, and others vote in the polls and join your community. They interact with each other, see their profiles and receive notifications with each interaction. This is all possible with this plugin. Remember that in order to have an integration on the user profiles and the bbPress forums, you would need to use this add-on on Ultimate Member which is premium:

https://ultimatemember.com/extensions/bbpress/

Later on, you can use localization and change the “Topics” word to “Polls.” After installing the Ultimate Member plugin, you need to define some pages as the membership directory page, single profile page and etc. Here you can find more information on how to configure that.

Step Seven: Add custom notification on the poll votes

 Notifications are a must-have for any social poll website. As soon as any sort of interaction occurs, users should be notified. In order to have a notification system, we used the Real Time Notification add-on for the Ultimate Member plugin and configured it as we wanted. By default, it gives you these notifications, and you have full control of the options to enable/disable them and show the texts as you like. 

• Notify users when the user role has changed.
• Notify users when someone comments on their post.
• Notify users when someone replies to one of their comments.
• Notify users when another member views their profile.
• Notify users when guests view their profile.
• bbPress – Notify users when someone replies to them on topics they created.
• bbPress – Notify users when someone replies to them on a specific topic.

You can find information on how to configure it here:

I want to also notify the owner of the poll whenever his/her poll receives a vote. In order to do that, I’ll write a code with the help of the notification API included in the Ultimate Member add-on called Real-Time Notification.

/*

This code sample shows you how to use the API to create
and add custom notifications (for real-time notifications) in the plugin.

STEP 1: You need to extend the filter: um_notifications_core_log_types with your
new notification type as follows. For example:

*/

add_filter('um_notifications_core_log_types', 'add_custom_notification_type', 200 );
function add_custom_notification_type( $array ) {
		
	$array['new_action'] = array(
		'title' => 'When something happens', // title for reference in backend settings
		'template' => '<strong>{member}</strong> has just did some action.', // the template, {member} is a tag, this is how the notification will appear in your notifications
		'account_desc' => 'When member does some action on my profile', // title for account page (notification settings)
	);
		
	return $array;
}

/*

STEP 2: Add an icon and color to this new notification type.

*/

add_filter('um_notifications_get_icon', 'add_custom_notification_icon', 10, 2 );
function add_custom_notification_icon( $output, $type ) {
	
	if ( $type == 'new_action' ) { // note that our new action id is "new_action" from previous filter
		$output = '<i class="um-icon-android-person-add" style="color: #336699"></i>';
	}
	
	return $output;
}

/*

STEP 3: Now you just need to add the notification trigger when a user does some action on
another user’s profile. I assume you can trigger that in some action hooks.
For instance, when a user views another user’s profile, you can hook like this.



$who_will_get_notification : is user ID who will get notification
'new_action' is our new notification type
$vars is array containing the required template tags, user photo and url when that notification is clicked

UM()->Notifications_API()->api()->store_notification( $who_will_get_notification, 'new_action', $vars );

*/

add_action('gdpol_vote_saved', 'trigger_new_notification', 100);
function trigger_new_notification( $args ) {
	 global  $_gdpol_poll, $um_notifications, $post, $topic;
	 $_poll = gdpol_get_topic_poll_id();
			$poll_author_id =  bbp_get_topic_author_id($args->topic_id); // die();
				update_post_meta( $args->topic_id, '_bbp_last_active_time', date( 'Y-m-d H:i:s', current_time( 'timestamp', 0 )));

	if ( is_user_logged_in() ) {
		
		$vars['member'] = $args->topic_id;
		$vars['notification_uri'] = get_the_permalink($args->topic_id);

		UM()->Notifications_API()->api()->store_notification( $poll_author_id, 'new_action', $vars );
		
	}

	else {
				UM()->Notifications_API()->api()->store_notification( $poll_author_id, 'new_action', get_the_permalink($args->topic_id) );


	}


}

After adding the above code, a new notification will be added to the Ultimate Member -> Settings -> Extensions. Remember to activate it and save the settings.

In the meantime, I want to update the topic’s last activity meta field with the latest vote time. So, in the last function, you’ll see this line of code:

update_post_meta( $args->topic_id, '_bbp_last_active_time', date( 'Y-m-d H:i:s', current_time( 'timestamp', 0 )));

This will help you update the latest activity on each poll which is showing on the homepage within the listing you created before. Just add the above code to your child theme’s functions.php file. It’ll give you a look like below. As soon as someone votes on the poll:

It’ll send a notification to the user who created the poll.

And by clicking on the notification icon, it’ll show you the text that you have provided in your custom function and the configuration of the plugin.

More configurations and stylings are possible using custom CSS.

Step Eight: Localize and translate to your own language

The last section in creating a community poll website is translating and localizing the words into your own language. Using the Loco Translate plugin, you can change every single piece of text within this app just as you like. Remember that the texts are located on different plugins, and you need to dig into the plugins to find the source of the text. Mostly, you need to change the word “Topic” to “Poll” wherever it is showing up because of the logic behind this app.

Results, further development and roadmap

We created a social network application based on social polling features. Certainly, there are tons of further considerations to make it like a production app. But the thing is that the base is prepared, meaning that you can add as many features as you want simply by using different plugins and configurations. 

This method will save a lot of money if you aim to build such a community – and compared to the social polling platforms out there, it can be considered almost a free platform. The good thing about this method is that you can keep everything updated and secured with one single click. 

Additional features such as Login by Phone (using two-factor authentication) or the discussion below the threads can be applied to the app using the following plugins:

• wpDiscuz: advanced commenting plugin. 
• Digits : WordPress Mobile Number Signup and Login

Adding more plugins may require configurations and, in some parts, or even writing some codes to integrate it with your base. For example, bbPress uses three post types such as “forum,” “topic” and “reply.” You would need to enable the comments for the “topic” post type using custom development because by default, the topics don’t receive any comments. Or you may need to configure the Digits plugin to work with your own SMS platform. 

Also, you may want to push your notification to the users who subscribed to your app or website. This can be done by using FireBase or any other push notification service. However, it may require custom development in some parts to make sure it triggers correctly whenever an interaction happens on your website. 

The last thing you want to do is to wrap the website on a webview and publish it on app stores such as Google Play or iTunes. There are dozens of tutorials out there that can help you with that.

Wrapping Up

Creating a community poll website has never been easier than now. It can be done using bbPress and WordPress and using handy tools such as the Jupiter X theme. Its bundled plugins will ease the process and reduce the cost of development. 
In this series, we provided an overview of how to create a social polling website using their tools we had. Check out the first article of this series here if you’ve come across this post using a search engine.c

Recently, I was about to build an online community where users could create their own polls and share them on their social networks. Search results show that there are plenty of community poll platforms out there but none of them were what I actually needed. I wanted to create a community poll website that is:

1. Cheap or free of charge
2. Actively maintained and updatable
3. Independent and installable on shared hostings
4. Customizable with a minimum amount of coding
5. Community based, meaning that the community of users should populate it with their content
6. Loaded with a function that allows users to share the polls in their social networks
7. Fully responsive and adaptable to mobile devices

After digging a lot and testing dozens of demos, I realized each platform lacks one of my requirements or the other. Then suddenly an idea popped into my mind: why not build up the community using WordPress? We recently moved our support platform to a community built by WordPress, BBpress and Jupiter X, which is working quite well.

Then why not build another community using the same tools? So then I thought that BBPress is a community builder and probably has tools I can customize to achieve what I want. The more I looked, the more I realized that it’s exactly what I want.

1. It uses WordPress, which is free. The BBPress is also free.
2. Both BBPress and WordPress are actively maintained.
3. I can install both of them on any shared hostings.
4. I can customize everything with the minimum amount of coding.
5. It’s where the users will create polls with their own content. It’s a community after all.
6. It allows me to share the polls with specific permalinks wherever I want.
7. By using Jupiter X, it’ll be fully responsive and customizable.

So, I decided to give it a try and start building up my community using the tools I’ve got. The BBPress and WordPress definitely were not enough, and I needed more. Fortunately, nearly all of them were available, and I was able to easily access and use them.

In this article, I’m going to share my experience of creating a community poll website on a budget.

Defining the UX

More than anything, I wanted the website to be mobile friendly. I thought that maybe later I would want  to wrap the whole website into a webview and publish it for Android or iOS. This meant that I needed to consider everything to be fully responsive and think mobile first. I wanted something like the following:

I also wanted the poll single pages to be something like this:

So, the experience would be like:

• Viewers will enter the website and see the content and announcements that they need to register and login to vote and participate in the discussions below each poll. 
• The registration will be completed as quickly as possible and without any unnecessary steps after clicking on the registration or login button on top.
• After registration, the logged-in user will be redirected back to the page they were on before.
• Voting and commenting under the votes are visible now after logging in
• If user got back to the homepage, he can use Ajax search and filters to find an interesting poll and participate
• The poll list in the homepage is showing the voted polls and not voted with a different color
• After participating in each poll, whether the user votes on it or added a comment under it, it should send a notification to the user who created the poll.

Also, users have their own profile and clicking on the user name will navigate you to the user profile where you can see the user details, avatar and cover image, created polls, comments, favorite and followed polls. I didn’t want to create membership plans to monetize the website, but it should be possible to do it easily in future. 

So, things got complicated, huh? Don’t worry. We will get through this and see how we can do it step by step.

Prepare the tools

Creating a community poll website required two major functionalities:

• Community
• Membership profiles

I chose these two plugins that are absolutely free and popular among users:

• BBPress
• Ultimate Member

Each of these plugins can extend their functionalities using add-ons. So I needed the following:

• The GD Topic Polls for BBPress plugin makes it possible for the users to create polls.
• The Real-time notifications for Ultimate Member plugin allows users to receive notifications whenever something happens (premium plugin).
• GD bbPress Toolbox Pro. The only use for this plugin is to let users upload images and use the image as the poll thumbnail. While I could have developed this another way, this was the easiest solution and worth trying (premium plugin).
• Comments – wpDiscuz is an advanced commenting plugin and adds functionality to the discussions. 
• Optional: Digits : WordPress Mobile Number Signup and Login makes it possible to change the WordPress login and allows users to register with their phone numbers instead of emails and also verify the phone numbers using SMS (premium).
• Jet Engine for its listing feature (premium)
• The Jet Smart Filters plugin can be used for its advanced Ajax search and filtering features (premium).
• The free version of Elementor can be used as the page builder
• Raven (bundled with Jupiter X) was used for creating the custom header and footer.

I wanted to use the Jupiter X theme that already comes bundled with the Jet Engine and Jet Smart Filters. So, this means that two premium plugins were already provided for free. Also, it gave me the ability to build up my custom header and footer and visuals that I needed. So, I would definitely consider this theme as a base and choose the plugins that are compatible with it.

Creating a community poll website like this also requires some coding, which I’ll explain in the following paragraphs.

Step One: Install Jupiter X, Jet Engine and Jet Smart Filter and activate the child theme

The first step is to install Jupiter X and its bundled plugins, which provides an easy way to list the latest polls based on your design and allows you to use the smart filters to create an Ajax search. Also, since Jupiter X is a fully responsive theme, it allows you to implement the whole website to easily use as a mobile app.

After downloading the Jupiter X theme from ThemeForest, install it from Appearance -> Themes and register the product. A complete guide on how you can install and activate the theme is provided here.

Since we need to modify some files and add some customization here and there, it’s better to use a child theme to avoid change loss in the theme and plugin updates. So, right after installing the theme, you need to install and activate the Jupiter X child theme. You can find out how to do this by reading this article. It’s as simple as finding and installing the jupiterx-child.zip file inside the same package you downloaded from ThemeForest.Net.

In order to install the bundled plugins, you need to register the theme first. So, try registering the theme like the guide provided here and make sure you can see that the theme is activated.

Now you can install the bundled plugins. Simply navigate to Jupiter X -> Control Panel -> Plugins and install and then activate these plugins:

• Elementor
• Raven
• Jet Engine
• Jet Smart Filters
• Advanced Custom Fields

The Jupiter X Core plugin is mandatory, and you’ll need to install it right after installing the theme, so it’s also on the list. 

So, we are done here. Let’s move onto the next step.

Step Two: Install BBPress and its addons and configure

We’ll use BBPress as the main community builder on our website. Whenever you want your users to engage and provide content for your website and actually create a community of users, no matter what functionality you require, the BBPress is the best choice if you’re going to use a WordPress website as the backbone.

What we’re going to build with BBPress is one forum named Polls, then let the users create topics inside this forum and add a poll to their topics and publish it. Then, the other users can vote on each other’s polls and share it on their social networks. Also, we’re going to implement a notification and discussion board for each topic. So this means that the author is notified as soon as other users vote or add a comment to the poll. So, let’s start by adding the BBPress plugin.

In WordPress -> Plugins -> Add New, search for BBPress. Simply install and activate.

Now navigate to Settings -> Forums and change the Forum Root and Topic slugs to “polls” and “poll.” It’ll give you a better permalink structure for your polls as each topic means a poll on your website.

After that, go to Forums and add a new forum to the website. This is our main forum that contains all of the polls. So, call it “Polls” again.

Now that the main forum is added, we need to provide a way so our users can add their own topics that contain polls in this forum. But how can we do that? First let’s add a plugin that allows the topics to have polls inside. It’s called GD Topic Polls for BBPress. 

Go to Plugins -> Add New, search for it and then install and activate it.

The next step is to create a page and add a form to it where users can create topics and polls.

Step Three: Add the “Create Poll” page

We need the polls to be created by the users – but all from the front end. We don’t want them to come to the WordPress dashboard to be able to create a new poll. That’s one of the reasons we wanted to create our website using a community builder.

So, create a page and add this BBPress shortcode to it:

[bbp-topic-form forum_id=29 ]

Remember to change the 29 with the forum ID.

The result will be a page like this in the front end:

As you can see, the form is created and that page and the Create New Topic Poll is located at the end. Check the “Add poll to this topic” to see the poll form.

Try sending a new poll, and see the results. You’ll be able to add as many responses as you want or choose how many responses are allowed.

After submitting the form, you’ll be redirected to the topic, and you’ll be able to see the topic with the poll above that.

Congratulations! We’re nearly there. Before finishing, there are a few more things we need to take care of. First, I don’t want users to create a topic and then the polls. I only want Polls. So I need to somehow hide the topic or the poll title and description since I have two of them.

Technically, I just need to hide the extra fields and notices. Some of them can hide via CSS and some of them can get hidden by actions. However, the easiest solution would be to use the child theme and override the BBPress and GD Polls for BBPress Topics template files in it. It’s as easy as copying/pasting the proper files and the plugin template folder to my “jupiterx-child” folder and editing them.

So, from wp-content/plugins/bbpress/templates/default/bbpress/ I’ll copy the form-topic.php to wp-content/themes/jupiterx-child/bbpress/form-topic.php and then edit its codes and remove the extra fields and notices and save the file.

I should also do the same for the poll form files that are located in wp-content/plugins/gd-bbpress-toolbox/templates/default/bbpress/ and named as

• gdpol-poll-edit.php
• gdpol-poll-form.php
• gdpol-poll-new.php

So I’ll copy them to the jupiterx-child/bbpress/ folder as well.

In the gdpol-poll-form.php I commented out the poll title and description fields, and instead, created two hidden fields with constant values to fill the poll description and title. This is required since the poll will not be created if the values are empty. I’ll use the Topic title and description on the polls page.

The result is now like the following:

I would like to let the users add a thumbnail to their polls as well. This thumbnail can be used in asking users’ opinions if they want to see an image before answering the poll. Adding an image to the topics are not allowed by default, so I need to find a plugin to add it or develop this part on my own.

By using the GD BBPress Toolbox Pro plugin, it’s entirely possible to attach media to the topics and assign the first attachment as the topic thumbnail. It also allows you to control the attachment for the different roles. You can control the size of the image and choose from the allowed extensions. It also provides safety and security for the user file uploads. So, I’ll use this plugin and configure it like this:

Also, I would like to only allow the gif, png, and jpg mime types to be uploaded. So from the top General button, I’ll choose the “Allowed Types” and then select my desired file types.

There is also another setting that needs to be configured. We need to make sure the attachment will be considered as the topic thumbnail. So, simply choose the “Integration” from the button above and then check the “Auto Generate Featured Image” for the Topics and save the settings.

Now I’ll need to style the topic creation form a little bit and hide some fields via CSS. In order to do that, I’ll write this CSS fix in jupiterx-child/assets/less/style.less and let the Jupiter X built in compiler enque it to the website. Remember to uncomment this line in jupiterx-child/functions.php before doing that:

jupiterx_add_smart_action( ‘wp_enqueue_scripts’, ‘jupiterx_child_enqueue_scripts’, 8 );

jupiterx-child/assets/less/style.less:

#gdpol-poll-status,
#wc-comment-header,
.wc_stick_btn.wc-cta-button,
.wc_close_btn.wc-cta-button,
.bbp-form.gdpol-topic-poll-form legend,
.d4p-attachment-addfile,
a.gdbbx-attachment-add-file,
.gdbbx-attachment-control>div:nth-child(3),
.gdbbx-attachment-control>div:nth-child(4),
.wc-field-submit .wpd_label {
    display: none !important;
}

.gdpol-fields-wrapper {
    display: block !important;
    border: none !important;
}

.bbp-form .gdbbx-attachments-form .gdbbx-validation-active .gdbbx-attachment-preview {
    float: left !important;
    margin-left: 0 !important;
}

.bbp-form .gdbbx-attachments-form .gdbbx-validation-active .gdbbx-attachment-control {
    float: left;
    margin-left: 15px;
}

.gdbbx-attachments-form {
    text-align: left !important;
}

ul.gdpol-responses-list li span._button:last-of-type {
    padding-left: 4px;
    width: 38px
}

form#new-post {
    max-width: 500px;
    margin: auto;
}

input#bbp_topic_tags,
#bbp_topic_title {
    width: 100%;
}

select.gdpol-select-choices.gdpol-field-extra-select {
    width: 100% !important;
    max-width: 100%;
}

.gdpol-field.gdpol-field-regular label {
    width: 100%;
}

Now let’s take a look at our poll creation page:

Simple, clean and quick as desired. Try submitting a new topic with the attachment and watch it work.

Stay tuned for the second part of this two-part blog series as I’ll show you how to style the single topics page, add membership profiles and implement a notification system. Also, we’ll need to display a list of the polls (topics) created and add filters and search options to it and show it on the homepage.