This is so crazy that I can't think of what could possibly be happening.
I've got a shortcode defined in functions.php which looks like this:
function company($atts, $content = null) {
extract(shortcode_atts(array(
"linkto" => 'http://url.com',
"status" => 'none',
"size" => 'normal'
), $atts));
return '<div class="company block size-'.$size.'">'.$content.'<span class="status-'.$status.'"></span></div>';
}
add_shortcode("company", "company");
This is followed by the usual, documented way of registering the shortcode, and adding buttons to TinyMCE.
The critical part there is that it returns an anchor enclosing a div (which encloses some content). However, when WordPress renders the page, the HTML output is this:
<p></p>
<div class="company block size-normal"><img class="aligncompanylogo size-full wp-image-60" alt="logo" src="http://path/to/image.png" width="256" height="60"><span class="status-acquired"></span></div>
<a href="http://url.com/">
</a>
<p></p>
You're reading that right: WordPress outputs a p with an anchor first, then the div, followed by the anchor, followed by the content, followed by third anchor, and then a fourth anchor enclosed in p tags. What.
Any ideas on why WordPress outputs HTML completely differently than the way it's supposed to?
EDIT #2: when I try to reproduce your problem, I find the following: Wordpress outputs the HTML as expected but the browser rearranges the DOM. I believe the browser is doing this because your shortcode adds a div element inside a p element which is invalid HTML.
In addition to the workarounds posted below you could prevent Wordpress from turning line breaks into p tags by adding the following to functions.php:
remove_filter( 'the_content', 'wpautop' );
Putting a div within an anchor tag is invalid. Is it possible something somewhere is attempting to fix the invalid HTML?
Something in Wordpress is considering a div nested withing an anchor tag invalid and trying to fix it. Two workarounds,
Change your div to a span.
Change your div to another HTML element and make sure TinyMCE considers it valid by adding a hook to functions.php - in this example, I'm changing the div to article and adding article as a valid child of anchor:
function modify_valid_children($settings){
$settings['valid_children']="+a[article]";
return $settings;
}
add_filter('tiny_mce_before_init', 'modify_valid_children');
Related
I am using a Wordpress theme Flatsome which uses brackets [] in visual editor to output content. I would like to insert a function to theme functions.php which would disable content output and only display the shortcodes as raw text + wrap it in pre tags, just like this:
final result
Currently I am using this function to achieve the result, but it messes up the flow of other content:
function fv_render_raw_content($atts, $content = null)
{
echo '<pre>' . htmlspecialchars($content) . '</pre>';
}
add_shortcode('render_raw_content', 'fv_render_raw_content');
It causes headings inside the page (not wrapped by the function) to change order for no reason:
the problem
I would really appreciate any ideas on what to change so other content flows according to the Wordpress visual editor and is not affected by the function. Thank you!
In your shortcode, the content being outputted is being done so via echoing out which although is fine, however in order to maintain call stack priority from the theme, I'd recommend returning content inside your shortcode rather than echoing it out onto your page.
You also might want to look into wrapping your $content variable around some sort of a content sanitization method like sanitize_text_field to ensure that no additional markup is being added to the page from the where the shortcode is being used, and that whitespaces are also removed.
https://developer.wordpress.org/reference/functions/sanitize_text_field/
Another thing you can do is re-work your shortcode such that you have an attribute which is the heading text of the shortcode. This can then be sent in as a parameter to your shortcode function, and if you're echoing content into the page you would first do so by outputting the header, followed by the content which wraps those <pre> tags.
I would like to know how I can modify the menu title within the template.php of the theme I am using.
So far, I have been able to modify both the UL and LI elements by using hooks: THEME-NAME_menu_tree__MENU-NAME and THEME-NAME_menu_link__MENU-NAME respectively. However, I cannot access the menu title form either of those (or at least that's what I think). I have tried to use the THEME-NAME_menu__MENU-NAME hook, but it seems that the function is simply being ignored.
Thank you for your time.
Your menu is generated within a block. You should be able to change the subject / title by preprocessing the block. For example, change all subjects of blocks and wrap a <span> around it.
function MYTHEME_preprocess_block(&$variables) {
$block = $variables['block'];
$block->subject = sprintf('<span>%s</span>', $block->subject);
}
I'm trying to add <br /> code to widget titles in Wordpress, as most of my widget's titles are on two lines, and I would like to format the text so it makes more sense to the reader.
I've tried a few different suggested solutions, including adding various code to the Functions file:
add_filter('widget_title', 'change_widget_title', 10, 3);
function change_widget_title($title, $instance, $wid){
return $title = str_replace('Widget Title', '<span style="color: red">Custom</span>', $title);
}
That didn't work for me unfortunately.
Nor did #4 on this page:
http://www.rvamedia.com/wordpress/customize-wordpress-widget-title
I don't even need the title to link to anything, I just want to put in a <br /> so it'll show properly on two lines.
Any help would be greatly appreciated.
I know its a little late for the answer but may be it will help others
Its very simple, You can get help from shortcode by
add_filter('widget_title', 'do_shortcode');
function line_break() {
return '<br />';
}
add_shortcode('br', 'line_break');
Put this in your functions.php file at the end than use <br/> as shortcode i.e. br
I figured out an alternative to this issue.
Instead of putting a br in the widget title, I put the first line of the title as the title, and then inserted a div with the same background color and text color at the very top of the text widget that had the second line.
You can then style this div to have the same qualities as the widget title e.g. no underline, no text transform, etc. to make it look the exact same as the widget title.
I'm in a bit of a sticky situation with a custom excerpt function I'm using.
Here's a link to the Pastebin with the Custom Excerpt Function: http://pastebin.com/gK0AWQbt
This is the blog index using the function: http://club16.abcguide.com/blog/
Also, the code I'm using here is: <?php echo excerpt(300); ?>
And here's the post on the single page, with proper formatting: http://club16.abcguide.com/newsletters/jan-2012/
Essentially the excerpt function I'm using isn't generating my <p> tags around elements, I'm not sure how I can modify the function to have it do this efficiently.
Also, if I can have more control of when the excerpt ends (maybe even per post? If I could make it identify a specific class and cut there..) that would be amazing.
But focusing on the task at hand, I'm in dire need of a solution!
By default excerpt shows first 55 characters and it strips out all html tags. If you want to increase the length of the excerpt function then you can us a filter like one given bellow, just add this code snippet in your functions.php file of your theme and wrap the function call inside a p tag in the index.php file.
function new_excerpt_length($length)
{
return 300;
}
add_filter('excerpt_length', 'new_excerpt_length');
Use the_excerpt() instead of the_excerpt(300) in your index.php file inside the p tag.
<p class="someclass"> <?php the_excerpt(); ?> </p>
I have an anchor element like this:
<img src="/uploads/img.jpg" alt="" title="" width="1268" height="377" class="alignnone size-full wp-image-7076" />
(It's the standard way of Wordpress to embed uploaded pictures in a post.)
I want to remove the anchor around the image element, but keep the image. I simply want the image to show without being clickable.
This could be done either with a filter for the content of a post in Wordpress or after the page is loaded with javascript. Filtering in Wordpress would be preferred. I have no idea how to do either of those two options.
Find helpful code here:
Tried out, but caused invalid code.
Your code in ../your_theme/functions.php would look like this:
function remove_anchor($content) {
// the code for removing the anchor here
$content =
preg_replace(
array('{<a(.*?)(wp-att|wp-content\/uploads)[^>]*><img}', '{</a>}'),
array('<img',''),
$content
);
return $content;
}
// then use WP's filter/hook system like this:
add_filter('the_content', 'remove_anchor');
Go into your WP theme's folder, edit "functions.php". Add code like this:
function remove_anchor($data)
{
// the code for removing the anchor here
// (not sure if you need help there, too).
// you will work on the $data string using DOM or regex
// and then return it at the end
return $data;
}
// then use WP's filter/hook system like this:
add_filter('the_content', 'remove_anchor');
The add_filter means that every time a post is displayed, the remove_anchor function is called.
jQuery is probably easier, you just need to identify the images and not make them clickable (this is untested)
$(document).ready(function()
{
$('#post a.some-class-name').click(function()
{
return false;
}
});