For some reason my WYSIWYG editor in Wordpress automatically adds span classes with style when I create a bullet list with the button. It's very annoying because I want my text to be a certain size, but the span class hardcodes the style and it messes the size up.
Does anyone know how to remove this automatic adding of the span class?
This site is for a customer and he/she doesn't know how to use HTML, that is why this has to work with the WYSIWYG editor.
Help much appreciated. Thanks.
I have the same problem, and I am not copying, each time I create a list, the editor adds in the code:
the text
to the text of the list.
How can I get rid of this ?
I have just find a solution that works for me in that post:
http://wordpress.org/support/topic/strange-behaviour-making-lists-in-the-visual-editor
If you use a child theme, just add this function to your functions.php file:
/**
* I want to use the basic 2012 theme but don't want TinyMCE to create
* unwanted HTML. By removing editor-style.css from the $editor_styles
* global, this code effectively undoes the call to add_editor_style()
*/
add_action( 'after_setup_theme', 'foobar_setup', 11 );
function foobar_setup() {
global $editor_styles;
$editor_styles = array();
}
Are you copying and pasting the text from somewhere? Sometimes the text will have styles in its source and the styles get carried over to the wysiwyg. See http://tentblogger.com/copy-paste/
Related
Any CSS the customizer generates will be written directly into the head section.
The customizer API uses the wp_head hook for that.
I would like to take hold of this CSS somehow and connect it to style.css.
What I want to do is the following:
The Customizer spits out a class .red {color:red;}
I'd like to grab this information and transfer it into my style.css somehow.
Ideally the Customizer CSS would be inserted at the beginning of my style.css
EDIT Just to clarify: By "Customizer CSS" I am referring to CSS information generated by a color picker control for example. Not the CSS from that "Custom CSS" input field – this one I can just copy and paste into my style.css
One idea is to save the customizer CSS output not in the head section via wp_head but somewhere else, into a file for example.
How can I do that?
Is there a hook for that, is it even possible and does it make sense?
This is just one idea of mine – I am open to completely different approaches as well.
I think writing into a file directly is not a good idea at all. Because next time the value is changed, the previous written CSS would be unnecessary. Dynamic values should be changeable. As you write the output value into the file as suggested, the previous generated value will always be there which is redundant.
The best approach would be using wp_add_inline_style Refer here.
Use the following method to add the CSS to the refereed file:
function my_styles_method() {
$color = get_theme_mod( 'color-picker-control' ); //E.g. #FF0000
$custom_css = "
.mycolor{
background: sachet;
}";
wp_add_inline_style( 'main-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_styles_method' );
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.
I use this plugin to dynamically change the CSS in a user friendly way within the WordPress backend:
http://wordpress.org/extend/plugins/option-tree/
I set it up, and appended it to the theme (not a plugin anymore) - this works.
What I don't get is that those inputs get actually changed. So I set up a input field where the user can add a hexadecimalcode(colorpicker) to change the background, or even the font color.
How do I get this information to change in my CSS? I tried:
body {
{{custom_background_css}}
background-color: {{custom_background_css|background-color}};
}
where custom_background_css the id of this input field is. but nothing changes. I also read the documentation but I don't get it...
To adjust theme options for CSS, you'll have to include the CSS in your header, or write a .php file that generates the CSS you want, and link to that. But maybe the easiest way is to hook wp_head from functions.php, and write the code directly there. See below for a schematic example to add to your functions.php
// this is the hooked function
function add_css() {
echo "dynamically generated CSS here";
}
// Add your wp_head hooks
add_action('wp_head', 'add_css', 5);
I've Googled for an answer, but most posts seem to be talking about labels within forms. I have custom fields set up in content block in Drupal 7. When I show the titles (labels) of those custom fields, it adds a colon after after the title. Is there a way to remove them?
You need to override field.tpl.php to do this (the colon is hard coded into that template file).
Create field.tpl.php anywhere in your theme folder, copy the code from the above link into it, tweak it (remove the colon etc), then clear your caches: all will be well!
Override field.tpl.php and add a span (with a class) around the colon, then use CSS to hide the colon. This gives you flexibility in deciding when to hide the colon. For labels set to above you may wish to hide the colon and for labels set to inline you might want to keep the colon.
Example:
In your Drupal installation folder, look in modules/field/theme and copy field.tpl.php file to your theme.
For D7, edit field.tpl.php and change <?php print $label ?>: to <?php print $label ?><span class="field-label-colon">: </span>
In your theme CSS style sheet add .field-label-colon{display: none;} or to only hide label for label above .field-label-above .field-label-colon{display: none;}
I just want to add my grain of salt to this topic. I have been trying to do this a few time and I usually end up creating a custom template file for each field I want to remove the column, which is not a good solution in my opinion, because the presence of the label is design dependant; in a good MVC structure, this feature should be controlled by the View (CSS), not the Model (PHP template).
There is what I did this time:
Copy the file modules/field/theme/field.tpl.php into your theme.
Add a span around the column:
<?php print $label ?><span class="label-suffix">: </span>
Add CSS directives to remove the column where your design required to remove it:
#sidebar-first .label-suffix {
display: none;
}
Wordpress Tiny MCE editor and WP own editor both has button for <blockquote> . if we select any text and press this buttom then it wraps that text with <blockquote>.....</blockquote>.
I want to change this output to this
<blockquote><div class="quote_start"><div></div></div><div class="quote_end"><div></div></div>...................................</blockquote>
How can i do this manually or is there any wordpress plugin which can do the same?
I want to change behaviour of blockquote button in bot editor TinyMCE and WP own html editor?
I'm not sure you can use this to add that many divs but tinymce's valid elements config parameter does allow you to replace tags.
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/valid_elements
For instance:
tinyMCE.init({
valid_elements : "blockquote/div[class=quote_start]"
});
Would replace all blockquote tags with a div with the quote_start class.
A better way might be to ignore tinymce here and write a filter for the functions.php file of your theme. http://codex.wordpress.org/Plugin_API/Filter_Reference/the_content. Find all the instances of blockquote and replace it with the code you want.
Maybe adding your own button could also be an option?
Some starting point could be this:
http://www.deliciousdays.com/tinymcebuttons/
and/or this:
http://wiki.moxiecode.com/index.php/TinyMCE:API/tinymce.Editor/addButton
hope it helps? Greetz, t..
If you want the same functionality in two different editors, you're probably better off writing (or looking for) a Wordpress filter that can replace the code. There's this one but it doesn't seem to be able to handle regular expressions (which you would need to replace HTML tags). Maybe this one can do what you need: Text Filter Suite
Getting both TinyMCE and Quicktags requires mods in two places. Here's how to do the Quicktags:
http://website-in-a-weekend.net/extending-wordpress/diy-wordpress-unraveling-quicktags-wordpress-plugins/