I am new to Wordpress and am implementing a shortcode. My shortcode is super simple and the expected output is HTML5-compliant:
add_shortcode( 'my_code', function( $attributes ){
return '<div></div>';
});
When this gets emitted, I get the following HTML:
<a href="#">
<div></div>
<p></a>
As you can see, there appears to be auto formatting going on. I have followed the advice here, here, and have installed this plugin, all to no avail. I am looking for the magic secret that is making this formatting occur. Any assistance would be appreciated!
I cannot recreate the problem, after running the example i get the right output:
<div></div>
( the original HTML source, not the modified one that console shows, the HTML panel in console shows a live view on what the browser is showing )
The problem is when a shortcode output is wrapped inside paragraph, then the output is something like:
<p>Some text <div></div></p>
The blame for this broken HTML ( in HTML5 <div> inside <a> is permitted, but <div> inside <p> is not ) is on WordPress filter wpautop. That filter encloses text with <p> tag, replaces double line breaks with <p> tags, and single line breaks with <br /> tags. If the shortcode is right after the text its output will be part of the paragraph. To avoid that just put the new line between the text and the shortcode.
Some text
[my_code]
Some text
As I said I am a newb with Wordpress and I am learning the ropes here. It turns out the problem is due to a plugin. I deactivated all my plugins and the problem went away. So, lesson learned: if you have a really weird problem, disable plugins first to see if that is the source. Thanks to #Danijel for helping me out with this!
EDIT: FWIW, the plugin that causes this issue is this one (v1.0.18): https://wordpress.org/plugins/smpl-shortcodes/
Related
I'm trying to use a popup plugin for wordpress (https://wordpress.org/plugins/anything-popup/). Problem is, it's adding breaks to my text when I try to use the shortcode in the middle of a sentence.
See here: http://www.universaltheosophy.com/secret-doctrine-lexicon/
What should read:
"The Secret Doctrine Lexicon is a project set up by..."
ends up with a rogue paragraph break. Here's what I see in the source-code:
<p style="text-align: justify;"><i>The Secret Doctrine<br />
<style type="text/css">#AnythingPopup_BoxContainer2 ....
Now, I've tried disabling wpautop and it didn't make any difference. I'm not versed in php, so I have no idea how to edit the plugin itself if that's where the problem is. Anyone willing and able to help me out with this? (the plugin has virtually no support)
I have an html file with this line:
<div >%%GLOBAL_ProductThumb%%</div>
and live it generates this:
<img width="200px" height="200px" alt="" src="[I removed the URL]">
In a PHP file, I see the variable being assigned on this line
$GLOBALS['ProductThumb'] = ImageThumb200x200($rowimg['imagefile']);
I don't know much about PHP, but how can I add fill the "alt" property with text? In what step/where would this occur? If this were Java I wouldn't have a problem figuring out how to set the property of an object, but I'm not quite sure what's going on here. If the context helps, it's custom shopping cart software designed for our business.
PHP has no standard means to add some HTML attribute to a HTML tag. All you can do is build the HTML code as a string, then printing out the string. Which is something your software does by grabbing some other variables, giving you little direct influence on the generated code.
That said, the only thing you can do is inspecting what exactly all those custom functions are returning. If you are lucky, you find the exact HTML code that will land on the page in the end somewhere. From there, it's just a matter of programmatically searching and replacing before handing the final string further down the line.
A jquery hack can do that for you. If you can penetrate that third party app. You can embed a Jquery code that can take care of it on DOM Ready event.
Example:
<script type="text/javascript">
$(document).ready(function(){
$("img[width='200px'][height='200px']").prop("alt", "Your ALT value");
})
</script>
I am using a modified version of ContentFlow in Wordpress 3.9.1 . ContentFlow is a coverflow tool that generates a coverflow from a series of tags and their caption is created from the title=""-attribute.
I have a piece of php code that gets included to individual posts/pages via a template file and the insert php plugin, which runs just fine. It creates img tags that look like this:
<img class="item" src="http://www.path-to-the-image.com/001.jpg" href="http://www.path-to-the-image.com/001.jpg" title="001" id="" />
This all works fine. But when I let wordpress execute the script and render the image I get this:
<img class="item" src="http://www.path-to-the-image.com/001.jpg" href="http://www.path-to-the-image.com/001.jpg" id="">
As you can see the title tag is missing. And it seems to be specifically title tags. If I rename the title tag in php to e.g. "testtitle" I get flawlessly
<img class="item" src="http://www.path-to-the-image.com/001.jpg" href="http://www.path-to-the-image.com/001.jpg" testtitle="001" id="" />
So it seems Wordpress is suppressing the title tag by force. I have no plugins that should do this. Any ideas where the tag goes missing?
I have another installation running on the same server that does not have this issue, also running Wordpress 3.9.1
I found this on wordpress.org:
IMG Title Restore
WordPress 3.5 introduced a new feature – when images are inserted into posts, the title attribute is not included in the image tag. This was done with the best of intentions relating to accessibility, as documented on Trac
Unfortunately, this causes problems for some Lightbox plugins, quite apart from stopping image tooltips from appearing.
This plugin hooks into the media_send_to_editor filter and inserts the image title into the html inserted into the post.
First off I have gone through this link http://codex.wordpress.org/Integrating_WordPress_with_Your_Website. I cannot use this.
I am trying to get the latest post from a WordPress installation on a remote server I own. They share the same database server so that is where I am taking the post now and then brining it back into my PHP app. This all works.
What doesn't work is the display. Before I was using nl2br to make new lines but this does not work right.
I have noticed that WordPress does some post-processing to add p tags to certain lines they consider should be paragraphs (not in uls or lis for example). They do this after grabbing the post from the DB (the p tags are not saved to DB).
I have tried to find out what post-processing they use in the source code but I have come up blank after finding the the_content function etc and where the $post var comes from but not finding the code I am looking for.
What post-processing function does WordPress use to add these paragraphs to make their posts look ok?
Edit
For regex or general PHP people here I am looking to change something like:
<em>awesome link</em>
<h3>Awesome Head</h3>
lalalaalal
<ul>
<li>Awesome li</li>
</ul>
Into something like:
<p>
<em>awesome link</em>
</p>
<h3>Awesome Head</h3>
<p>lalalaalal</p>
<ul>
<li>Awesome li</li>
</ul>
Missing out tags that obviously should not have p tags around them like h and ul and li tags.
The easiest, fastest way: parse the latest post from the RSS feed. You'll find all of the <p> tags automatically added for you.
The right thing to do would be as #BryanH said: use the RSS feed which already has the post pre-formatted for you.
However if you don't want to make an XML parser and deal with all the stuff that comes with it just to get a blog post then you can use something like:
$content = preg_split('/\\r?\\n/', str_replace(']]>', ']]>', $post->content));
foreach($content as $line){
if(strlen(trim($line)) > 0){
$line = trim($line);
if(!preg_match('/^(<|<\/)(ul|li|div|h[1-6])/', $line)){
echo '<p>'.$line.'</p>';
}else{
echo $line;
}
}
}
This is the code I personally used to solve this problem in the end.
There is probably a more robust and elegant way of doing this (quickly coded) however I tested this on a very complex blog post with images and lots of different tags and it seemed to work nicely without any errors.
I am still unsure what WP uses but this solves my problem in the end.
I am dealing with HTML that's been generated with FCKeditor. So it will look something like this:
<p>Paragraph</p>
<ul>
<li>List item</li>
</ul>
No head tag, no body tag, just a snippet of HTML.
I am trying to add support for certain variables that, when inserted into the HTML, will be replaced with dynamic content. So the HTML, variable inserted, might look like this:
<p>Here's a variable: {widget}</p>
I want to replace {widget} with this:
<div class="widget">Hi, I'm a widget.</div>
FCKeditor encapsulates content (rightly) into paragraphs when you insert a line break. So if I did a straight replace, the resulting HTML would be this:
<p>Here's a variable: <div class="widget">Hi, I'm a widget.</div></p>
That's not going to work because the div tag is inside of the p tag. So what I want to do is close the paragraph and insert the DIV after it:
<p>Here's a variable: </p>
<div class="widget">Hi, I'm a widget.</div>
Let's take this example:
<p class="someclass">Here's a <strong>variable: {widget} more</strong> content
after</p>
I would want this result:
<p class="someclass">Here's a <strong>variable: </strong></p>
<div class="widget">Hi, I'm a widget.</div>
<p class="someclass"><strong> more</strong> content after</p>
At every instance of {widget} in HTML snippet, I need to make a "break" in the HTML. Which is to close every open tag, insert the widget code, then open them all again in order.
Is this possible using a PHP HTML parser? If so, how would I go about it?
I would suggest an entirely different approach. (F)CKEditor can already do what you want. Just try to add a table in the middle of a paragraph. It will close the inline tag stack, add the table, and reopen the stack again.
I suggest that, instead of having your users write {widget}, you write an (F)CKEditor plugin that adds the widgets for you. You can take a look at the code for the table button (or any other block-level element) to see how (F)CKEditor inserts them.
There are two things you can do when a user hits the "widget" button. Eitther you insert some custom tag such as <widget type="foo" />, or you insert a HTML tag that you can recognise later on, like <div class="widget foo"></div>.
With some extra elbow grease you can even make this fancier by actually loading the widget itself, wrapped in such tags. That way, the user would see exactly the same in the editor window as when it was stored. When the editor saves to the server, simply empty the tags wrapping the widget to get rid of it.
Example workflow (cursor marked by | sign):
User types text:
<p>foo bar| baz</p>
User hits "widget" button:
<p>foo bar</p>
<div class="widget foo"> ... contents of "foo" widget ... </div>
<p>|baz</p>
When saving, drop the widget contents:
<p>foo bar</p>
<div class="widget foo"></div>
<p>baz</p>
When displaying the saved contents, parse for div tags with a "widget" class and dynamically fill it:
<p>foo bar</p>
<div class="widget foo"> ... contents of "foo" widget ... </div>
<p>baz</p>
This could be done post-process when saving with regex if you were pretty careful about what you allowed. Alternatively, I do a fair amount of juggling on the front end with my editor (CKEditor) output, combining the user-input content plus things that I jam in both between and around the string that I parse and regex.
Another option to be explored is the BBCode plugin that CKEditor has added. Having been a longtime user of FCK plus a current user of CK, I can tell you that it's well worth the time to make the upgrade. And, according to the CK Developer site, it claims to be built-in. I also found a plugin that will allow BBCode. Both could easily be adapted for your purpose.
Finally, if you're adventurous and confident with Javascript, the HTML Processor can be hacked to do quite a few things. For instance, CK now outputs with styles rather than traditional HTML, and my editor does strictly HTML Emails which don't support style declarations so well. So, I hacked the HTML Processor's code to output everything with height=, width=, align= etc rather than style="height=x; width=x" etc.