Change Frontend App...
 
Share:
Notifications
Clear all

[Solved] Change Frontend Appearance

12 Posts
2 Users
4 Likes
1,071 Views
Posts: 9
Topic starter
(@nstoeckigt)
Active Member
Joined: 3 years ago

Hi,

I managed to add an additional field to the comment box - name: 'city'.

Now I want to display this like:

Tim from London  - 3 days ago
...

but I only managed to show this in the backend were you manage the comments in wp:

image

Can you point me towards the direction where to change what to archive what I'm looking for?
Is there anything you also need to know to be able to help me?

Thanks in advance!

11 Replies
Posts: 9
Topic starter
(@nstoeckigt)
Active Member
Joined: 3 years ago

to be more precise I want it to look like this:

image

 

and if the field has no value it should look like this

image

 

but of course this is a matter of logic in the code (change) itself.

 

...again thanks a lot for any help!

 

5 Replies
(@nstoeckigt)
Joined: 3 years ago

Active Member
Posts: 9

I managed to insert the desired field into the code:

-            $headerComponent = str_replace(["{AUTHOR}", "{DATE}", "{STATUS}", "{SHARE}", "{LINK}"], [$args["components"]["author.html"], $showDate ? $args["components"]["date.html"] : "", $showStatus ? $args["components"]["status.html"] : "", $showShare ? $args["components"]["share.html"] : "", $showLink ? $args["components"]["link.html"] : ""], $args["components"]["header.html"]);
+            $headerComponent = str_replace(["{AUTHOR}", "{CITY}", "{DATE}", "{STATUS}", "{SHARE}", "{LINK}"], [$args["components"]["author.html"], $showCity ? $args["components"]["city.html"] : "", $showDate ? $args["components"]["date.html"] : "", $showStatus ? $args["components"]["status.html"] : "", $showShare ? $args["components"]["share.html"] : "", $showLink ? $args["components"]["link.html"] : ""], $args["components"]["header.html"]);

the related variable (is) should be evaluated like

Spoiler
$showCity
+
+        $showCity = false;
+        //$city .= apply_filters("wpdiscuz_comment_city", "", $comment, $user["user"], $args["city"]);
+        //$city = isset($commentMetas[self::META_KEY_CITY]) ? strval($commentMetas[self::META_KEY_CITY]);
+        $city .= 'London';
+        if ($city) {
+            $search[] = "{CITY_WRAPPER_CLASSES}";
+            $search[] = "{PRE_CITY}";
+            $search[] = "{CITY}";
+            $replace[] = "wpd-comment-city";
+            $replace[] = "from";  //TODO: language depended 'from'
+            $replace[] = $city;
+            $showCity = true;
+        }
+

The [code]city.html[/code] is simple as:

<div class="{CITY_WRAPPER_CLASSES}">
<span class="pre">{PRE_CITY}</span>&nbsp;{CITY}&nbsp;
</div>

My Problem now is that I did not manage to load the META-VAR {CITY} - which is saved with the comment - from the database. Both variants (see above) won't work.
How do I get the value?

 

...and how can I make my changes persistent without loosing them on Update/Upgrade of the Plugin? Simply copy the changes to the 'plugins' folder of my Child-Theme?

Thanks for any constructive help!

Asti
 Asti
Support
(@asti)
Joined: 6 years ago

Illustrious Member
Posts: 7056

@nstoeckigt,

The update safe way for this kind of customization is described here: https://wpdiscuz.com/docs/wpdiscuz-7/customization/custom-template-and-style/

I may suggest you to get the value of the city field using the $commentMetas variable in the class.WpdiscuzWalker.php file.

The meta_key you can find by editing the current field, click on the "Advanced Options" button.  

image

Here is an example: 

isset($commentMetas["META_KEY"][0]) ? $commentMetas["META_KEY"][0] : ""

You'll need to change the red marked part with corresponding meta_key. 

(@nstoeckigt)
Joined: 3 years ago

Active Member
Posts: 9

Thanks again @asti,

unfortunately this doesn't work as expected. I changed the META_KEY to 'CITY' and also applied it to older entries.

image
$city = isset($commentMetas["CITY"][0]) ? $commentMetas["CITY"][0] : "";

