Category Archives: WordPress

XML Sitemap & Google News plugin now fully WPML compatible

Many users have been asking for WPML compatibility but I had never come around to having a serious look into the matter, until one user, Hermes Andreu, kindly shared his patch. It was the final nudge I needed to get serious.

While basic WPML support was introduced in an alpha release in April this year, there remained issues that where difficult to tackle without the help from the WPML staff. They kindly provided me developer access to their latest version and patiently responded to my many questions.WPML compatible

So finally, after many weeks of tests, user feedback and help from WPML staff, I’m happy to announce the release of XML Sitemap & Google News feeds 4.7.3 with full WPML support!

… or at least as far as I’m aware. Please report any issues on Github, the forums or via the contact form.

How to float Jetpack’s social Sharing Buttons

Jetpack’s Sharing module is great. It creates some fine looking social buttons that fit most any website. But there is one downside: they’re only showing at the bottom of a post or page.

Some other social plugins offer floating buttons, said to be far more effective in getting your content shared. And while I don’t know for sure if that is true, it sounds plausible. So let’s try to float Jetpack’s buttons too, shall we?

Where to place the sharing buttons

The best place would be not far from the content, in the left or right margin. But what looks best? And is there place for a vertical floating bar of about 50 pixels wide? It all depends on your theme and the visitors browser window or screen size.

First, let’s start with the basic style rules to float the buttons and make the bar appear presentable.

Since you must be using Jetpack already with the Sharing module activated (no point in following this how-to if you’re not) just go on and activate the Custom CSS module too. Start with adding the following rules to your new Appearance > Edit CSS admin page.

/* basic floating and box style, positioned about half way
 * down the screen to the left of the content */
