WordPress theme upload error “PCLZIP_ERR_BAD_FORMAT (-10)”

While trying to install a wordpress theme that was packaged as an .rar archive I got the following error:

The package could not be installed. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature

This is because I’m trying to unpack a .rar archive and the server doesn’t have rar archive support installed, however you can get around this issue quite easily.

All you need to do is unpack the .rar archive and re-pack it as a .zip archive and re-try the upload. Everything will work as expected after that.

Youtube and Vimeo responsive – elastic videos with CSS and HTML


The idea behind responsive videos is to create a box with the proper ratio (4:3, 16:9, etc.), then make the video inside that box stretch to fit the dimensions of the box.

The main trick with elastic videos is to make use of the padding property which is the magic that styles a box with an intrinsic ratio. This is because we’re using it to set the padding to a percentage value, based on the width of the containing block.

First you will need to add the following CSS code to your wordpress theme style sheet. You can do this inside of your theme options, if your themes allows for custom CSS code to be added, or if not, then you will need to use the built-in wordpress editor to add this code at the bottom of your style.css or stylesheet.css default css file associated with your theme (go to Appearance > Editor > Styles (Stylesheet(style.css) or if supported Appearance > Edit CSS option).

CSS code for responsive / elastic Youtube embed

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Second, you will have to take each iframe Youtube video or Vimeo embed code that you want to make responsive and wrap it around with HTML code as illustrated below.

HTML source code for responsive / elastic Youtube embed

</pre>
<div class="video-container"><center>
 <iframe src="http://www.youtube.com/embed/KQ6zr6kCPj8?rel=0" frameborder="0" width="560" height="315"></iframe></center></div>
<pre>

At this point, the responsive YouTube iframe embedings are working, your videos should be responsive / elastic, and ready to view on Tablet devices and Mobile handsets. To verify this works use a test post and copy/paste the code above and hit Preview. Next, click on the browser “Restore Down” button in the top right corner of your screen, and begin re-sizing the browser window so that you can see in real-time how the iframe containing the video adjust to the new canvas dimensions.

Inspiration and much thanks to John from avexdesigns , and the original master  – Thierry –  from alistapart.

If you’ve enjoyed this post and found it useful, spread the love and share the knowledge.

Thank you!

Display wordpress page generation/load time statistics

You might have seen blogs around that display statistics about the time it took for the page to be generated / loaded . If you’re interested in implementing such a functionality in your own blog I’ll present you below with the way to achieve that along with the source code that does that. The majority of the work is based on Viper007Bond original post, but we’ve added a small enhancement to it.

We’ll be displaying the total time it took for the page to be generated considering php and mysql queries, and to do that we first need to define a variable inside the wp-config.php in order for that to work. Therefor open your wp-config.php file and add the following line to it:

define( 'SAVEQUERIES', true );

Now that that’s done, we’ll be moving on to the actual calculations and display of the load time information. Typically you’d add the code and have the information be displayed in your theme’s footer.php file. So take a look inside your wordpress theme directory and look for the file called footer.php and open it for edit and in-between the

<?php ?>

tags paste the code snippet below:

if (current_user_can('level_10'))
{
global $wpdb;

// Get the total page generation time
$totaltime = timer_stop( false, 22 );

// Calculate the time spent on MySQL queries by adding up the time spent on each query
$mysqltime = 0;
// if there are indeed mysql queries then
if ($wpdb-&gt;queries != null)
foreach ( $wpdb-&gt;queries as $query )
$mysqltime = $mysqltime + $query[1];

// The time spent on PHP is the remainder
$phptime = $totaltime - $mysqltime;

// Create the percentages
$mysqlper = number_format_i18n( $mysqltime / $totaltime * 100, 2 );
$phpper = number_format_i18n( $phptime / $totaltime * 100, 2 );

// Output the stats
echo 'Page generated in ' . number_format_i18n( $totaltime, 4 ) . " seconds ( {$phpper}% PHP, {$mysqlper}% MySQL )";
}

At this point you are good to go. Save your footer.php file and refresh any page of your blog.

At the bottom, in the footer section of your theme, you will see the newly added text that will read something like:

Page generated in 0.1352 seconds ( 94.00% PHP, 6.00% MySQL )

Now, consider the fact that the above code will only display this information for users that are admins, and not for regular users. Should you wish to display this information to everyone, simply delete the highlighted lines in the code snipped displayed above.

Also, take into account, that by enabling SAVEQUERIES (Save queries for analysis) in your config.php, there will be a small performance penalty involved, since this is mostly used for debugging purposes (but still…it’s COOL 🙂 ).

Oh, and by the way, if you’re wondering how to have code with highlighted syntax on your blog, then feel free to checkout the SyntaxHighlighter Evolved plugin.

10 killer video tutorials to get you started with Thesis 2.0 WordPress Theme

Note: all credits and rights belong to the creators of the “Build your own Business Website” who have made these Thesis 2.0 tutorial series free and available to everyone.

Thesis 2.0 Video Tutorial – Part 1 – Introduction to the new concepts behind the framework

Thesis 2.0 Video Tutorial – Part 2 – The New Thesis Interface – theme settings page and skin editor walk-through

Thesis 2.0 Video Tutorial – Part 3 – Create a 2 Column Layout

Thesis 2.0 Video Tutorial – Part 4 – Create a 4 Column “Fat Footer”

Thesis 2.0 Video Tutorial – Part 5 – Add a Clickable Image and a Menu to the Header

Thesis 2.0 Video Tutorial – Part 6 – Create a Custom Menu Style

Thesis 2.0 Video Tutorial – Part 7 – Create a Custom Header Style for the Home Page

Thesis 2.0 Video Tutorial – Part 8 – Style the Backgrounds

Thesis 2.0 Video Tutorial – Part 9 – How to create a widget like feature box with a image slider and a call to action.

Thesis 2.0 Video Tutorial – Part 10 – Questions and answers

For more Thesis 2.0 video tutorials, feel free to check out the Free Video Tutorials section on the Build Your Own Business Website.

Also if you’d like to browse the entire tutorial list on the Vimeo website you can do so by navigating to “Seminar – Thesis 2.0 Launch Party“.

WordPress (nginx-varnish) Jetpack xml_rpc 32700 glitch fix

My wordpress setup is hosted on a micro instance VPS on Amazon EC2 cloud running Ubuntu 12.10 64-bit, mysql, php-fpm, nginx web server and varnish cache http accelerator and after I install and try to activate jetpack I’ve experienced the following error:

Your Jetpack has a glitch. Something went wrong that’s never supposed to happen. Guess you’re just lucky: xml_rpc-32700. Try connecting again.

Error Details: The Jetpack server could not communicate with your site’s XML-RPC URL. Please check to make sure http://yoursite.com/xmlrpc.php is working properly. It should show ‘XML‑RPC server accepts POST requests only.’ on a line by itself when viewed in a browser and should not have any blank links or extra output anywhere.

The URL request that’s being made and fails is: http://yoursite.com/wp-admin/admin.php?page=jetpack&action=register&_wpnonce=********** where ********** represents an alphanumerical code cooked up by Jetpack (like: bf67aebc88)

As many others before me I’ve also run into the jetpack problem mentioned above, however it seemed that none of the solutions I’ve found out there fixed the issue for me, mostly due to the specifics of the server setup, therefore I’ll illustrate below how I’ve fixed the problem for myself, and I’ll also provide some links to additional resources that have worked for others (for users who are mostly having to do with shared hosting environments).

Additional note: this fix also works for the situation in which you’re trying to use the WordPress for Android mobile app and your’re trying to add your self hosted blog to the android app – which fails without the steps below. Just as in the case of the Jetpack fix, this only has to be done once, so you might consider activating Jetpack and adding your self hosted blog to the android app at the same time as to not have to repeat the steps below.

WordPress for Android error message: org.xmlrpc.android.XMLRPCException: org.xmlpull.v1.XmlPullParserException: unexpected type (position:END_DOCUMENT [email protected]:1 in java.io.InputStreamReader

Solution (nginx – varnish):

If you are unfamiliar with LEMP (Linux server using Varnish, Nginx, W3 Total Cache, and WordPress), have a look at this post to get started.
In the this setup combination the culprit is actually Varnish which seems that although is passing through the request to the nginx backend (a.k.a no cache), some of the .js scripts required by Jetpack are not loaded/executed but rather served from the Varnish cache, leaving the jetpack plugin with incomplete data while attempting the request.
To fix this we could go ahead and blow our brains out trying to tweak the varnish configuration .vcl file to properly handle the request, but given that this Jetpack activation is a one time thing we’ll just go ninja, do it faster and with very little downtime.

Step 1:

Open the nginx configuration file specific for your site:

 nano /etc/nginx/conf.d/yoursite.conf 

edit and change the listening port to port 80. Typically nginx would be listening on a specific port (like 8080) for requests from varnish (which would be listening on 80).

listen 80; 

save and exit the file:

Ctrl+x > y > Enter

Step 2:

Now that we’ve changes nginx listening port to 80, before we can reload the configuration for the changes to take effect, we must stop the Varnish webserver, and we do that by issuing the following command:

 service varnish stop 

Step 3:

With the Varnish server stopped it is not time to reload the nginx configuration for the webserver and we do that by issuing the following command:

service nginx reload 

Step 4:

What’s happening now is that all wordpress requests are handled by nginx directly and are no longer passing through the Varnish caching layer.
Now go back in you wordpress blog, and click on the Jetpack tab > Connect to WordPress.com > Authorize Jetpack and voila…Jetpack has been authorized and enabled for your blog.

Note: as mentioned above, now would be a good time to also add your self hosted blog to the WordPress for Android mobile app to avoid having to redo these steps.

Step 5:

It is now time to undo what we did above with nginx and varnish in order to re-enable the varnish caching layer (don’t worry, only the activation had issue, everything else works well with varnish cache in front of it).

Open the nginx configuration file specific for your site:

 nano /etc/nginx/conf.d/yousite.conf 

Edit and change the listening port back to it’s original value (from 80 to 8080)

 listen 8080; 

Save and exit the file:

Ctrl+x > y > Enter

Reload the nginx web server configuration for changes to take effect

 service nginx reload 

Finally, it’s time to restart varnish cache:

 service varnish start 

Now it’s time to go back to your blog and play around with Jetpack as much as you want. You’ll find that pretty much everything works and you can enable and disable the various available modules, and you can even disconnect from WordPress.com if you want to, with no problem….however should you want the re-enable it, you’ll need to perform the above steps all over again.

Conclusion: the fix is rather simple actually, and if you read through the guide before actually doing it, it will take you less than a minute to complete, and with basically no downtime since you’re disabling varnish, but immediately enabling nginx as the fallback. This way, I think, is better than adding rules to the varnish configuration, since it’s something you only have to do it once, and just as the guide above it would still require you to stop and restart varnish.

Notes:

Look at the common issues as depicted on the jetpack.me site: http://jetpack.me/troubleshooting/troubleshooting-tips/

Look at the plugin compatibility know issues on the jetpack.me site: http://jetpack.me/troubleshooting/known-issues/

Try the “XML-RPC De-whitespacer” http://wordpress.org/extend/plugins/xml-rpc-de-whitespacer/ plugin in order to remove any white spaces / empty lines from your themes and plugins.

If you’re running lighttpd instead of nginx/varnish, you should check out this post on how to fix jetpack connection issue.

If none of the solution above resolve your xml_rpc 32700 glitch, you can contact the Jetpack.me guys using this link: http://en.support.wordpress.com/contact/?jetpack=needs-service, but before you do it would help you and the jetpack guys if you:

1) Download the jetpack compatibility plugin from http://plugins.svn.wordpress.org/jetpack/branches/jetpack-compatibility-test.zip
2) Upload the plugin to your site via Dashboard -> Plugins -> Add New.
3) Activate the plugin and go to Plugins -> Jetpack Compatibility Test.
4) Click the “Select All” button.
5) Send the results of the test back in a reply.