Some weeks ago I started a new blog named When I Have Time where I write about anything not related to WordPress and WooCommerce.
It’s a WordPress.com blog, and I needed to boost it a bit. I thought to cross-post from that blog to this one, by creating posts here and linking them to that blog, but I didn’t want them to appear as real posts like others on this blog, more like referrals only.
I found some plugins to do this on the .org repository, but they didn’t do exactly what I wanted. So I decided to create mine.
WP.com Cross-Post
WP.com Cross-Post is a a free plugin that syncs your WordPress.com blog with your self-hosted WordPress site automatically, every day.
It creates posts on your self-hosted WordPress site by fetching them from WordPress.com through the API and publishes them automatically.
Since it simply copies posts, you may think that you could have problems with duplicated content and Google ranking. That’s true, but I introduced support for Yoast SEO. If you have it installed and active, WP.com Cross-Post will automatically insert a canonical link in the header pointing to the original blog post on WordPress.com so that Google knows that it is not the original post and will not consider it a duplicate.
Customization
This plugin is customizable via filters. The available filters are:
wpcom_crosspost_author_email: Pass the email address of the user to use as author of the cross-posts;wpcom_crosspost_post_data: Filter the data before to create the cross-post;wpcom_crosspost_sync_frequency: Change the frequency of the scheduled event to check for new posts;wpcom_crosspost_api_call_params: Filter the data sent to WordPress.com via API to retrieve posts;wpcom_crosspost_sinc_from: Change the “from” date to retrieve posts from WordPress.com. Default “yesterday”.
Configuration
Go to Settings > WP.com X-Post and fill in the Client ID and Secret. If you don’t have them, click on the button Create WordPress.com App to create an app on WordPress.com.
Save the changes. The button Connect to WordPress.com will appear. Click on it to connect your self-hosted site to WordPress.com and choose the blog you want to sync with.
One hour after the first activation there will be the first sync.
Cross-Post Design
The plugin does not include any style for cross-posts. They will look differently based on your theme’s style. If your theme supports post formats and has a specific style for the format link, that style will be used.
For Storefront, it does not include any special style for post formats, so the cross-posts were looking exactly like any other post. But, for my blog, I didn’t want that.
I just wanted a title for the cross-post, a category, and a link to the original post. So I created my post format template and style. If you need it too, here is what you need to do.
Link Post Format Style for Storefront
If you are not using one yet, create a child theme for Storefront, or download this starter child theme by Stuart Duff.
Before to upload it to your wp-content/themes/ folder, open it and create a file named content-link.php in the root of the child theme. Add this content inside of it:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> | |
| <header class="entry-header"> | |
| <?php | |
| $original_url = get_post_meta( get_the_id(), '_wpcom-crosspost-original_url', true ); | |
| $url = ! empty( $original_url ) ? $original_url : get_permalink(); | |
| if ( is_single() ) { | |
| storefront_posted_on(); | |
| ?> | |
| <span class="posted-on"><?php printf( __( 'at <a href="%s" rel="bookmark">%s</a>', 'storefront' ), esc_url( $url ), parse_url( $url, PHP_URL_HOST ) ); ?></span> | |
| <?php | |
| the_title( '<h1 class="entry-title">', '</h1>' ); | |
| } else { | |
| if ( 'post' == get_post_type() ) { | |
| storefront_posted_on(); | |
| ?> | |
| <span class="posted-on"><?php printf( __( 'at <a href="%s" rel="bookmark">%s</a>', 'storefront' ), esc_url( $url ), parse_url( $url, PHP_URL_HOST ) ); ?></span> | |
| <?php | |
| } | |
| the_title( sprintf( '<h1 class="entry-title"><a href="%s" rel="bookmark">', esc_url( $url ) ), '</a></h1>' ); | |
| } | |
| ?> | |
| </header><!– .entry-header –> | |
| <div class="entry-meta"> | |
| <?php | |
| echo '<label class="label">' . esc_attr( __( 'Written by', 'storefront' ) ) . '</label>'; | |
| the_author_posts_link(); | |
| /* translators: used between list items, there is a space after the comma */ | |
| $categories_list = get_the_category_list( __( ', ', 'storefront' ) ); | |
| if ( $categories_list ) : | |
| echo '<label class="label"> – ' . esc_attr( __( 'Posted in', 'storefront' ) ) . '</label>'; | |
| echo wp_kses_post( $categories_list ); | |
| endif; // End if categories. | |
| /* translators: used between list items, there is a space after the comma */ | |
| $tags_list = get_the_tag_list( '', __( ', ', 'storefront' ) ); | |
| if ( $tags_list ) : | |
| echo '<label class="label"> – ' . esc_attr( __( 'Tagged', 'storefront' ) ) . '</label>'; | |
| echo wp_kses_post( $tags_list ); | |
| endif; // End if $tags_list. ?> | |
| </div> | |
| </article><!– #post-## –> |
Then, in the file style.css add this code:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Post format Link | |
| */ | |
| .hentry.type-post.format-link .entry-header { | |
| margin-bottom: 5px; | |
| } | |
| .hentry.type-post.format-link .entry-title { | |
| font-size: 1.618em !important; | |
| } | |
| .hentry.type-post.format-link .entry-title a::before { | |
| content: "\f103"; | |
| position: relative; | |
| display: inline-block; | |
| margin-right: 7px; | |
| font: normal 18px/1 dashicons; | |
| speak: none; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| speak: none; | |
| } | |
| .hentry.type-post.format-link .entry-meta { | |
| float: none; | |
| width: 100%; | |
| } | |
| .hentry.type-post.format-link .entry-meta img { | |
| display: inline-block; | |
| margin-right: 20px; | |
| vertical-align: middle; | |
| } | |
| .hentry.type-post.format-link .entry-meta .label { | |
| font-weight: 400; | |
| margin-right: 4px; | |
| } |
That is all the code that you need to support the post format link in Storefront. This is how posts with that format will look:
Leave a Reply