[Resolved] Some advice please

[Jem]

Hi GP folks

I’m developing a site to promote a local area, with a small directory of local groups and organisations. I’m using GP Premium and GB (I have GB Pro too but haven’t installed it as yet).

They want a page to gather ideas for the area from the public, just a sentence or two per idea. The ideas won’t be actioned or followed up, just displayed as inspiration for local people. The design I’ve been given suggests a short form (via a popup/modal), ideally with a low word limit, which allows visitors to suggest short, simple ideas to improve the area e.g. ‘more spaces for community activities’ or ‘community markets’.

These would obviously need to be moderated, and then displayed in a 3 column grid. Each idea just needs to display the 1 or 2 sentences (no title, meta or attribution) with each grid item being more or less square with a random different colored background from a given color pallete. Ideally it would involve the minimum of administration – just approval or not, which would then publish the idea automatically (or not). There would obviously need to be some spam protection too.

Could you advise as to the best approach to accomplish this?

Initially I was thinking to build out a page and have a form which would arrive to the site admin, who would then paste the approved idea into a post (category: ideas) which would appear in a WPSP grid.

Then I realised it could make sense to utilise WordPress comments (which are not enabled anywhere else on the site) on a page. I don’t know how to go about achieving this layout though, I’ve rarely ever even built a site with comments enabled. If this makes sense as an approach, how would I best go about removing the comment (and comment area) title and meta; displaying the comments in a responsive grid, and implementing the comment form in a modal? Can this be done with GPP and GB (aside from the modal which would probably involve Boxzilla or something similar)?

Now I’m wondering if it makes sense to customise a testimonials plugin, which may be simpler/quicker to accomplish.

Any advice as to the most sensible way to achieve this would be greatly appreciated. TIA.

[David]

Hi there,

there is probably some testimonial plugins out there that would do most of the grunt work for you.
Although using the Comments is nice idea, as it provides the form and validation process for you.

Just a thought – you could create a specific post for gathering the users comments.
Then use the get_comments function in WP to display them – which could be output on any page using a shortcode.

Here’s a PHP Snippet i cobbled together from one of my other snippets to create a shortcode titled [show_post_comments] :

function db_get_specific_post_comments($html) {
    $args = array(
        'post_id' => 1, // Set the ID of your post with comments
    );
    $comments = get_comments( $args );
    $comment_html = '';
    foreach ( $comments as $comment ) :
		$classRand = rand(1, 10);
		$randomClass = 'random-style-'.$classRand;
                $comment_html .= '<div class="comment-container '. $randomClass .'">
		<div class="comment-container-inner">
		<div class="comment-author">' . $comment->comment_author . '</div>
		<div class="comment-content">' . $comment->comment_content . '</div>
		</div>
		</div>';
    endforeach;
    $html = '<div class="comments-wrapper">'. $comment_html .'</div>';
    return $html;
}
add_shortcode('show_post_comments','db_get_specific_post_comments' );

You will need to specify the ID of the post in this arg: 'post_id' => 1 arg – change the 1 the ID of the post.

I included a $randomClass variable so each comments container will have a random class you could use to style it differently… but it will update on every load 🙁

Then some CSS for styling and creating a grid layout:

.comments-wrapper .comment-container-inner {
    padding: 10px;
    flex: 1;
}

.comments-wrapper .comment-container {
    margin-bottom: 10px;
}

