MyTweetMag Blog

Step by Step – A Newsroom with WordPress

The newsroom for MyTweetMag is live: A single page that aggregates all important information and media about the startup. Why a newsroom? I think it’s a nice service for journalists and blogger. If you run a startup and a wordpress-blog, you can read this little tutorial here that helps you to create your own newsroom. It’s easy, just try it…

Elements of your Newsroom

First of all you should think about the elements, that you want to present in your newsroom. Here are some ideas:

• press-releases
• media-coverage
• feedbacks
• factsheet
• team
• whitepapers
• press-contact
• dates

Some multi-media-elements like:

• images / screenshots
• video
• audio
• presentations

Social media elements like:

• Twitter
• Facebook
• Google+

I did not build a complete newsroom-template, but simply created a new page and added all elements manually instead. If you do so, you should switch the wordpress-editor to the html-view instead of the visual-view, because we will add most of the elements with shortcodes. Shortcodes are small wordpress-codes to add functionalities into a wordpress post or page without using php-code. A shortcode looks like this:

[gallery include="1018" link="file" order="desc"]

You will learn more about shoirtcodes in the next steps. Let’s start with the press releases now.

Press Releases

I publish press releases in two categories: In the “blog”-category to display every press-release as an ordinary blog-entry, and in the “press release”-category to list them separately for example in the newsroom. There is a small plugin from Bill Ericson, that you can use to list all entries from a certain category. Therefore you only have to add a shortcode at the place in the page, where the list should appear:

[[display-posts category="YOUR CATEGORY" posts_per_page="5" include_date="true"]]

I have wrapped the shortcode into a div-tag, so I can change the float and position by adding some css.
The html looks like this:

<div id="press-release">
<h3>Latest Press-Releases</h2>
[listing category="press-releases" posts_per_page="5" include_date="true" order="DESC" orderby="date"]
<code></div>

The CSS looks like this:

#press-release{
   width:400px;
   float: left;
}

With the width of 400px and the float on the left side, I got some space to display other information on the right side (in my case: an infografic).

Media Coverage

To stream the media-coverage for MyTweetMag I use MyTweetMag itself. I think there are some other possibilities, but MyTweetMag is quite easy to use for this kind of streams, especially because you can display the date and the source of the original post. To use it, just create a new TweetMag with your twitter-account and twitter the links to the blog-post or media-report about your startup. MyTweetMag will translate the link into headlines and abstracts. To integrate the stream into your blog, just upload and activate the wordpress-plugin for MyTweetMag. Then add a shortcode like this into the newsroom-page:

[MyTweetMag display="5" meta="1" displaydescriptions="0" username="YOURTWITTERNAME" target="self"]

Just wrap it again into a div-tag and style it with your css.

Infografic and images

Images are a bit more tricky. There are some dozens of image-plugins for wordpress, but I don’t think, that many of them are useful for newsrooms. Images should appear as small previews with a description and a download link. Slideshow-plugins look nice, but they usually do not provide download-links or descriptions, so it’s not practical for journalists, who want to have an easy access to image files.
Wordpress itself provides a gallery shortcode, that is quite useful. All you have to do is to upload the images to the newsroom-page. The shortcode, that I use to display my three press-images, looks like this:

[gallery include="1018,1012,1011" itemtag="div" icontag="span" captiontag="p" link="file" order="desc"]

You can manipulate the number of columns, the order of the pictures and much more. With the parameter “include” you can also determine, which pictures are displayed. This is quite useful, because the shortcode displays all pictures attached to the page by default, which is probably not what you want. To exclude or include pictures you need to know the id of the picture. To find the id of a picture, just hover over the preview picture in the media-library of the page:

If you hover over the preview-picture, you can see the id of the picture in the url displayed in your browser. But there is a problem: If you use permalinks – and most people use a permalink structure for seo-reasons – the url will show the permalink, that doesn’t include the id of the picture. The permalink will be displayed as soon as you have published the post. In case you add a picture after you published the post, you have the set the post on the “draft”-status again, then open the media-lib and hover over the preview-picture again. Now it displays the url with the picture ID. After you have included or excluded it, you can publish the page again. I know this is quite idiotic, and I did never understand, why wordpress does not display any id in the admin-area at all (categories, tags, images, posts etc.), cause you need them really often.
Finally add a download-link for your visitors. You can simply use the caption-field and add some html with a link to the original file there. WordPress places a link to the original picture by default of course, but not every journalist knows that, and you can add some more information with a text link like this:

<a href="http://blog.mytweetmag.com/wp-content/uploads/2010/06/mytweetmag_startpage1.jpg"><small>startpage download 600px</small></a>

Contact Form

To add a contact form I choose the easiest and smallest plugin I could find around the web: the easy contact plugin. Use a shortcode again to display a simple contact form wherever you want:

[clean-contact email="YOUR_EMAIL_HERE" prefix="contact" bcc="" subject="Greetings" thanks_url="URL_TO_A_THANK_YOU_PAGE_HERE"]

That’s the content I added to the newsroom-page itself. I decided to place some other elements in a separate sidebar. It’s a little bit complicated to create a separate sidebar for special page, but let’s try it…

Create a separate sidebar

First of all, we have to register a new sidebar. To do so, go to “appearance” in the admin-area of wordpress and open the “editor”. Then choose the file “functions.php”. You will find there something like this:

if (!function_exists('fb_widget_register')) {
	function fb_widget_register() {
		if ( function_exists('register_sidebar') ) {
			register_sidebar(array(
				'name' => 'Sidebar',
				'before_widget' => "\n\t\t" . '<li id="%1$s" class="widget %2$s">',
				'after_widget' => '</li>',
				'before_title' => "\n\t" . '<h3 class="widgettitle">',
				'after_title' => '</h3>',
			));
		}
	}

	add_action('widgets_init', 'fb_widget_register', 1);
}

Now you simply have to copy and paste the sidebar code and give the second sidbar another name. The enhanced sidebar-code looks like this:

if (!function_exists('fb_widget_register')) {
	function fb_widget_register() {
		if ( function_exists('register_sidebar') ) {
			register_sidebar(array(
				'name' => 'Sidebar',
				'before_widget' => "\n\t\t" . '<li id="%1$s" class="widget %2$s">',
				'after_widget' => '</li>',
				'before_title' => "\n\t" . '<h3 class="widgettitle">',
				'after_title' => '</h3>',
			));
			register_sidebar(array(
				'name' => 'pressbar',
				'before_widget' => "\n\t\t" . '<li id="%1$s" class="widget %2$s">',
				'after_widget' => '</li>',
				'before_title' => "\n\t" . '<h3 class="widgettitle">',
				'after_title' => '</h3>',
			));
		}
	}

	add_action('widgets_init', 'fb_widget_register', 1);
}

Did you notice? I simply copied the code and changed the name of the second code from “sidebar” to “pressbar”.

If you go back to “appearance” and then to “widgets”, you will see the second sidbar on the left side like this:

You can allready drag & drop some widget into the new sidebar, but you won’t see the result anywhere, because we did not integrate the new sidebar into a template or page so far. To do so, we have to finish two more small steps:

First step: Simply copy the existing template “sidebar.php” of your theme-folder, rename it to “sidebar-pressbar.php” and upload it to your theme-folder. Now you have two completely identical files, but with two different names: “sidebar.php” and “sidebar-pressbar.php”.

Last step: We have to add another small piece of code into a template. Go to “appearance” and then to the “editor” again. Then you have to look for this piece of code:

<?php get_sidebar(); ?>

This is a small wordpress-function, that calls the sidebar. In my theme this code is located in the “footer.php”-template, but it might be located in a different template of your theme. If you found the code, simply change it like this:

<?php if (is_page('press')) { get_sidebar('pressbar'); } else { get_sidebar(); } ?>

What we do here is quite simple: We ask: “if the actual page is named ‘press’ (“if(is_page(‘press’))”, then add the sidebar called ‘pressbar’ (“get_sidebar(‘pressbar’)”, if not (“else”), add the standard sidebar (“get_sidebar();”). Of course you have to enter the proper name of the page: Check it in the “pages”-section in your wordpress admin-view: there you will find the “names” and “slugs” for every page. You can use both of them (or even the page id).

Finally go to your wordpress-blog, click on the link to your newsroom-page and check, if the new sidebar is visible there. If everything works, you can add special content to the new sidebar, that appears only if someone visits your pressroom.

Ok, this might be a little bit tough, if you have never worked with code before, but for people who are into wordpress a bit longer, it’s not a big deal.

Twitter and Facebook

Filling the widgets with content is easy. I decided to add the facebook- and twitter-widgets in the sidebar to show the visitors, how much noice my startup produces. Facebook offers about 10 Plugins, the most interesting is probably the activity-feed. The feed shows all discussions about your startup on facebook, and if a visitor is logged in at facebook, it shows all the discussions of his friends about your startup. This makes sence, I think.

Twitter offers four widgets till now and the most interesting is probably the search-widget. You can search for your startup name and display all the discussions on twitter about it.

To integrate the widgets simply use the wordpress text-widget and copy & paste the twitter- and facebook-codes into it.

Helpful ressources

Well, there are not too many ressources or helpful tutorials for newsrooms with wordpress out there. You will find the newsroom-theme tempress, that I didn’t test so far. You can also find a list of recommended plugins, that might be useful for a newsroom. For developers the backstory of a wordpress newsroom build with Feed2JS might be interesting, but it’s a completely different approach than this one. And here is an older post with some discussions about newsrooms with wordpress. I didn’t find more ressources for this topic, but feel free to add some in the comments.