but it seems the Key is not in the List. I failed to `print_r` or `var_dump` the variable so I can't say for sure.

In the Database in Table `commentmeta` I see entries like

meta_id comment_id meta_key meta_value
50 9 city Dublin

 It doesn't matter if I write the `meta_key` in upper or lower case.

Asti
 Asti
Support
(@asti)
Joined: 6 years ago

Illustrious Member
Posts: 7056

@nstoeckigt,

In our case the solution works fine. 

Could you please send the admin login details to info[at]gvectors.com email address? I'll ask the developers to check the issue. 

(@nstoeckigt)
Joined: 3 years ago

Active Member
Posts: 9

@asti
I upgraded to the last recent version and pushed back my changes. When my customer checked with the results a few days later we realized that the changes in fact work as intended.

I will post a final message recompiling all my changes so others my implement the same or similar solutions.

Thanks for your help! 😍 

Posts: 9
Topic starter
(@nstoeckigt)
Active Member
Joined: 3 years ago

Any Idea from the wpdiscuz-Team itself?

Mayby you, @asti, might help me with this?

2 Replies
Asti
 Asti
Support
(@asti)
Joined: 6 years ago

Illustrious Member
Posts: 7056

@nstoeckigt,

Sorry for the late response. 

We're really sorry, but there is not any simple solution we can post here. We may suggest you use the wpdiscuz_comment_author hook for this customization.

(@nstoeckigt)
Joined: 3 years ago

Active Member
Posts: 9

@asti Thank you, at least this is a "point towards the direction where to change what to archive what I'm looking for"!

I update this Post when I find a solution to let you all know what to do in similar cases.

 

Posts: 9
Topic starter
(@nstoeckigt)
Active Member
Joined: 3 years ago

Hi @ll,

finally I will summarize what I have done to archive this. It might inspire in similar situation.

Start by adding your additional Field in your Form

image

You might want to change the META-KEY under Advanced Options to something more readable to use in your code.

image

Have a look into the Database in Table `commentmeta` to see the real META-KEY because it is case-sensitive!

meta_id comment_id meta_key meta_value
50 9 city Dublin

In my case, even I wrote the META-KEY in uppercase on the Form Editor, it is saved in lowercase to the database.

Now you can start coding.

Create a Child-Theme to make all your changes update proof!

Add the following folder structure to it:

wpdiscuz/
├── class.WpdiscuzWalker.php
└── layouts
├── 1
│   ├── author.html
│   ├── city.html
│   ├── header.html
│   └── style.css

Create the file  city.html  is simple as:

 
Create the file  header.html  is simple as (original:  httpdocs/wp-content/plugins/wpdiscuz/themes/default/1/header.html):
 
<div class="{HEADER_WRAPPER_CLASSES}">
    {AUTHOR}
    {CITY}
    {DATE}
    {STATUS}
    {SHARE}
    <div class="wpd-space"></div>
    {LINK}
</div>
 
I copied the file  httpdocs/wp-content/plugins/wpdiscuz/themes/default/style.css  → httpdocs/wp-content/themes/CHILD-THEME/wpdiscuz/layouts/1/style.css  and added the following lines:
#wpdcom .wpd-comment-header .wpd-comment-city{ }
#wpdcom .wpd-comment-header .wpd-comment-city .pre{font-style: italic;}
 
I also just copied the  author.html  but didn't modified it.
 
The last part isn't that difficult but a little more complex. You have do add the functionallity via  class.WpdiscuzWalker.php  which you just copy from  httpdocs/wp-content/plugins/wpdiscuz/themes/default/class.WpdiscuzWalker.php.
 
I added my changes just logically under the author section - here is the diff to the original one:
@@ -93,6 +93,33 @@
             $commentWrapperClass[] = "wpd-reply";
         }
 