@media(min-width: 769px) {
    .comments-wrapper {
        display: flex;
    }

    .comments-wrapper {
        margin-left: -10px;
    }

    .comments-wrapper .comment-container {
        margin-left: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
}

I included classes for comment-author and comment-content so you can style them as you see fit.

And you can create individual rules for each of the random styles eg.

.comments-wrapper .comment-container.random-style-1 {
	background-color: #f00;
}
.comments-wrapper .comment-container.random-style-2 {
	background-color: #0f0;
}

[Jem]

Thanks David, that’s very helpful indeed. I’ve set it up as a page with comments enabled and it’s sweet.

A few things:

1. How should I remove the default comment display (which is appearing underneath)? I realise I can hide it with CSS but it would be better removed at source if possible, but leaving comments enabled on the page.

2. Any ideas as to how to get the comments form into a popup and off the bottom of the page? Also, how to change the wording from ‘Leave a comment’ to ‘Add your idea’?

[David]

Awesome 🙂
So you can unhook the Comments Template with this snippet:

add_action('wp', function(){
	remove_action( 'generate_after_do_template_part', 'generate_do_comments_template', 15 );
},100);

Note: That removes from ALL posts / pages.

Then one of our users came up with the Shortcode snippet for displaying just the Comment Form, which should work in your modal…. but that modal would have to be on the Post that you’re writing your comments to:

function wpsites_comment_form_shortcode() {
    ob_start();
    comment_form();
    $cform = ob_get_contents();
    ob_end_clean();
    return $cform;
}
add_shortcode( 'wpsites_comment_form', 'wpsites_comment_form_shortcode' );

As an aside – if still required – see this doc for changing the Comment Title ( Leave a comment ):

https://docs.generatepress.com/article/generate_leave_comment/

[Jem]

Thanks David, you’re a star.

The shortcode is throwing a bunch of errors here though, starting with this one:

Warning: Use of undefined constant ‘wpsites_comment_form’ – assumed ‘‘wpsites_comment_form’’ (this will throw an Error in a future version of PHP) in …/app/public/wp-content/themes/generatepress_child/functions.php on line 324

I’ve found a different shortcode which adds the form but also adds all previous comments above it. It just needs a title (now changed, thank you) and the comments form with name and email fields for the commenter, and no comments.

I’ll have a dig around and see if I can find something, there is a plugin which can do it I think.

[David]

I edited the shortcode snippet above – it had some bad single quotes in the code.

[Jem]

Thanks again David. Apologies for not spotting the dodgy quotes, I should’ve realised you wouldn’t share a broken thing.

All good now, I’ve ended up using Advanced Comment Forms for some further mods to the form (before and after text). If there’s a programmatical way to do that I would prefer it.

One last thing would be to limit the length of comments (the brief asks for a 150 character limit) and reduce the size of the comment content field as it’s huge for such a small character limit. Oh, and remove the Website field from the form – I tried a standard snippet but it’s not working, I’ll hide it with CSS if necessary but if there’s a function for it.

I have a function in place which limits the characters but it only informs the user after they hit submit if they’ve exceeded the quota, although it allows use of the browser back button to try again – better than nothing but not ideal. There is also the Limit Comments and Word Count plugin but it only works for registered users – in this case it’s very much the case that they want to allow a quick and easy way of gathering very simple ideas, so registration is a bit overkill, just a name and email will be OK. I worry it will just end up as a spam magnet though.

Thanks for all your help. GP rocks!

[Jem]

Sorry, one more question. Is there a way to paginate the comments?

[Leo]

This might help:
https://www.wpbeginner.com/wp-tutorials/how-to-paginate-comments-in-wordpress/

[Jem]

Thanks Leo, it does.

Not to be greedy but there are couple of other final questions just above that one, if possible.

[David]

To limit the character count you could try this filter:

https://developer.wordpress.org/reference/hooks/comment_form_field_comment/

And you could use it like so:

function db_limit_comment_field_length() {
    $comment_field = '<textarea id="comment" name="comment" cols="45" rows="4" maxlength="150" required="required"></textarea>';
    return $comment_field;
}
add_filter( 'comment_form_field_comment', 'db_limit_comment_field_length' );

maxlength reduced to 150 and rows to 4

And to remove the URL see here:

https://docs.generatepress.com/article/remove-e-mail-and-url-field-from-comment-form/

[Jem]

Many thanks David, and Leo (sorry for that question Leo, I couldn’t see the wood for the trees, as I say I’ve hardly ever used comments on any sites, I usually just disable them and move on).

I’ve set the comments to paginate after 6 top level comments (for testing) but it’s not having any effect.

Is anything in any of the code provided above likely to cause comments to be published before being approved? They are all just publishing immediately despite the settings being ‘comment must be manually approved’. Approving or not makes no difference, they all just display. All caching currently disabled.

Also, I have a custom font, League Gothic, set for all headings, but it doesn’t seem to display on mobile, despite being set OK in the customiser. Should I open a new thread for that?

[David]

Regarding approval – in the code here – change:

$comments = get_comments( $args );

to:

$comments = get_approved_comments( $args );

The Pagination for the comments won’t work in this instance as we’re not outputting the default comments template…. to paginate that custom list would require some custom development.

[Jem]

Thanks again David. With that change though the comments now aren’t showing at all.

That’s why I originally asked about the pagination, I guess the admin will just have to unapprove some when the page gets too long.

[David]

Are any of the Comments Approved ?

If not revert to get_comments() and update the args:

$args = array(
        'post_id' => 1, // Set the ID of your post with comments
);

to:

$args = array(
        'post_id' => 1, // Set the ID of your post with comments
        'status' => 'approved',
);

There are other args as well – for example:

'number' => 3,

This will limit the number of comments to 3.

[Author]

Posts