Tuesday 7 May 2013

Magento WordPress Integration Recent Posts Block.

Untitled Document
With the release of WordPress Integration 2.0 for Magento eCommerce, a new way of adding recent posts to the homepage was introduced. The new way, while different, allows for control of the sidebar widgets via the WordPress Admin interface (WP Admin > Appearances > Widgets). Although at this time it isn't possible to add recent posts to the homepage using this method, it is still simple enough to add them using XML or the {\{block type="..."}} system; let's take a look how...

Adding A List of WordPress Posts to Magento

The code below will add a simple list of your most recent WordPress posts to your Magento homepage.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!--
/**
 * Display a list of your 5 most recent WordPress Posts
 *
 * {\{block type="wordpress/sidebar_widget_posts" name="wordpress.widget.recent_posts" post_count="5" title="Latest Posts" template="wordpress/sidebar/widget/posts.phtml"}}
 */
-->
<reference name="content">
    <block type="wordpress/sidebar_widget_posts" name="wordpress.widget.recent_posts" as="recent_posts" template="wordpress/sidebar/widget/posts.phtml">
        <action method="setTitle"><title>Latest Posts</title></action>
        <action method="setPostCount"><post_count>5</post_count></action>
    </block>
</reference>
Let's take a look at what the above code actually does...
Line 1: This line sets the block reference, which effectively positions the block in your site. For this example, we have told Magento to display our block in the content block, which is the main content area of the page.
Line 2: Firstly this line sets the block type, in this case wordpress/sidebar_widget_posts. This is the block type that will load in your recent posts (to see what other widget blocks are available, take a look in app/code/community/Fishpig/Wordpress/Block/Sidebar/Widget/). The next parameters are name and as. These two parameters name the block and provide tokens with which you can refer to the block from your XML and PHP code. The last parameter on this line, template, allows you to set the template of the block. For this block, we have used the default template, however, if you wanted, you could create a custom template and refer to that using this parameter.
Line 3: Here we set the title of the block. Feel free to change the 'Latest Posts' text to anything you want.
Line 4: Here we set the number of posts that we want to display. The code above instructs Magento to display the latest 5 published posts but you can set it to any number you wish.
Line 5: This line closes the block tag and must be included.
Line 6: This line closes the reference tag and must be included.
To try this code out, login to your Magento Admin, go to your Homepage CMS Page and copy the code into the Layout Update XML field and save the page. Now, if you go to your homepage, you should see your recent posts block.

Filtering the WordPress Post List by a Category ID

Sometimes you may only want to show recent posts from a certain category instead of listing all posts. Using the above the code, we can add 1 extra line to accomplish this.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--
/**
 * Display a list of your 5 most recent WordPress Posts
 * from the Category with the ID of 1
 *
 * {\{block type="wordpress/sidebar_widget_posts" name="wordpress.widget.recent_posts" post_count="5" title="Latest Posts" category_id="1" template="wordpress/sidebar/widget/posts.phtml"}}
 */
-->
<reference name="content">
    <block type="wordpress/sidebar_widget_posts" name="wordpress.widget.recent_posts" as="recent_posts" template="wordpress/sidebar/widget/posts.phtml">
        <action method="setTitle"><title>Latest Posts</title></action>
        <action method="setPostCount"><post_count>5</post_count></action>
        <action method="setCategoryId"><id>1</id></action>
    </block>
</reference>
In the above example, we have added line 5, which simply tells Magento to only display posts from the WordPress category with the ID of 1.

Filtering the WordPress Post List by an Author ID

Another popular filter is the Author ID filter, which as the name suggest, allows you to display posts by a specific author.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--
/**
 * Display a list of your 5 most recent WordPress Posts
 * from the Author with the ID of 1
 *
 * {\{block type="wordpress/sidebar_widget_posts" name="wordpress.widget.recent_posts" post_count="5" title="Latest Posts" author_id="1" template="wordpress/sidebar/widget/posts.phtml"}}
 */
-->
<reference name="content">
    <block type="wordpress/sidebar_widget_posts" name="wordpress.widget.recent_posts" as="recent_posts" template="wordpress/sidebar/widget/posts.phtml">
        <action method="setTitle"><title>Latest Posts</title></action>
        <action method="setPostCount"><post_count>5</post_count></action>
        <action method="setAuthorId"><id>1</id></action>
    </block>
</reference>
In the above example, we have added line 5, which simply tells Magento to only display posts from the WordPress author with the ID of 1.

Filtering by a Category ID and a Author ID

To display posts written by a specific author and published in a specific category, use the following code.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--
/**
 * Display a list of your 5 most recent WordPress Posts
 * from the Author with the ID of 1 & category with the ID of 1
 *
 * {\{block type="wordpress/sidebar_widget_posts" name="wordpress.widget.recent_posts" post_count="5" title="Latest Posts" author_id="1" category_id="1" template="wordpress/sidebar/widget/posts.phtml"}}
 */
-->
<reference name="content">
    <block type="wordpress/sidebar_widget_posts" name="wordpress.widget.recent_posts" as="recent_posts" template="wordpress/sidebar/widget/posts.phtml">
        <action method="setTitle"><title>Latest Posts</title></action>
        <action method="setPostCount"><post_count>5</post_count></action>
        <action method="setCategoryId"><id>1</id></action>
        <action method="setAuthorId"><id>1</id></action>
    </block>
</reference>

Display Post Excerpt and Other Post Information

By making some small changes to the XML, you can display more information about each post. The following code illustrates this.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--
/**
 * Display a list of your 5 most recent WordPress Posts
 * Also include post excerpt, date and comment count
 *
 * {\{block type="wordpress/sidebar_widget_posts" name="wordpress.widget.recent_posts" post_count="5" title="Latest Posts" excerpt="on" excerpt_length="1" date="on" comment_num="on" template="wordpress/sidebar/widget/categoryposts.phtml"}}
 */
-->
<reference name="content">
    <block type="wordpress/sidebar_widget_posts" name="wordpress.widget.recent_posts" as="recent_posts" template="wordpress/sidebar/widget/categoryposts.phtml">
        <action method="setTitle"><title>Latest Posts</title></action>
        <action method="setPostCount"><post_count>5</post_count></action>
        <action method="setExcerpt"><display>on</display></action>
        <action method="setExcerptLength"><length>30</length></action>
        <action method="setDate"><date>on</date></action>
        <action method="setCommentNum"><comments>on</comments></action>
    </block>
</reference>
The above code includes the post excerpt with a limit of 30 words, the post date and the comment count for the post! Notice that the template has changed from posts.phtml to categoryposts.phtml. This template is actually used by the Category Posts widget but can be used anywhere on the site using the above XML.

Need More Help?

If you're not a developer, this article might not make much sense to you. If that is the case, we can set up a WordPress recent posts block for you. For more information about this service, please click here.

No comments:

Post a Comment