+	$showCity = false;
+	$city = isset($commentMetas["city"][0]) ? strval($commentMetas["city"][0]) : "";
+	if ($city) {
+	    $search[] = "{CITY_WRAPPER_CLASSES}";
+	    $search[] = "{PRE_CITY}";
+	    $search[] = "{CITY}";
+	    $replace[] = "wpd-comment-city";
+	    switch( get_locale() ) {
+	      case 'de_DE':
+	          $replace[] = "aus";
+	          break;
+	      case 'fr_FR':
+	      case 'es_ES':
+	          $replace[] = "de";
+	          break;
+	      case 'it_IT':
+	          $replace[] = "da";
+	          break;
+	      case 'pl_PL':
+	          $replace[] = "z";
+	          break;
+	      default:
+	          $replace[] = "from";
+	    }
+	    $replace[] = $city;
+	    $showCity = true;
+	}
+
         $showDate = false;
         if ($this->options->thread_layouts["showCommentDate"]) {
 
@@ -429,7 +451,8 @@
             $replace[] = $content . $comment->comment_content;
             $replace[] = "wpd-comment-left " . esc_attr($commentLeftClass);
             $leftComponent = $showAvatar || $showLabel || $showFollow ? str_replace(["{AVATAR}", "{LABEL}", "{FOLLOW}"], [$showAvatar ? $args["components"]["avatar.html"] : "", ($showLabel ? $args["components"]["label.html"] : "") . apply_filters("wpdiscuz_after_label", "", $comment), $showFollow ? $args["components"]["follow.html"] : ""], $args["components"]["left.html"]) : "";
-            $headerComponent = str_replace(["{AUTHOR}", "{DATE}", "{STATUS}", "{SHARE}", "{LINK}"], [$args["components"]["author.html"], $showDate ? $args["components"]["date.html"] : "", $showStatus ? $args["components"]["status.html"] : "", $showShare ? $args["components"]["share.html"] : "", $showLink ? $args["components"]["link.html"] : ""], $args["components"]["header.html"]);
+//            $headerComponent = str_replace(["{AUTHOR}", "{DATE}", "{STATUS}", "{SHARE}", "{LINK}"], [$args["components"]["author.html"], $showDate ? $args["components"]["date.html"] : "", $showStatus ? $args["components"]["status.html"] : "", $showShare ? $args["components"]["share.html"] : "", $showLink ? $args["components"]["link.html"] : ""], $args["components"]["header.html"]);
+            $headerComponent = str_replace(["{AUTHOR}", "{CITY}", "{DATE}", "{STATUS}", "{SHARE}", "{LINK}"], [$args["components"]["author.html"], $showCity ? $args["components"]["city.html"] : "", $showDate ? $args["components"]["date.html"] : "", $showStatus ? $args["components"]["status.html"] : "", $showShare ? $args["components"]["share.html"] : "", $showLink ? $args["components"]["link.html"] : ""], $args["components"]["header.html"]);
             $footerComponent = $showVote || $showReply || $afterReplyButton || $showTools || $showToggle ? str_replace(["{VOTE}", "{REPLY}", "{TOOLS}", "{TOGGLE}"], [$showVote ? $args["components"]["vote.html"] : "", ($showReply ? $args["components"]["reply.html"] : "") . $afterReplyButton, $showTools ? $args["components"]["tools.html"] : "", $showToggle ? $args["components"]["toggle.html"] : ""], $args["components"]["footer.html"]) : "";
             $rightComponent = str_replace(["{HEADER}", "{REPLY_TO}", "{TEXT}", "{FOOTER}"], [$headerComponent, $showReplyTo ? $args["components"]["reply_to.html"] : "", $args["components"]["text.html"] . $lastEdited, $footerComponent], $args["components"]["right.html"]);
             $wrapperComponent = str_replace(["{LEFT}", "{RIGHT}"], [$leftComponent, $rightComponent], $args["components"]["wrapper.html"]);
 
The code is just an adoption of similar code blocks like for the author.
 
That's it! Have Fun and Good success!
 
1 Reply
(@nstoeckigt)
Joined: 3 years ago

Active Member
Posts: 9

I found an error which I can't correct in my previous Post so here is the correct folder structure within your child theme:

Add the following folder structure to it:

wpdiscuz/
├── class.WpdiscuzWalker.php
└── layouts/
│   ├── 1/
│   │      ├── author.html
│   │      ├── city.html
│   │      ├── header.html
│   │      └── style.css  

Share: