# Onebox looks horrible on Discourse Comments (below WP Post)
**URL:** https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364
**Category:** WordPress
**Created:** [January 18, 2018, 1:20pm UTC](https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364 "2018-01-18T13:20:04Z")
**Posts on this page:** 19
**Page:** 1
### Author:  [@erikmolenaarnl](https://meta.discourse.org/u/erikmolenaarnl)
#### Post date: [January 18, 2018, 1:20pm UTC](https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364/1 "2018-01-18T13:20:04Z")
Hi there!
I like the onebox for previewing URLs in Discourse. It looks great: [01.18.2018-14.18.14 - TechSmith Screencast](https://www.screencast.com/t/lPg1JDrtUQr)
However, the onebox looks -not as nice- (or horrible) in Wordpress comments below the post: [01.18.2018-14.19.00 - TechSmith Screencast](https://www.screencast.com/t/5WHofcEtjZl)
Is it possible to disable onebox (and just show bare URLs) in the Wordpress comments section?
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [January 19, 2018, 6:59pm UTC](https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364/2 "2018-01-19T18:59:31Z")
The problem with Discourse oneboxes displayed in WordPress comments is that the Discourse onebox styles aren’t set WordPress. All of the Discourse onebox markup is present in the WordPress comment, so it’s possible to add the Discourse onebox styles to your WordPress site.
You can hide the body of the onebox with the following CSS on your WordPress site. This will just leave the onebox header - a link to the original article.
```css
.comment-content .onebox .onebox-body {
display: none;
}
```
---
### Author:  [@erikmolenaarnl](https://meta.discourse.org/u/erikmolenaarnl)
#### Post date: [January 29, 2018, 1:27pm UTC](https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364/3 "2018-01-29T13:27:24Z")
Hi @simon
Thanks for your reply and your help.
I managed to clean up the onebox styling a bit with your suggested CSS ([01.29.2018-14.27.06 - TechSmith Screencast](https://www.screencast.com/t/DxJxk6XJjwh)), but there is still some undesired HTML being parsed, like an H3 header. Does the Discourse Wordpress plugin offer any hooks so I can overwrite the HTML output?
Or perhaps this is a great suggestion to improve the Discourse Wordpress plugin?
Looking forward to your reply. Thanks!
```
.comment-content .onebox .aspect-image,
.comment-content .onebox .source,
.comment-content .onebox p {
display: none;
}
```
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [January 29, 2018, 4:42pm UTC](https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364/4 "2018-01-29T16:42:35Z")
> [@erikmolenaarnl](#):
>
> Does the Discourse Wordpress plugin offer any hooks so I can overwrite the HTML output?
No, but it should. I’ll add a filter the the comment content before it gets added to the `comment_html` template.
---
### Author:  [@erikmolenaarnl](https://meta.discourse.org/u/erikmolenaarnl)
#### Post date: [January 30, 2018, 8:34pm UTC](https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364/5 "2018-01-30T20:34:21Z")
Hi @simon
Thanks for your reply and help. Any ETA on this plugin update?
Looking forward to your reply. Thanks again for your help.
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [January 30, 2018, 8:35pm UTC](https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364/6 "2018-01-30T20:35:42Z")
I’ll add it to the code right now. It will be in the next update. That’s going to happen sometime this week.
Edit: the filter will be named `wpdc_comment_body`.
```plaintext
$comment_body = wp_kses_post( apply_filters( 'wpdc_comment_body', $comment_body ) );
```
---
### Author:  [@erikmolenaarnl](https://meta.discourse.org/u/erikmolenaarnl)
#### Post date: [February 14, 2018, 3:39pm UTC](https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364/7 "2018-02-14T15:39:56Z")
Hi @simon
Thanks for adding this filter to the WP plugin! Much appreciated!
Could you give me a PHP example code how to utilize this filter?
Thanks again!
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [February 14, 2018, 5:13pm UTC](https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364/8 "2018-02-14T17:13:15Z")
Something like this should work to remove oneboxes from comments. It’s assuming that the `libxml` extension is loaded on your server. (It probably is.)
```php
add_filter( 'wpdc_comment_body', 'wpdc_custom_comment_body' );
function wpdc_custom_comment_body( $content ) {
// Allows parsing misformed html. Save the previous value of libxml_use_internal_errors so that it can be restored.
$use_internal_errors = libxml_use_internal_errors( true );
$doc = new \DOMDocument( '1.0', 'utf-8' );
$doc->loadHTML( mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' ) );
$finder = new \DOMXPath( $doc );
$oneboxes = $finder->query( "//*[contains(@class, 'onebox')]");
foreach( $oneboxes as $onebox ) {
$onebox->parentNode->removeChild( $onebox );
}
// Clear the libxml error buffer.
libxml_clear_errors();
// Restore the previous value of libxml_use_internal_errors.
libxml_use_internal_errors( $use_internal_errors );
$parsed = $doc->saveHTML( $doc->documentElement );
// Remove DOCTYPE, html, and body tags that have been added to the DOMDocument.
$parsed = preg_replace( '~<(?:!DOCTYPE|/?(?:html|body))[^>]*>\s*~i', '', $parsed );
return $parsed;
}
```
The Discourse plugin uses `DOMDocument` to fix relative links that are returned from Discourse. That code is here: [https://github.com/discourse/wp-discourse/blob/master/templates/template-functions.php#L71](https://github.com/discourse/wp-discourse/blob/master/templates/template-functions.php#L71)
---
### Author:  [@erikmolenaarnl](https://meta.discourse.org/u/erikmolenaarnl)
#### Post date: [February 21, 2018, 12:57pm UTC](https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364/9 "2018-02-21T12:57:25Z")
Hi @simon
If I use your code, the entire URL is removed and there is no output at all. Check out: [02.21.2018-13.52.37 - TechSmith Screencast](https://www.screencast.com/t/GH9PiSYhkhZi)
I think there is is an error in your code, but I can’t find out what it is.
Looking forward to your reply. Thanks a bunch!
P.s. why not remove the onebox output natively from the [WP Discourse](https://github.com/discourse/wp-discourse) plugin alltogether below WP Posts? That it just returns the URL as a default without using this code? I think it would be the easiest option to prevent corrupt looking oneboxes all together for all users out there?
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [February 21, 2018, 3:50pm UTC](https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364/10 "2018-02-21T15:50:33Z")
Yes, that code will remove the entire onebox. It would be possible to use a similar idea to just extract the URL. I’m not sure what the plugin should be doing with oneboxes. Maybe this is a case where it should be including some default CSS so that oneboxes look similar to how the look on Discourse?
---
### Author:  [@erikmolenaarnl](https://meta.discourse.org/u/erikmolenaarnl)
#### Post date: [February 23, 2018, 1:10pm UTC](https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364/11 "2018-02-23T13:10:09Z")
Hi @simon
I think the easiest option would be the best: to output just the link URL in text. There are so many themes and styles around that a specific style would always cause problems.
---
### Author:  [@ThomasLewis](https://meta.discourse.org/u/ThomasLewis)
#### Post date: [February 23, 2018, 6:36pm UTC](https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364/12 "2018-02-23T18:36:24Z")
> [@erikmolenaarnl](#):
>
> I think the easiest option would be the best: to output just the link URL in text. There are so many themes and styles around that a specific style would always cause problems.
I agree here. Oneboxing in WP comments seems overkill and, like Erik said, there are too many variables to make the OneBox look good on any WP blog.
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [February 23, 2018, 6:59pm UTC](https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364/13 "2018-02-23T18:59:31Z")
I’ll write a function for removing everything from the onebox except for the URL. I’ll also try writing some CSS for making oneboxes look similar to how they look on Discourse. I agree that the way oneboxes are being displayed now looks bad, unless a site adds some CSS to deal with them.
Possibly an option to either extract the URL, or add plugin styles to oneboxes is something that can be added to the plugin.
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [March 3, 2018, 12:15am UTC](https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364/15 "2018-03-03T00:15:44Z")
With a bit of CSS oneboxes can be made to look quite good in WordPress comments:
Quotes can be fixed as well:
Without any styles added, they look terrible. The plugin has always avoided adding CSS, with the idea that it should be supplied by the theme, but I think this is a case where we should make an exception. Unless their are objections to doing it, I’ll add an option to load a default stylesheet.
---
### Author:  [@erikmolenaarnl](https://meta.discourse.org/u/erikmolenaarnl)
#### Post date: [March 13, 2018, 10:58am UTC](https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364/16 "2018-03-13T10:58:46Z")
> [@simon](#):
>
> I’ll add an option to load a default stylesheet.
Hi @simon
What is the ETA for this new plugin feature?
Looking forward to your reply. Thanks!
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [March 13, 2018, 2:57pm UTC](https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364/17 "2018-03-13T14:57:40Z")
With a bit of luck it will be out at the end of today.
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [March 14, 2018, 3:08am UTC](https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364/18 "2018-03-14T03:08:42Z")
It’s in the WordPress plugin repo now. You can find the CSS option on the Commenting Settings tab. It’s called **Load Comment CSS**. Depending on your theme, you may still need to use some custom CSS to fix the oneboxes. I wrote the CSS to work with the default WordPress 2017 theme.
I’ll write a function, and possibly add an option, to extract the link from oneboxes soon.
---
### Author:  [@erikmolenaarnl](https://meta.discourse.org/u/erikmolenaarnl)
#### Post date: [March 14, 2018, 11:24am UTC](https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364/19 "2018-03-14T11:24:59Z")
Hi @simon
Thanks for the update! This is a nice feature.
> [@simon](#):
>
> I’ll write a function, and possibly add an option, to extract the link from oneboxes soon.
I am looking forward to your function (or even more an option in the plugin settings! 🤩) to extract the link from oneboxes as bare text, to prevent these HTML H3 headers being added [Welcome - TechSmith Screencast](https://www.screencast.com/t/Z7YMuwgBcw6). As they interfere with my content structure.
Thanks again, and if I can help you to speed up development please let me know!
---
### Author:  [@erikmolenaarnl](https://meta.discourse.org/u/erikmolenaarnl)
#### Post date: [June 27, 2018, 2:05pm UTC](https://meta.discourse.org/t/onebox-looks-horrible-on-discourse-comments-below-wp-post/78364/20 "2018-06-27T14:05:54Z")
For everyone interested, the amazing @joebuhlig created a plugin for us at [NetworkLessons.com](http://NetworkLessons.com) which converts links to plain text links (instead of the Onebox). We like to share it with the community.
[https://github.com/procourse/wp-discourse-sanitize-comments](https://github.com/procourse/wp-discourse-sanitize-comments)