Listing Client_Name, etc in testimonial

Bonus: And is it possible to list the categories the testimonial is in?

“Non calor sed umor est qui nobis incommodat. It’s not the heat, it’s the humidity.Di! Ecce hora! Uxor mea me necabit! God, look at the time! My wife will kill me! Estne volumen in toga, an solum tibi libet me videre?Is that a scroll in your toga, or are you just happy to see me?”
Mary Jones, Atlanta
category1, category2, category3

I’m sorry for the struggle. Keep chipping away at it.

I’m working on a shortcode builder so you don’t feel like you have to learn Klingon.

Here’s a demo for the client fields:
https://demos.wpmission.com/strong-testimonials/the-strong-shortcode/custom-fields/

Listing the categories is not an option but I will add it to the list.

And you might try wp-admin > Settings > Permalinks and selecting “Post name” ??

Got them in… Found that the field name you apply is CASe sENsitive, so applying “City” and using “city” is seen differently.

Now, using this code:

I get too much spacing between client & City/state:
[field name=”client_name” class=”name”][field name=”city” class=”name”][field name=”state” class=”name”]
(There are NO spaces here)
I’d also like to do a comma:
[field name=”client_name” class=”name”][field name=”city” class=”name”],[field name=”state” class=”name”]

But that throws a space before the comma.
Help?

Thanks for pointing out the case-sensitive issue, I will add that to the tutorial and admin screen.

Spaces or line breaks between the shortcodes don’t affect anything.

Try less right margin, like

.testimonial .name {
  display: inline-block;
  margin-right: 0.5em;
}

The comma comes after the right margin, so let’s use left margin instead:

.testimonial .name {
  display: inline-block;
  margin-left: 0.5em;
}

sigh, something eliminated the testimonial text:

That margin-left leaves the huge space
Tiffany Bolling Bristol , TN

-using the margin-right does this (including 2nd line)
Tiffany Bolling
Bristol ,TN
https://perfectlypawsible.com/testimonials/

Post your entire custom CSS for testimonials here. I’m going to replace it.

YOU ARE AWESOME Chris! Thanks. This is my whole custom file:
(Theme options/Custom CSS

#wpmtst-form label ~ span.required {
margin: 0;
}
/* mini theme reset */
.testimonial h3 {
line-height: 24px;
}
.testimonial .content {
padding: 0;
margin: 0;
}
.testimonial p {
margin-bottom: 0.5em;
}
.testimonial .photo {
margin-top: 0;
}
.testimonial .client {
margin-top: 0;
}
/* client: left */
.testimonial .client {
text-align: left;
}
/* client: one-line below */
.testimonial .name,
.testimonial .company {
display: inline-block;
margin-right: 1em;
}

/* client after content */
.testimonial .content {
float: left;
margin-right: 1em;
}
/* or client after heading */
.testimonial .content {
display: none; /* plugin shows content by default */
}
.testimonial .heading {
float: left;
margin-right: 1em;
}

Thanks. You need to edit each testimonial in Text mode and remove any <code class="demo p shortcode"> and <code> that you see. Those snuck in when you copied-n-pasted from the demo site, despite my best efforts to prevent it!

Only found that in the page code, no testimonials.

Body of testimonial still no show on page.

[strong per_page="4" nav="before,after" newest title]

[client]

[field name="client_name" class="name"][field name="city" class="name"],[field name="state" class="name"]

[/client][/strong]

[strong form]

<em>By submitting a testimonial, you agree that we may publish it on our website. Your email address will not be published, of course.</em>

Right, sorry, that’s what I meant. Well done. So I’m clear, you want the title, name, city and state? On the same line? What if it’s too long?

It could be smaller text overall. I’m an old <TABLE> designer (https://recalibrand.com/) learning more about CSS, but it’s slow. I’d like to eliminate a lot of what I see as wasted space in the design overall, but that’s not your issue!!!

The client name could lead off the left as opposed to right. That would help.

One last if I may. How did you style the numbers for pages here:
https://demos.wpmission.com/strong-testimonials/the-strong-shortcode/pagination/

Can that be in that CSS too?

I was also trying to put an anchor in that code above on the page to take people right too the form. That didn’t work either. Thoughts?

First, this is getting hacky because we’re hiding the testimonial content and using the title as an excerpt. I should have mentioned this in the other thread that led you here.

Well, the post has an excerpt field and the plugin can use the excerpt field so let’s use the excerpt field. You may need to enable it in the post editor (“Screen Options” in upper right corner). Then craft an excerpt for each testimonial. Then add excerpt to the shortcode.

Then let’s give each element its own CSS class so we can fine-tune them.

So your shortcode becomes

[strong per_page="4" nav="before,after" newest title excerpt]
[client]
[field name="client_name" class="name"]
[field name="city" class="city"],[field name="state" class="state"]
[/client]
[/strong]

This simplifies the HTML structure which makes for simpler CSS. Semantically, those titles are <h3> headings for proper content.

Do that and tell me in excruciating detail how you would like the testimonials to look (mock-ups welcome) and I will try to style it. Whitespace is good and I think the testimonials should match the theme in that regard.

Second, here’s the demo pagination. Again, every theme is different.

/* Pagination
---------------------------------------------------------*/
ul.simplePagerNav {
	display: block;
	margin: 1em auto;
	padding-left: 0;
	text-align: center;
}
ul.simplePagerNav li {
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.simplePagerNav li * {
	transition: all 0.3s ease;
}
ul.simplePagerNav li.currentPage a {
	text-decoration: none;
}
ul.simplePagerNav li a {
	border: 1px solid #0FBE7C;
	border-radius: 4px;
	color: #0FBE7C !important;
	display: inline-block;
	font-size: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
	text-decoration: none;
	width: 1.5em;
}
ul.simplePagerNav li a:hover {
	background: #0FBE7C;
	color: #FFF !important;
}
ul.simplePagerNav li.currentPage a {
	background: #0FBE7C;
	color: #FFF !important;
}

Third, for an anchor, put a link at the top:

<a href="#strong-form">To the form!</a>

and the anchor above the form:

<a name="strong-form"></a>