This page includes documentation for Wikimedia blog administrators explaining the steps of how to add a post drafted on Meta to WordPress. In this case, we assume that a community member has drafted a post on Meta. You have reviewed the post and made any necessary copy edits and clarifications. You have scheduled the post on the calendar for today. Now, here's how you get the post live.
If any of the fields in the WordPress interface are not visible to you, be sure you click "Screen options" at the top of the page and select the fields you want to see.
Moving from Meta drafts to posting on WMF blogEdit
- Use script to move draft from Meta to WordPress
- Follow the directions for converting wiki pages to blog posts.
- Paste the .html file's output into the "text" editor version of WordPress. Note that occasionally (especially when using video), the WordPress visual editor can break the text code; it is recommended that you only use the text editor for any edits.
- Click "Save draft".
- Adjust URL slug
Once you've saved your post for the first time, you'll see a field called "Permalink" below the title. It will have automatically pre-populated the URL with the title of your post. Often, titles are long and not the most descriptive. We suggest updating it to something more descriptive, like "firstname-lastname-profile" or "results-fall-2014-us-wikipedia-education-program".
- Add photo licensing information
Next, you will need to add licensing information for any photo in the post. All photos should be on Wikimedia Commons.
- Add categories and tags
- Choose one or more relevant categories from the list (e.g., for education posts, you'll select Education, Wikipedia Education Program, Global). If you've saved the post as a draft before adding categories, remember to remove the check box from "Uncategorized".
- Add appropriate tags, such as chapter names, "multilingual post" if it's in more than one language, the name of the additional languages it's in, etc.
- Add author
Look through the list of authors. If the person who wrote the post is not listed, you'll need to add a guest account for them.
- Preview post
Make sure you've clicked "Save draft" to save all your changes.
Once you think you're ready to publish, click "Preview". The blog post will open in a new window. Follow these steps:
- Read through the post one last time for any typos.
- Click through on all links to make sure they go where they are supposed to go.
- Click through on the image files to make sure they go to the file page on Commons.
- Click through on the links in your copyright notes to make sure they go to the right pages.
Make any edits you need to make, click "Save draft" and preview again.
- Publish post
Once everything looks good, click "Publish"! Go look at the live post and make sure it looks good.
- Propose social media
Propose social media for your post (checking if the authors have already made suggestions in the corresponding section of their draft here on Meta), then send an email to social-media lists.wikimedia.org with the text of your suggested social media.
- Archive draft on Meta
On the draft page on Meta:
- Replace the draft note on top with a link to the published version
- Clearly mark the content as outdated by e.g. greying it out (enclosing it with
<div style="background-color:#bbbbbb; color:#999999">)
- Remove all of the category information except
[[Category:Archived blog posts]]. (Example edit for all three steps)
Creative Commons picturesEdit
- CC-BY-SA 3.0
<a href="LINK">"PHOTO NAME"</a> by <a href="LINK">AUTHOR</a>, under <a href="https://creativecommons.org/licenses/by-sa/3.0/legalcode">CC-BY-SA 3.0 Unported</a>, from Wikimedia Commons
<a href="//commons.wikimedia.org/wiki/File:Golden_Gate_Bridge_seen_from_the_Presidio_in_San_Francisco_42.jpg">Golden Gate Bridge seen from the Presidio in San Francisco</a> by <a href="LINK">Guillaume Paumier</a>, under <a href="https://creativecommons.org/licenses/by-sa/3.0/legalcode">CC-BY-SA 3.0</a>, from Wikimedia Commons
Copyright notes: Golden Gate Bridge seen from the Presidio in San Francisco by Guillaume Paumier, under CC-BY-SA 3.0, from Wikimedia Commons
- CC-BY-SA 2.0
<a href="LINK">"PHOTO NAME"</a> by <a href="LINK">AUTHOR</a>, under <a href="https://www.creativecommons.org/licenses/by-sa/2.0/legalcode">CC-BY-SA 2.0 Generic</a>, from Wikimedia Commons
- CC-0 1.0 Universal
<a href="LINK">"PHOTO NAME"</a> by <a href="LINK">AUTHOR</a>, under <a href="https://creativecommons.org/publicdomain/zero/1.0/legalcode">CC-0 1.0 Universal</a>, from Wikimedia Commons
<a href="LINK">"PHOTO NAME"</a> by <a href="LINK">AUTHOR</a>, in the public domain, from Wikimedia Commons.
Adding html5 videoEdit
You can add html5 video to blog posts via two different methods:
Method 1: Reusing the HTML that embeds a video on wiki pagesEdit
The wiki -> blog conversion script handles most embedded videos from Commons automatically without the need for further manual edits, although the resulting HTML code is more complicated than when using method 2.
This method has the advantage that one can select which still from the video is displayed as thumbnail, using the "
thumbtime=..." parameter (as of July 2014, this is not possible when using an iframe as in method 2 below, see Bugzilla:67165). Also, one can simply use wikitext instead of HTML to specify size and caption.
Copying the html is fine, however you need to copy it when using a video of size 800px (or full size if the video < 800px). Otherwise you get the html which opens a popup dialog box, which won't work as well when just copying the html.
i.e. If the html looks like
Then copying the html will result in an image with a play button which links to the original file for download.
If the html looks like:
Then the video will play in browser using native html5 browser support (Assuming you have a browser that supports ogg or webm).
When using this method, you may prefer removing
<span class="mw-tmh-playtext">Play media</span> (which generates the text "Play media" overlaying the play button, which would not normally be visible on a wiki page), and
target="new" in the "Play media" link (to avoid opening the video in a new tab when the play button is clicked).
Method 2: Embedding a video as iframeEdit
Alternatively, you can embed videos from Commons as iframes. It's pretty straightforward; here's how to do it:
- Go to the file page on Commons for the video you want to use. For example: https://commons.wikimedia.org/wiki/File%3AThe_Impact_of_Wikipedia_Poongothai_Balasubramanian.webm
- Hover your mouse over the video to see the controls at the bottom.
- Click Menu (lower right corner) > then the Share icon (the one with the 3 silhouettes).
- Copy the code starting with
<iframe src="//commons...etc. (you may have to copy it manually; the "copy code" button doesn't work in some browsers including Firefox).
- Open your blog post in WordPress, in HTML mode ("HTML" tab instead of "Visual" on the upper right corner of the post edit window).
- Find where you want the video to be placed and paste the code snippet you copied there.
- Return to the "Visual" tab: you should see a yellow placeholder at the dimensions of the video.
- Preview the post: after a few seconds, you should see the video loading, with all the same controls. (If it fails to load in the preview, it might still show up after the post is published/updated - in case it doesn't, consider filing a followup bug to bug 56405/bug 50617/bug 66143.)
- If necessary, resize the video; for example, if the video is currently 800 × 450 pixels (the usual preview on Commons). This translates to
width="800" height="450"in the code snippet. 800px is too wide for our current blog layout; the max width is 700px or so, depending on whether you add a gray frame around it.
- Edit the code snippet (in HTML mode) so that the width of the video is 700px, and cross-multiply to get the correct height (in this case, 394).
- If you want the usual gray frame around the video, and a caption, you have to add them manually. Use the following code around the video code snippet:
<div class="wp-caption alignright" style="width: 702px;"> Insert Your <iframe … code snippet here <p class="wp-caption-text">Add your caption here</p> </div>
alignrightto something else if you want your frame aligned differently (
alignleft) and change the width of the div (
702in the example above) to the width of your video plus about 2 px or so.