div.sharedaddy {
    position: fixed;
    top: 38%;
    margin-left: -82px;
    width: 32px;
    background-color: white;
    padding: 25px 15px;
    text-align: center;

/* hide some stuff */
.sd-social-icon .sd-content ul li span,
div.sharedaddy li.share-end {
    display: none;

/* make the more button fit */
.sd-social-icon .sd-content ul li {
    margin: 0;
    padding: 4px 7px;

/* compact some more */
.sd-content ul {
    margin: 0 !important;

Note that the negative margin-left: -82px; makes the whole bar shift to the left. Adjust this to move it far enough to float nicely beside your post content. The background colour should of course be adapted to fit your theme too.

But this is not going to work well when there is no room for the floating social bar. On smaller screens, the box will be pushed out of view and becomes useless. So we’ll have to start doing some calculations and we’ll need to apply these rules only to screens sizes that allow room for the floating bar.

An example

Let’s take for example the TwentyTwelve theme that is used (at the time of writing) on this site.

The maximum width of the content (post plus sidebar) is 960 pixels plus a margin of 40 px on each side, 1040 px in total. The whole thing is centered so if a browser window is wider than 1040 pixels, there is a margin going to show on the left and right. If the browser window is wider than 1040 + 50 + 50 = 1140 pixels then there should be just enough room for a floating bar on the left side, close to the post’s main content. We’ll also need to allow room for the scroll bar on larger posts in this calculation (because many browsers do not take this into account on their own) so we’ll add another 20px for safety.

Now to only apply your style rules to screen sizes wider than 1160 pixels, wrap them in @media rules like this.

@media screen and (min-width: 1160px) {

What about smaller screen sizes?

In case of TwentyTwelve, there is some room between the post content and the right sidebar which can be used. But there are some pitfalls to consider.

For example: when a page uses a full width (no sidebar) template, the floating box might suddenly cover page content. Or some post format or post types have different padding, making the floating box location shift and partly cover the sidebar. Or when the option to show sharing buttons on archive and blog pages is checked, multiple sharing bars will start covering each other.

Generally, you only want the social icons bar to float on individual posts and pages, not on archives. And when there are special templates used, another position might be needed.

So to avoid problems, you will have to adapt and make your style rules more specific. How to do this, again, depends on your theme. You’ll have to study the existing rules in the theme style sheet and any available classes that are appended to the body tag when using a page template or (custom) post type.

Below is a complete working example for TwentyTelve, currently (at the time of writing) being used live on this site. Notice the use of classes like .page-template-default and .single-format-standard to target specific cases.

/* floating social */
@media screen and (min-width: 720px) {
	.page-template-default div.sharedaddy, .single-format-standard div.sharedaddy {
		position: fixed;
		top: 44%;
		left: 65.104166667%;
		width: 32px;
		text-align: center;
	.page-template-default div.sharedaddy, .single-format-standard div.sharedaddy, .page-template-default .sd-social-icon .sd-content ul li span, .single-format-standard .sd-social-icon .sd-content ul li span, div.sharedaddy li.share-end {
		display: none;
	.page-template-default .sd-social-icon .sd-content ul li, .single-format-standard .sd-social-icon .sd-content ul li {
		margin: 0;
		padding: 4px 7px;
	.page-template-default .sd-content ul, .single-format-standard .sd-content ul {
		margin: 0 !important;

@media screen and (min-width: 1060px) {
	.page-template-default div.sharedaddy, .single-format-standard div.sharedaddy {
		left: initial;
		margin-left: 637px;

@media screen and (min-width: 1150px) {
	.page div.sharedaddy, .single-format-standard div.sharedaddy {
		top: 38%;
		margin-left: -72px;
		padding: 25px 5px 25px 15px;
		background: linear-gradient(to right,#eee,white,white);
		border-radius: 24px 12px 12px 24px;
		box-shadow: rgba(0,0,0,.3) -5px 0 3px;

You can see how there are now different @media sections, for different screen sizes. In this case, the vertical floating bar starts at a 720 pixel wide screen, positioned to the right of the content. Then, from 1150px onward, it will show on the left side.

To target only pages using the default template and posts of the normal post format, .page-template-default and .single-format-standard are used. In all other cases, the rules will not apply and the social sharing icons will show below the content as before.

Please note that these classes may not be available in your theme. You’ll have to find out which classes you can use in your case by opening the browser Developer Tools.

I hope this gave some inspiration to start playing around with CSS3 @media rules for your Jetpack social sharing buttons. Have fun!

Graph Paper Press

Graph Paper Press WordPress themes

Graph Paper Press is a small team of web designers and developers based in Brooklyn, NY who build graphically minimal WordPress themes for photographers, artists and entrepreneurs. Their content-rich designs allow you to create a blog, build a portfolio and sell your photography or artwork online in one place! They offer a variety of free WordPress themes and premium WordPress themes that cater specifically to the needs of creatives. Getting started is easy:

  1. Register an account with Graph Paper Press.
  2. Browse and find a theme to download and follow the installation instructions!

Effortless Customization

Graph Paper Press has dozens of WordPress themes and plugins that are both easy to use and customize. Their themes allow you to change fonts, colors, backgrounds, headers, menus, insert logos and create slideshows so that your site is exactly what you want it to be.

E-Commerce Ready

Graph Paper Press also makes a free plugin called Sell Media that allows you to sell photos, prints and other media directly through your WordPress site. Coupled with its many extensions, Sell Media becomes an easy platform through which you can track sales, calculate commissions, protect your work and connect with your customers. It’s a sure-fire way to create and manage a photography business through WordPress. Install Sell Media and voila! You’re running a business!

Final Words…

Sometimes things just don’t work out, and that’s okay. Graph Paper Press offers a 30-day, money-back guarantee on all of their products.

Use this coupon code and save 25%


Get Started Now

WordPress 4.2 “Powell”

Version 4.2 of WordPress, named “Powell” in honor of jazz pianist Bud Powell, has been released. All Status301 plugins have been tested and found to work without issues on this new version and tonight the Status301 Network will be upgraded.

Read more about new features and improvements on or just enjoy!

Twenty Eleven and the case of the missing Featured Header

It was late. The dark night was cold and windy. I had just come home and was lighting the fire to warm the chilled house as suddenly I heard three loud knocks at the door… Continue reading

Advanced options for Easy FancyBox

It’s finally going live: The long awaited extension to bring advanced options to the regular Easy FancyBox plugin for WordPress. Read all about the new options and order online on