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.
Related
I am trying to add a button to my WordPress template. Basically, I have the post and then there is the Related Posts Thumbnails widget that appears. I want the button to go between the text of the post and the related posts thumbnail widget. The code in my 'Single Post' that contains all of this is as follows:
<div class="post-content">
<?php the_content(__('<em><strong>More:</strong> Read the rest of this entry...</em>', 'life-is-simple')); ?>
</div>
I know the Related Posts Thumbnails plugin falls within this code because it's at that place when I 'Inspect Element' on Google Chrome. I can't find how to edit the order of things within that div though. Any help would be greatly appreciated, thanks!
EDIT
Clarification: I am using the Life Is Simple WordPress theme although it has been custom editing quite a bit (mostly on the CSS side of things though).
That plugin is probably appending the output to the_content with a filter .
That means , that the output is being added to the_content automatically. it is a common behaviour.
You need to look at the plugin´s admin interface to see if you can have an alternative way (I believe there is ) which is using a template tag. in that case, you should put the template tag after the div where the the_content() is .
EDIT I :
After a small dig, - in fact there is - you need to put
<?php get_related_posts_thumbnails(); ?>
Then the plugin should know by itself not to append to the_content.
For parameter passing, or if something is not working, go read their APi or help files.
You'll probably need to edit single.php or archive.php in your theme. If nothing is occuring there that looks familiar, it's probably using a loop. In which case you might find what you are looking for either in loop.php, loop-single.php, or loop-archive.php depending on what type of page you are on and how the theme was constructed. Add your button near where you find Read the rest of this entry...
With more information (such as what theme you are using), one might be able to help more as well.
Usually I set up pages in Wordpress by putting all the HTML in and the client will edit the content in the WYSIWYG editor
This is great, until they accidentally delete a div or break something.
What is the correct way to go about this making it idiot proof, so that they can change titles, paragraphs etc without potentially deleting parts of the structure?
If your client does not know HTML, and you know this going into the project, the only things he/she should be inputting in the page editor are words, uploaded media, and elements that can be inserted using the visual editor. It's a pain in the butt, but your theme should be the part that's "idiot proof".
Build your theme to wrap the_content(); in a div, and style all the potential elements that can be input accordingly. Only rely on elements that can be added using the CKEditor.
e.g. (within the loop, in a theme template file)
<div id="myContentDiv">
<?php the_content(); ?>
</div>
Then your CSS:
#myContentDiv p {
}
#myContentDiv ul {
}
etc.
There's a few options that comes to me right now:
Use jquery plugins to get columns (which is pretty bad IMHO)
Use a plugin with shortcodes (so you wrap each column with them), which is good but user may screw it up yet
Use custom fields (like one text area "Right column content", then you have another text area "Left column content" and so on)
All these 3 are quite easy to implement! :)
[]'s
I'm building a custom Wordpress theme.In my index.php page i'm looping to display the excerpts for all of my blog-posts.
this is how I break the post flow:
//At first I place <!--more--> in my post-text where I want to break it..
the_content('more');
Now the point is I'd like to place the 'more' button not right after the excerpt.I'd like to place this button in another div containing other link-buttons (tags,comments-count ecc).
The only thing I came up with is using a span around the 'more' button (with absolute positioning).
Is there any better solution?
thanks
Luca
The fact that WP injects the read more link into excerpts, rather than just giving the formatted excerpt, has always been a problem for me, too. Especially since what surrounds the link is dependent on where the author placed it: inline or on a new line, before or after an image, inside or outside inline markup. Here's what I've done in the past -- I'm not sure whether this is the best solution but it should work...
get the raw, unformatted post content: $content = $post->post_content
get the excerpt by using explode("<!--more-->", $content).
run the excerpt through the the_content filter: $excerpt = apply_filters("the_content", $content[0]);
Balance the tags... $excerpt = force_balance_tags($excerpt)
On the whole, a better solution may be to ask authors to provide a text excerpt to go with each post rather than relying on this kloodgy method.
I use my custom block for displaying a flash game at the front page of my Drupal 7 installation, but there is also the annoying message:
<div id="first-time"><p>No front page content has been created yet.</p>
<div class="item-list"><ul><li class="first last">
Add new content</li>
</ul></div></div>
below it and I can't remove it. Is there please a hook for adding custom CSS? In my module I would like to make the #first-time light grey or invisible.
I prefer not to add a blank content just to get rid of that text.
Thank you!
Alex
UPDATE:
I've added the following to my module:
function game_init() {
drupal_set_message('XXX init called XXX');
if (drupal_is_front_page()) {
drupal_add_css('#first-time {color: green;}', 'inline');
}
}
but don't see that CSS-code or XXX string inside my front page.
UPDATE2:
Oh, I had to clear the cache and now it works (the Drupal docs seem to be wrong here - there was written that 'inline' CSS is not cached...)
Hiding the CSS is the WRONG way of doing it. why did you created your content as a Custom Block?
you should create a "Page" and set this page as front page in the Configuration->Site Information.
Whatever. you can also use any of these options but is not recommended.
you can also also add a BlankPage by Adding only the Title(then hiding it in PHP on page.tpl.php)
you can add your css in /templates/themes/bartik.info
you can call drupal_add_css on the _init() hook of your custom module.
Blocks are used to display information in every page(although we can set to display only on certain pages). Say For Example. A Menu, or A Shopping Cart etc.
If you want to add some CSS for a module, you should use drupal_add_css()
Why not simply add this CSS to your theme?
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/