Plugin for embedding Discourse topics in wordpress pages or posts


(Matthieu) #1

Hi,

I did a quick and dirty wordpress plugin so you can easily embed topic content in your wordpress pages using a shortcode. It is still beta AND I’m not a webdevelopper so be careful using it for the moment.

To use it, you just need to provide the url of your discourse forum in the plugin settings and then add this shortcode [discourse topic_id='xxx'] in the editor.

It will include the first post of the topic as pure html in the wordpress page. I did it so our community can create and maintain their project presentation on the forum while it is nicely displayed in the main web site.

Here you have an example:
https://www.poppy-project.org/test-discourse-shortcode/

The code is here:

It stills miss some CSS and template but the base is here.
Contributions and extensions are very welcome :slight_smile:


Embedding Discourse content in remote pages, like a wiki
A community effort to improve Discourse's documentation
Link existing forum topic to new WordPress post
Is it possible to "join" an existing WordPress post with an existing Discourse topic
(Steve) #2

Very neat, this is close to something I’ve been looking for a solution for.

Would a switch, to show the entire thread, be easy to implement?

How easy would it be to reverse the post order?


(Matthieu) #3

It is quite easy, Discourse give a very complete json file with everything you need and a data structure well thought.

I get the first post like this $parsed_json['post_stream']['posts'][0]['cooked'];

But if you want to display all posts, it should be something like this

$all_posts = $parsed_json['post_stream']['posts'];
foreach ($all_posts as $post) {
    echo $post['cooked'];
}

If you want reverse order:

$all_posts = $parsed_json['post_stream']['posts'];
foreach (array_reverse($all_posts) as $post) {
    echo $post['cooked'];
}

If you want to play with it, you just need to change this file:
https://github.com/matthieu-lapeyre/wp-discourse-topic-integration/blob/master/includes/discourse-topic-integration-shortcode.php

I will give a try if I find some time


(Andrew ) #5

Any ideas for resolving this issue: The plugin makes the admin very slow?


(Matthieu) #6

I have this problem with our big site but on a fresh local wordpress it is not significant.

Maybe using a profiler could help find it


(Simon Cossar) #7

This works very well. It would be nice to have an option on the Discourse side for including/excluding posts in a topic. This could be useful for writing documentation.


(Matthieu) #8

Yep it is quite easy to do. I just began by my need but lot of people ask for displaying all posts too.

Yet it would be better to have a kind of template and how to do it is not clear to me. Is there some wordpress dev ?


(Andrew ) #9

This is a very useful plugin and very easy to get going.

Displaying /uploads (images and linked files) is broken on my test install. The WP site has https and the Discourse is http, and the URLs are getting rewritten somewhere. I suspect this is no direct fault of the plugin (between Cloudflare and W3 Total cache I have some suspected culprits).


(Andrew ) #10

First, I would love to see something like this pulled into the official WP-Discourse plugin. Some of what follows (API integration, etc.) is already part of its functionality.

I’m not a developer either, and wish I could help more. The following are some thoughts on it so far. Not trying to be critical, just thinking out loud and relaying experiences.

###Notes

  • It would be extra interesting if this got a Discourse API key so WP could access private/group forums. I was thinking it would be cool to have pages a certain set of users could edit via wiki, and that would automatically populate the main site. There may be cases where discussion would be better restricted to logged-in or group users.
  • Button 1 in the image has no http/https protocol on the link. Not sure if that’s from my WP settings or the plugin.
  • Not sure where the theme is picking up button 2. It happens that I can and intend to turn the sharing section off on this page anyway, but it is a curiosity.
  • Displaying the Discourse title and the WP title can be redundant. The ability to toggle this in the WP post edit window would be helpful. Less elegant, but hiding via CSS should more or less suffice.
  • Displaying the author (in this example, discourse) might be a candidate for toggling as well. As with the title, CSS is probably an okay workaround.


(Matthieu) #11

Where is uploaded your images ? Is it on the discourse server or on amazon ?

Normally this ugly function do the job:

function add_base_url_to_link($cooked, $base_url){
  $relative_image_path = 'src="/uploads';
  $absolute_image_path = 'src="'.$base_url.'/uploads';
  $new_content = str_replace($relative_image_path, $absolute_image_path, $cooked, $count);

  $relative_user_avatar_path = 'src="/user_avatar';
  $absolute_user_avatar_path = 'src="'.$base_url.'/user_avatar';
  $new_content = str_replace($relative_user_avatar_path, $absolute_user_avatar_path, $new_content, $count);

  $relative_user_path = 'href="/users';
  $absolute_user_path = 'href="'.$base_url.'/users';
  $new_content = str_replace($relative_user_path, $absolute_user_path, $new_content, $count);

  return $new_content;
}

(Simon Cossar) #12

Another way to do this is to create a wordpress custom-post-type for Discourse topics that takes the Discourse forum base_url and topic_id and uses them to fetch the content for the post. The benefit of this is that it allows the Discourse content to be edited in WordPress, and it allows the content to be cached. The downside is that you have to enable CORS on the forum. Also, the content on wordpress is no longer synced live with the content on the forum. That could be a good or a bad thing, depending on what you are trying to accomplish.

GitHub - scossar/wordpress-discourse-topic: Saves a Discourse topic as a WordPress post (this works but isn’t ready for a production site)


(Simon Cossar) #13

I think this can be simplified quite a bit. There’s no need for a custom post type. By leaving it out, access to forum content could always be available through a meta box.


(Matthieu) #14

New feature: custom CSS

There is a field in the admin so you can change default CSS for the discourse integration (the class is discourse-topic-integration):

results of this amazing color choice:

Looking for contributors

I’m already reaching the max of my wordpress developper skills. It would be great to have some people to work with on the development so it can become a real solution for prod.


(Matthieu) #15

Release 0.3

There are now templates and you can choose which one to use using the new shortcode option type="subject/full/reverse-full" (requested by @steve_pd) for example:

[discourse topic_id="xxx" type="reverse-full"]

You can download updates here:


(Simon Cossar) #16

I’d like to help if I can.

One problem I see with the ‘full’ option is that it is only downloading the first 20 (or whatever the forum chunk_size is set at) posts in the topic. If there are more than 20 posts in the topic, should there be a ‘load more posts’ link at the bottom of the page?


(Matthieu) #17

Indeed … the json file only retrieves the first 20 posts BTW the reverse template does not work too.

People can contribute by raising or fixing issues:


(Andrew ) #18

Version 0.3 dealt with most of my earlier hangups. Thanks, @Matthieu

The ability to give API credentials to allow the plugin to pull from private forums would be icing on the cake, but I understand that would add significant complexity.

Nice job.


(Matthieu) #19

If there is a clear method on how to do it, it could be done…


(Matthieu) #20

Release 4.1

  • Remove author info in subject only template
  • add author-info template if you want to include it

If you want to see how it works, this release is deployed on our project website.

Here two examples:

https://forum.poppy-project.org/t/marionnettes-electriques/1521
==> wordpress: Poppy Project - Marionnettes électriques project, made with Poppy

https://forum.poppy-project.org/t/mathematics-a-beautiful-elsewhere/1511
==> wordpress: https://www.poppy-project.org/project/mathematics-a-beautiful-elsewhere/

I added custom CSS:

.discourse-button{
  text-align: center;
}
.discourse-topic-link {
  font-size: 20px;
  padding-bottom: 11px;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 11px;
  background-color: rgb(108, 108, 106) !important;
}

(Anton) #21

Sorry if this looks like cross-posting, but I think this topic is quite connected - I’d like to put a note here about a new alternative plugin that is also capable of displaying Discourse posts in WordPress: