I've extended Wordpress' caption shortcode with a couple custom attributes in addition to caption's default: ID, align, width, and class. My new attributes work great while everything is in Text mode. However if I switch to Visual mode and then back to Text my custom attributes get stripped off the shortcode.
For instance:
[caption id="attachment_6" align="alignright" width="300" custom_attr="value"]<img src="http://localhost/wp-content/uploads/2010/07/800px-Great_Wave_off_Kanagawa2-300x205.jpg" alt="Kanagawa" title="The Great Wave" width="300" height="205" class="size-medium wp-image-6" /> The Great Wave[/caption]
becomes:
[caption id="attachment_6" align="alignright" width="300"]<img class="size-medium wp-image-6" title="The Great Wave" src="http://localhost/wp-content/uploads/2010/07/800px-Great_Wave_off_Kanagawa2-300x205.jpg" alt="Kanagawa" width="300" height="205" /> The Great Wave[/caption]
The attribute is removed and the classes on the image get swapped around so clearly some process is going on.
I'm inserting my custom attributes via the media_send_to_editor event that occurs between the media library and the editor. I've tried adding these new attributes via the tiny_mce_before_init event but can't find any real documentation beyond this WIP VIP tutorial which only seems to work from standard HTML DOM elements and not WP shortcodes.
Does anyone know how Tiny MCE handles content filtering of shortcodes, especially when it comes to switching between Visual and Text modes? Is there a filter or action where I can add my custom attributes to a whitelist of what's allowed in that transition? Thanks.
Related
So I am working on making a child theme of the "twenty fifteen" theme.
So far I have made custom post types with custom fields. It is imperative that I use custom fields for adding Soundcloud embedds. I have used the "Advanced Custom Fieds" plugin to do so.
Now, the problem I have is that whenever I use the custom field to add a soundcloud widget (just by pasting the link) it seems that the WYSIWYG Editor is adding the link inside a paragraph like this
<p>https://soundcloud.com/skitofficial/skit-ghost-dog</p>
This causes (I think) a white line (a new paragraph) to appear below the Soundcloud widget.
As you can see in the picture below, if I open the code view of the WYSIWYG I can spot the paragraph lines being added around the link.
So all in all, the main problem for me here is the white space below the soundcloud widget. Perhaps it does not have to do anything with the paragraph tag, but either way I the space below the widget looks bad, unprofessional and I need to remove it somehow. Now you may say "why don't you just remove those paragraph tags?" and that is the problem, even if I remove them, they are added automatically.
So, any suggestions would be very appreciated. I have worked my head on this for three days without any progress.
Edit: this question is old and I do not have the site anymore.
I would just add this style to a global stylesheet:
.SoundcloudEmbedd p { margin: 0; }
seems safe
Wordpress WYSIWYG pops in <p> tags. If you're not careful, it will <p> all over your content.
https://codex.wordpress.org/Function_Reference/wpautop
Pop this into your functions.php
remove_filter( 'the_content', 'wpautop' );
EDIT
If you're using ACF, the text area field type has an option for whether or not to add the <p> tags. As mevius suggests, depending on your use case, you may want to consider using the URL field type.
OR, you can use this when calling the field in your theme.
the_field('wysiwyg_field', false, false);
It's possible that the WYSIWYG is adding those <p> tags, due to WordPress's wpautop function.
Rather than completely disabling wpautop, you could remove the <p> tags using a combination of get_field() and wp_strip_all_tags():
echo wp_strip_all_tags( get_field('field_name'), true );
EDIT: On second thought, why are you using a WYSIWYG for this at all? If you're just pasting a link, you should consider using a text field, or a url field.
I did not have access to the code, nor I had access to any plugins, hence I tried this only using the WYSIWYG editor.
To remove the any unwanted paragraphs from any particular web element like div just follow these steps:
add a class to your div (the div which is containing that unwanted paragraphs).
Write a javascript function using querySelectorAll.
Example Below:
var blankps=document.querySelectorAll('.removePara p');for(var i=0;i<blankps.length;i++){blankps[i].remove();}
<div class="col-xs-12 col-md-3 removePara">
<p></p>
How to Remove Empty Paragraphs. Solved.
<p></p>
</div>
Note: This will remove all the paragraphs inside any div which has class="removePara".
Hope this helps someone.
So this seems to not work on wordpress, any reason why this might be happening, I am using Advanced Custom Fields plugin and every custom field shortcode I have used in my content editor which is executed using the_content(); is working perfectly fine. even shortcodes in <a href=""> tags.
But for some reason this one gets ignored, if I take it out of the style="" and test it, I get the image URL value, but in the background-image: attribute I get no value.
<header class="docs-main" style="background-image: url('[acf field='header-background-image']');">
</header>
I am using the Avada theme on my WordPress which makes use of Countdown Boxes, constructing pages using the provided Fusion Page Builder. The countdown box will show the number of days to a certain date which is output through a plugin called Days-Until. Syntax for implementing this: [days_until date="15 April 2015"].
I am trying to use this Days-until shortcode and pass the value to the countdown box shortcode using the Fusion (WYSIWYG Editor):
[counters_box columns="4" color="" title_size="" icon_size="" body_color=""
body_size="" border_color="" class="" id=""][counter_box value="[days_until
date="4 April 2015"]" unit="" unit_pos="suffix" icon="" direction="up"]"
unit="" unit_pos="suffix" icon="" direction="up"]Text[/counter_box]
Unfortunately the code doesn't work, and the following is displayed.
0 (in the counter box)
unit=”” unit_pos=”suffix” icon=”” direction=”up”]” unit=”” unit_pos=”suffix” icon=”” direction=”up”]Text
Is it even possible to do what I'm trying to do?
Thanks
It's not possible to nest one shortcode inside another (i.e. your days_until shortcode inside the counter_box) without some programming.
It's a commercial theme so we're unable to see the original PHP code.
What'd you need to do is edit the code for counter_box so it calls do_shortcode on the value parameter.
do_shortcode is a function that expands any shortcodes in the supplied text (in the same way they are if they've been pasted into the content field of a Page or Post), so the days_until code will be converted to a number that the counter can use.
I would suggest getting in touch with the theme developer.
Further reading: WordPress Shortcode API
NOTE: Previous questions on this subject only relate to content entered into the main Wordpress editor window - NOT custom fields in the admin area. The accepted answers do not answer this question.
This question is specific to removing surplus <p> and <br /> tags within custom fields.
Using Wordpress I know it's pretty simple to remove the <br/> and <p> tags from the content entered in the editor:
remove_filter('the_content', 'wpautop');
However, while this deals with content entered in the main post info window, this isn't being applied to markup entered in a 'Types' custom field in a custom post type. There, when content is pasted in, it still gets the auto <p> and <br /> tags.
I can work around this temporarily by altering the core includes/formatting.php file:
function wpautop($pee, $br = 0) {
However, this will get overwritten on future Wordpress upgrades. How can I remove auto <p> and <br/> tags from any content entered in the Wordpress admin area - specifically custom field areas where the remove_filter on the_content has no effect?
first time I'm trying to do this so please bear with me :)
I'm building a WordPress theme, and while using wp_nav_menu I'm trying to replace a generated link text with a custom image I made.
So, in essence, what I need done:
1) this text needs to be replaced
2) <img src="<?php bloginfo('template_url'); ?>/images/with-this-image.png" />
I've tried some different tests with jQuery, but I can't find the right combination to make it work.
Any help would be greatly appreciated, thanks!
replace the text that is generated "this text needs to be replaced" with
<img src="/images/with-this-image.png" />
if you want to do it with jquery drop an ID on the a tag and reference that ID.
Create a new menu so you don't overwrite your current one (makes it easier to switch back if you decide to change it.
In the new menu you've created, instead of adding pages or posts the traditional way (using the check-boxes and adding to menu), you can use this method:
Open a blank page (it won't be saved, it's just easier to get the html code for the next step). With the blank page open, click HTML to enter HTML view. Now upload the image you want to use for the navigation link. Copy the html code (make sure you don't copy the P Tags. The coppied result would look something like this:
<img src="http://yoursite.com/wp-content/uploads/2011/08/Home48x48.png" alt="Home" title="Home" width="48" />
Now to add it to the new menu created:
Go to the new menu you created and paste your image source from the last step into the custom menu label (if the menu items are already added it will say navigation label) where the field that has URL is where you'll add the actual link to your page.