Styling Form Data in WP Post Editor

CMS & WordPress
1

I have a form on one of my Wordpress Pages with the data being processed in a linked PHP file and then displayed underneath the form. I was wondering if I could style the returned form data in the Wordpress Post editor instead of linking an external css file?

Like this (this is whats in the Wordpress Page Editor):


<p><h1><? include('process_test.php'); ?></h1></p>

The code above works, but say I wanted to make it green and centered:


<p style="text-align: center;"><strong><span style="color: #008000;"><? include('process_test.php'); ?></span></strong></p>

It then doesn’t work (well, only the bold part does but not the align center or color), is this a simple user error or will I just have to do this in a css file?

Thanks.

2

Inline styles are not very efficient, but they certainly work. A much neature version of that would be:

<p style="text-align: center; font-weight: bold; color: #008000;"><? include('process_test.php'); ?></p>
3

Thanks but that didn’t affect the text at all?

4

It should do. Do you have a live example?

5

Check it out here:

test1

Just put in any form info and scroll down to the bottom of the page after you click submit. I have this code in there:


<p style="text-align: center; font-weight: bold; color: #008000;"><? include('process_test.php'); ?></p>

However, like I stated before if I just have:


 <p><h1><? include('process_test.php'); ?></h1></p>

It works fine and displays the output in the H1 heading.

6

Hmm, I don’t see anything at the bottom when I do that. (If I fill in the form and Submit, nothing happens.) Nesting an H1 inside a <p> like that is invalid, though, so it’s better to sort this properly.

7

Strange, it works for me. Try doing AT&T - Black - Jailbroken - iPhone 4 - New, as the form data.

I know, I was just giving a quick example saying that if I make it bold or in the H1 heading it will work. But not if I try and center it, make if a different color, etc.

8

WP is creating its own <p> element from that code. The <p> with styles is there, but empty. So I guess you need to dig i to where the actual <p> that appears s created and add the styles there.

Or, you could just add something like this to your style sheet:

.textcontent p {text-align: center; font-weight: bold;}

But it may affect other <p>s in there.

9

Yea like you said that affects every <p> and I just want the outputted form data affected.

Since PHP isn’t actually valid in a WP Page/Post I installed a plugin that will except it in the post editor, but when viewing the source code of the page the PHP doesn’t display:


<p style="text-align: center; font-weight: bold; color: #008000;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></p>
<p></head></p>
<p><body></p>
<p></body><br />
</html></p>

And shows nothing after the
<p style=“text-align: center; font-weight: bold; color: #008000;”>

EDIT: Think I found a plugin that disables the automatically generated <p> and </ br>'s in the post, trying it now…

10

Got it to work, take a look and let me know if it works for you:

test1

11

Hah, you tricked me. It’s at the top now. (I didn’t see it at first.)

Visually it works, but it outputs some weird code:

<span style="color: #008000;"><br>

<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>Untitled Document</title>

Your iPhone is worth: $193

<br>
</span>
12

It doesn’t display that code on the page right? I tested it in IE, FF and Safari and it seems to be OK.

13

No, just ‘under the hood’. But that’s pretty bad code, really not appropriate at all. The fact that it displays OK is more luck than anything else, I suspect.

14

Is that on my part or do you think its Wordpress? The code I have to make it bold, green, etc. was all generated by WP, I didn’t manually write it. I don’t think it was ever like that before (however I never checked), it could be the plugin I have that stops WP from adding the <br> and <p>'s.

15

Yes, some software (plugin etc.) is adding that junk in. I tend to avoid plugins like the plague. They so often create mess like this—perhaps because they are used for things not originally intended.

16

Found out its the plugin I have that enables the PHP inside WP Posts/Pages. Unfortunately, all of the PHP enabling plugins I’ve come across add that. Would you say its save to just ignore it or would I be better off in the long run finding a way around it?

17

Ah well, there are two school of thought on the web: one that says, “if it looks ok, leave it” and the other, “good code matters, whether it makes a visual difference or not”.

Really, it’s better not to have invalid code like that, as you never know what some device will trip on it. It’s a bit like driving a car that has dodgy brakes: you may get away with it, but it would be safer to get the potential repaired properly.

18

Figured out why its adding that in their.


<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>Untitled Document</title>

That is the doc type that is at the top of my php file. And instead of displaying all of the code in my php file it just displays what was outputted:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Form Process</title>
</head>

<body>
Your iPhone is worth: $214
</body>
</html>

(Sorry if you already knew that). If I’m not mistaken either way that’s going to have to be their to display the output of the php file (correct me if I’m wrong, I’m a bit of a noob).

19

Ah, well if the plugin is just pulling in a .php file, you can remove everything except just the link of text you want. You only need all that other stuff if the file is going to be a full page in its own right. But a file that is just going to be inserted into another page doesn’t need all those doctypes etc.

20

OK I removed the doc type and all that, but I’m assuming I still need the <head> and <body> tags, or can I also remove those and just have the <?php?> tags and of course my PHP code.

EDIT: Removed them and it works like a charm. Source Code is cleaned up to:


<h3 style="text-align: center;"><span style="color: #008000;"><br />
Your iPhone is worth: $110<br />
</span></h3>
<p></DIV></p>

(I didn’t add the <p>'s around the closing <div> tag, once again WP did that)