How to do Penetration Test for your WordPress Powered Website Part 2

Penetration-Test-for-your-WordPress-Powered-Website01

In recent times, there has been a vast surge in WordPress usage; this increase obviously requires an improvement in the security issues. So there is a PenTest or Penetration test or occasionally pentest, which help to check the Vulnerabilities in your WordPress Powered WebSite. Although it is very lengthy process but in simple words, A penetration test is a simulation of a malicious attack (often called a hacker: a Security expert) on a network, system, application or website, used to discover existing vulnerabilities and weaknesses before crackers find and exploit them. In other words a penetration test is an independent security evaluation of your Website, Network and System  infrastructure.

In “How to do Penetration Test for your WordPress Powered Website Part 1” we have explain how to set up the platform for doing pen test and in the part we give you brief explanation about How to do Penetration Test for your WordPress Powered Website.

The main goal of the conducted attack is to simulate  a malicious response which can engaged to indentify the vulnerabilities  in the password protected page. As well to determined the harmful impact due to security breaches on the integrity of website system, and to check the confidentiality for customer’s data and information on the system. We have used the OWASP (Open Web Application Security Project) methodology and follow the recommendations on the behalf of NIST SP 800-115 (NIST, 2008)

During the attack we have discoved that the target system contains the lates version of WordPress 3.3.2 installed on a web sever, for scanning we have used WPscan tool which produce the report showning that there are Multiple CSRF Vulnerabilities so we can attack on a target to change post title, manage the Administrators/users accounts along with emails, can redirect site to another URL, possible to change posts, can customize the theme, insert our own header image.

Before using Armitage and doing exploitation by using Mutiple CSRF Vulnerabilities, we have run a wpscan to enumerate the plugin lists and user list. WPSacn is a security scanner which is written in Rubby and is it’s licensed comes under GPLv3 (Dewhurst, 2011). This black box scanner helped us to find weaknesses in the installed system and have done the following enumeration through Security scanner:

WPScan is a black box WordPress Security Scanner written in Ruby which attempts to find known security weaknesses within WordPress installations. Its intended use it to be for security professionals or WordPress administrators to asses the security posture of their WordPress installations. The code base is Open Source and licensed under the GPLv3.

Features include:

  • Username enumeration (from ?author)
  • Weak password cracking (multithreaded)
  • Version enumeration (from generator meta tag)
  • Vulnerability enumeration (based on version)
  • Plugin enumeration (todo)
  • Plugin vulnerability enumeration (based on version) (todo)
  • Other miscellaneous checks

Exploitation on Local Server

  • Have done the all user list enumeration as follow:

Ruby ./wpscan.rb –url http://192.168.0.10/ — enumerate u

 

 

  • For Plugin enumeration run the following command:

Ruby ./wpscan.rb –url http://192.168.0.10/ — enumerate p

After running these enumerations we have got admin user name as “admin” and installed plugins list. We have made a file which contains Password list and run the brute force attack using Password Dictionary, as save a password containing file in a folder /pentest/web/wpscan and run following command to do brute force attack on password protected pages:

Ruby ./wpscan.rb –url http://192.168.0.10/ –wordlist pass.txt –username admin

If someone gets a hold admin accounts, then you are at risk of identity theft and hijacking of your WordPress Powered website. Anyone who breaks in to your account could steal your private content, post spam, steal your WordPress account or use it to gather email addresses to send spam to others.

We have got the administration level access through this attack, means we have a full control over the WordPress installed system. After this test we have done HTTP-DoS attack for exploitation and used Armitage as well to identify further vulnerabilities to protect the server from attackers.

Penetration Test through Armitage

After connecting to the Armitage in a Back Track run this command to add a host machines as one is Server and other is Windows XP Client machine for attack:

msf  > db_nmap –sT –Pn –T5 –o –open 192.168.0.10

msf  > db_nmap –sT –Pn –T5 –o –open 192.168.0.112

After connecting to the host, run the scan and services to know which port is open and which one is filtered.

Countermeasures and recommendations:

  • Always update the WordPress installation to the latest version
  • Protect the wp-config.php file and add following piece of code in .htaccess File:

Change access right to wp-config.php file as:

# protect wp config.php

<files wp-config.php>

order allow,deny

deny from all </files>

  • Disabled the php.ini function which are not required
  • To protect from the Brute force attack, reduces or limit the login attempts through plugins like Limit Login Attempts. (
    Login Ninja)
  • Make a strong password
  • Always update to date installed Plugins
  • Do not use database with root use name and make strong password
  •  Make log file for errors and take proper action to prevent this happened in future.

Risk Rating:

The result of this penetration test shows that the Password Protect website is high on risk from attackers which can damage the company website and by exploiting the web server can get the operation control to have financial or other benefits.

At the end of this test we can conclude that there are security breaches which can harmful for the integrity of Company’s assets, the data confidentiality is at high risk. We have done the penetration test successfully and came to know that the attackers can determine the vulnerabilities to create a damaging events. The attacker can have control over the whole system, so there is a need to take proper security counter measures as mentioned above.

Web application security testing
Askapache password protect
Password protect plugin for wordpress

WordPress Security Plugins

S3Vault
Security Ninja
WordPress Safer Admin Plugin
Restrict Content Pro – PayPal Pro and Express

Useful links:

How to do Penetration Test for your WordPress Powered Website Part 1
How-to-find-remove-and-protect-wordpress-site-from-malware
How-to/how-to-protect-wordpress-powered-site-from-brut-force-attack
wordpress-3-3-1-multiple-csrf-vulnerabilities
Backtrack 4: Penetration Testing with Social Engineering Toolkit

After installing WordPress on Server machine, Victim box is ready for attack and you can do a penetration test for WordPress powered site. Follow wparena on Twitter and Facebook fan’s page.

Why choose WordPress to Create a Corporate Blog

WordPress is become as much powerful open source CMS (content management system) platform, not only small business using WordPress on their domain but big companies creating corporate blog on this platform. There are lots of reason behind this, for example, due to its Free themes and Plugins to enhance the features, publishing features, search engine friendly and can be manage the contents of their website. Many companies running and trying to improve their blog to get the traffic and to attract more readers to achieve their business goals.

As we know that WordPress is the most powerful and popular Content Management System and this popularity giving more vulnerabilities to this platform. Even there are myths about WordPress to Make Your Eyes Wide Open. There is a comparison about why WordPress is better for business than Blogger, but we are focusing on self hostedWordPress which you install on your own domain.  It is fact that there insecurities but following points represent why we can use WordPress to create a corporate blog on a big scale. As well we compile a list of famous  brands that are using WordPress.

WordPress is Open Source: Free to install


InfoWorld has announced the winners of its annual Best of Open Source Software awards (Bossies). Chosen by InfoWorld Test Center editors and reviewers, the annual Bossies recognize the best and most innovative open source software products for end users, businesses and IT professionals. [Source]

WordPress Leads Open Source CMS Market

According to water & stone, the “big three” open source CMSes from 2010 continue to dominate in 2011. WordPress, Drupal, and Joomla all topped the company’s survey of open source CMSes, with WordPress “clearly outpacing” Drupal and Joomla. [Source] Download a copy of the 2011 Open Source CMS Market Share Report

Open source wars: WordPress vs Drupal vs Joomla

Every IT person, developer, and programmer has an opinion when it comes to the various open source content management systems out there. It often comes down to functionality and ease of use, but even then the lines are often blurred and there is rarely a clear-cut victor. WordPress vs Drupal vs Joomla – which is really the king of open source CMS?

WordPress is open source

Six Apart has recently decided that the best way to win back customers fleeing their platforms is to target WordPress, which is a new strategy they call competing. [Source]

ExpressionEngine vs. WordPress

As someone who develops websites in both ExpressionEngine and WordPress, there is no question I hear more often than “Why ExpressionEngine? Why not WordPress (else, insert other open source PHP software here – Joomla, Drupal..)?” [Source]

Drupal vs Joomla vs WordPress

This article is written to inform end-users and businesses about the pros and cons of Drupal, Joomla and WordPress. [Source]

WordPress Wins Best Open Source CMS Award

WordPress, one of the best open source tool available today for blogging and managing websites etc, has been named the best open source CMS award for 2009. [source]

 SEO Friendly


WordPress is ready to encircle search engines through the posts, pages, tags and categories to help the search engine crawl  corporate blog or website and gather the information it needs to include your site within its database. WordPress comes with several built in search optimization tools, including the ability to use .htaccess to create apparently static URLs called permalinksblogrolling, and pinging. There are also a number of third party plugins and hacks which can be used for search engine optimization (SEO). From the Following links you can learn about how to make website or blog more SEO friendly:

What Makes a “SEO-Friendly” WordPress Theme?

There’s a lot of hullabaloo regarding “SEO” when it comes to WordPress themes. This post was originally meant to be a response to Alex Denning’s post called “Some Thoughts on SEO” and Jeff Chandlers post “Write For People, Not Spiders” but it evolved into this. [Source]

The Definitive Guide To Higher Rankings For WordPress Sites

WordPress is one of the best, if not the best content management systems when it comes to SEO. That being said, spending time on your WordPress SEO might seem like a waste of time, it most definitely is not. Optimizing your site to the best practices outlined in this article will help you improve your rankings, gain more subscribers and have a better website in general. [Source]

Search Engine Optimization for WordPress

WordPress, straight out of the box, comes ready to embrace search engines. Its features and functions guide a search engine through the posts, pages, and categories to help the search engine crawl your site and gather the information it needs to include your site within its database. [Source]

SEO Friendly Images: WordPress Plugin

SEO Friendly Images is a WordPress SEO plugin which automatically updates all images with proper ALT and TITLE attributes for SEO purposes. If your images do not have ALT and TITLE already set, SEO Friendly Images will add them according the options you set. Additionally this makes the post W3C/xHTML valid as well. [Source]

smart SEO – WordPress Plugin

The easiest way to optimize your wordpress website for search engines! Settings – Here you have:

  • Autocheck current post
  • Autocheck timing – in seconds
  • Title separator (default – )
  • Seo title position – in admin post listing
  • Show smartSeo score
  • On plugin deactivate – remove all current settings on plugin deactivate. Reset to default.

Detail

xCommenter WordPress Auto Comment SEO Plugin

xCommenter will automatically create comments on your blog posts and WordPress pages. It does this by analyzing the post title, content and tags to determine find relevant Yahoo Answers comments and questions. Optionally xCommenter will then run the content through a powerful content spinner API to make the content more original and unique to improve quality. Detail

SEO Auto Title Suggestions – Premium Plugin

  • Full automated Keyword research
  • Compare Keywords
  • Shows how many websites compete for a keyword
  • Easy and Fast installation
  • All languages supported

This plugin gives you full keyword research power right at your fingertips while writing your post titles. Detail

WordCompress – WordPress SEO Compression!

WordCompress is a premium plugin designed for SEO and improving user experience and website performance. WordCompress is a compression and cache total that takes the existing code layout of a WordPress blog which includes CSS files, JavaScript files and HTML code. WordCompress will then minify all the code by deleting comments, whitespaces and compress the entire code into a single executable line. External and internal CSS and JavaScript files are also compressed. Detail

Youtube SEO playlist for WordPress

allows you to turn an unordered list of YouTube links into a video playlist. The php script makes the youtube list on a fly and uses the latest Gdata Api v2. You can choose to make a video playlist with keywords, userchannel or a regular youtube playlist. There are many options which can be set in the php script and in the jQuery function. Includes the new html5 youtube player option. This is the only youtube script available with search engine optimalisation (SEO) Almost drag and drop. Detail

Best SEO Plugins for WordPress

With more than 120 million blogs in existence, how do people find YOUR content on the Internet? The key starts with great search engine optimization (SEO), which is an art and a science that helps search engines discover your content and understand how relevant it is to specific search queries. [Source]

Creating SEO Friendly WordPress URLs

By default, WordPress uses dynamic web URLs that may hinder some of your search engine optimization efforts. This challenge can be easily overcome simply by creating SEO friendly WordPress URLs. Thankfully the WordPress admin panel is set up so that you can implement this technique in a matter of minutes! [Source]

 SEO for WordPress – The Complete Guide

[Source]

SEO Friendly Dynamic <title> for WordPress

Using a good <title> tag is incredibly important for ranking high in the Search Engines. This code snippet will dynamically generate a dynamic <title> tag to improve your WordPress site’s SEO and should be placed in your WordPress site’s header.php replacing your existing <title>. [Source]

8 Excellent WordPress SEO Plugins

WordPress is one the most popular tools for publishing content on the web. Everything from e-commerce websites to blogs can be developed using WordPress. [Source]

10 Ways To Improve Your WordPress Blog’s SEO

Some argue that SEO, or search engine optimization is a whole load of tosh, and whilst they may have a point to an extent, there are a couple of easy things you can do that should improve your blog’s SEO. That said, take everything with a pinch of salt; don’t implement these features and elect to shoot up search rankings. [Source]

Awesome WordPress SEO With Custom Fields

Your average WordPress theme will take the title you put into the post and output it as the <title>, the post title in archive pages and send it as the title to RSS readers. That’s not really the most exciting way of doing things or the way that offers the most customisation; I want to be able to use a title written for search engines and use that as the <title>, another written for archives perhaps with some emphasis and one final one for RSS readers. [Source]

Making a Blog Post in WordPress SEO Friendly

Of course, it helps if the article is lively, engaging and useful to your readers but there are some little tweaks that can give the post a “leg-up” in search engine optimization terms. [Source]

Best WordPress SEO Plugins : Every Webmaster Love

Plugins make your blog more attractive and SEO friendly on the other hand they increase your blog loading time, Use only least plugins as you can .Below is the list of some Best WordPress SEO Plugins. [Source]

Scribe SEO Content Plugin

Scibe SEO is a premium plugin that has gained a lot of popularity lately and is sure to be one of the best content and link-building plugins out there. The plugin was created by the very popular “CopyBlogger” and it works on a membership basis. Basically it adds a whole SEO analysis system to your site so whenever you are writing a new post it can scan it and give you all kinds of SEO tips for improving the blog post in terms of content, keywords, meta tags…etc. The plugin will also show you sources from which you could get related links to your posts as well as identify influential social media users that may want to share your content. [Source] Scribe Makes SEO Simple

WordPress SEO Guide: First Steps

This post is for those whom have just installed WordPress and want to optimize their site to make sure they won’t have to go through tons of work later to fix up their basic on-page SEO. [Source]

Excellent Corporate Blogs using WordPress


There are several reasons and considerations to create a Corporate blog using WordPress, you have lots of options like theme customization, freedom of topic selection, can have lots of writers, can embed multimedia files, can do promotion for your product, choose different writing style, can make comment policies, enhance features with WordPress Plugins,  and so on. Above and beyond all of that, look on the following examples for your inspiration and get an idea for your own blog:

The Wall Street Journal’s Magazine

CNN’s Political Ticker

TechCrunch – ‘The’ tech-review blog

BBC’s Top Gear blog

 Squarespace

 Dell Community Blog

 37signals Product Blog

 

Zillow Blog

PlayStation.Blog

Disney Parks

GM FastLane Blog

Evernote: Mix It Up

Flickr Community Blog

 Marriott On the Move

 eBay Ink

Dog Blog

Lululemon Community Blog

 Whole Story

Yahoo Blog

Digg Blog

The Ford Social Blog

Sony Electronic Blog

People Magazine

NYTimes Blogs

Mozilla Firefox

Wired WebMonkey

Giga OM

Ben & Jerry

cPanel

General Electronic (GE)

Rackspace Blog

Other Corporate WebSites Powered By WordPress

Best WordPress Themes for Corporate Blog


There are fantastic WordPress themes for corporate bolgging that you can get Free as well Premium themes. The following list will save you time in search of best corporate and business WordPress themes which are modern, clean, corporate, business WordPress themes that can fit into your business and definitely help to achieve your business goals.

Premium Themes for Business and Corporate Blogs

There are Tons of great premium themes out there that make setting up a Corporate business website a breeze. Below are 10 of what I think to be the best premium WordPress themes for business  and Corporate blog !

TheCorporation WordPress Theme

TheCorporation is a sleek and professional theme for business sites. Grab your visitor’s attention immediately with the prominent and flashy jQuery slider, and let them know who you are via the simple page-based homepage design. TheCorporation was built to be sophisticated and userfriendly, and will surely impress your potential clients.

Live Preview | Detail and Download

U-Design WordPress Theme

U-Design is a very powerful theme which suits both, users with no programming background as well as advanced developers. It will help you build your site in no time to your liking with minimal effort. It empowers you to set any color to elements such as backgrounds, links, text, menu links, etc. You can completely change the look and feel of your site in seconds. You can also choose from over 500 fonts, including Google Font Directory and Cufón fonts. This number will grow with time since many new fonts are being added to the Google fonts library. The theme also features 6 (six) Home page sliders for you to choose from.

Live preview | Detail

Office Responsive Business Theme

Office is the ultimate WordPress theme for any corporate business. Featuring a very professional design, 7 custom post types, drag and drop homepage modules, unlimited highlight color option, optional navigation icons, 3 menu regions, an optional responsive layout…Office has everything you’ll want for your business website.

Live preview | Detail

TopBusiness – Highly Customisable with responsive design

 

Live preview | Detail

United – Corporate, Business Portfolio WordPress Theme

United is perfect wordpress theme for company profile, corporate, business and portfolio websites withclean and minimal look. It includes powerful and minimal admin panel which give you full control over every major design element throughout your website.

Live preview | Detail

Business Theme from OrganicThemes

The Business Theme features a clean, corporate and responsive design perfect for companies wishing to increase the profile of their web presence. In addition to many of our standard page templates, the Business Theme also includes a page template for posting jobs, and an RSS news page template. The theme also contains multiple color change options — the background colors, link colors and highlight colors can all be changed without touching a single line of code. The Business Theme is a versatile solution for any company.

Live preview | Detail

FlexxTheme Mega WP Blog Theme

FlexxTheme was created for people who want more versatility out of their blogs and websites. It gives you the edge with built in SEO features, easy to plug-in graphics and backgrounds, and other features that will save you time or from having to learning code.

Live preview | Detail

Big News

“Big News” is a top notch WordPress Theme suitable for any news and information websites. It comes with a magazine layout that lets you define custom content (helpful in SEO) on the home page from various categories. This theme is packed with powerful admin features that will enable you to make your website unique and different in every way possible.

Live preview | Detail

Business WordPress Theme DeCanto

deCanto is an incredibly flexible and professional business WordPress theme. Through the extensive layout and styling options customizing the theme to your liking is a matter of seconds.

Live preview | Detail

Newsley Theme

An elegant and optimized theme with numerous features, multiple posts styles, flexible layout and enhanced by custom widgets.

Newsley Demo | Detail

imPower WordPress Themes

Typical built-in features of imPower Themes include, build-in SEO, multiple layout options, point and click universal video embed, built in galleries, and so much more.

Live preview | Detail

Business WordPress Themes

Use the most flexible template builder you may find with any premium WordPress theme. Everything you display on your site act as a widget, so you may use your site elements multiple times.

Live preview | Detail

Headway Themes


Create your site with the original Drag and Drop framework for WordPress. Build any layout you can think of, customize any page, add colors, fonts, and more; all with the power of the Headway Visual Editor. Great web design has never been faster or more flexible. Take full control over your WordPress site.

Detail

The Corporate theme

The Corporate theme works to help you build your brand or business with a rock-solid framework and the quality assurance that all smart organizations need.

Showcase your services and assets with polished, professional styling and the easy to navigate design of Corporate theme. Success begins with a solid foundation.

Live preview | Detail

FreeThemes for Business and Corporate Blogs


Corporate Life is free wordpress theme

Corporate Life is a free WordPress theme created within the frames of Getacustomdesign.com project. It is perfect for small corporate websites

Demo | Download

SimpleFolio

Simple and clean portfolio WordPress theme — SimpleFolio, designed by Omar E. Corrales and released for Smashing Magazine and its readers. SimpleFolio is a portfolio theme that includes a blog and a very extensive option page that allows you to exclude all your portfolio items from the blog page. It also includes a front page slider.

Demo | Download

Heliumified WordPress theme

Heliumified WordPress theme comes with a cleandesign and equipped with tons of fantastic features. This WordPress 3.0 compliant theme has 5 color schemes to choose from; aside from that you can also use custom colors to match your blog’s color palette.

Demo | Download

Satoshi WordPress Theme

Satoshi is a clean and minimal portfolio WordPress theme that’s ideal for showcasing project work.

It comes with a range of professional page templates including a custom front page, a stylish blog design, a portfolio page, and a fully functional contact form.

Demo | Download

How To Speed Up Your WordPress Websites Loading Times

Wordpress-Caching-and-Speed-Optimization-for-Advanced-Cloud-Setup

Every website owner want to speed up their website load time. Even the search engines like Googl love the website load time when considering for indexing and page ranking means Web search ranking also depends on site speed . As well all Internet users like fast loading website and spend more time on surfing. On top of that Site owners can reduces operating costs, increasing and improving the performance of website, means  increasing revenue while driving down operating costs. (video,slides).

We are going to look up how to optimize website to increase the load time and before taking steps you should analyse your site speed, to obtain a better picture of site speed issues. so first we look at Online Tools for Website speed testing for all kind of website than there are tips and ticks to improve the site load time along with a list of WordPress Plugins to speed up WordPress site.

Free Online Tools for Website Speed Testing


There are lots of source which help to determine the speed of a website relative to other sites and web masters and authors  can take proper measure to  making your site faster. Following are the Free Tools to to evaluate the speed of any website:

Page Speed Online

An open source Firefox/Firebug add-on that evaluates the performance of web pages and gives suggestions for improvement. An open source Firefox/Firebug add-on that evaluates the performance of web pages and gives suggestions for improvement.

Pingdom Tools

Pingdom has a very strong and narrow focus. That focus lies on covering the uptime monitoring needs of 90% of the companies in the world. Instead of branching out into other areas, we will instead place all our efforts into maintaining the best uptime monitoring service available.

Free Website Performance Test

Try free instant website performance test. Test your site from around the globe. See how fast your pages load from San Francisco to Ireland; from Singapore.

Which loads faster?

This can be a simple tool for comparing whether your website performs better or worse than competing sites. This open source tool (view the source on GitHub) was originally created to promote the importance of web performance.

WebPagetest

WebPagetest is an open source project that is primarily being developed and supported by Google as part of our efforts to make the web faster.

WebPagetest is a tool that was originally developed by AOL for use internally and was open-sourced in 2008 under a BSD license. The platform is under active development on Google code and is also packaged up periodically and available for download if you would like to run your own instance.

Web Page Analyzer

WSO employs experts in most aspects of web site optimization, including front-end speed optimization using the latest web standards and techniques, back-end optimization using server tuning, SQL query optimization, refactoring, and middleware tuning, search engine marketing, web design, and optimized marketing campaigns.

Show Slow

Show Slow is an open source tool that helps monitor various website performance metrics over time. It captures the results of YSlowPage SpeedWebPageTest and dynaTrace AJAX Edition rankings and graphs them, to help you understand how various changes to your site affect its performance.

Site-Perf

With Site-Perf.com, you get an accurate, realistic, and helpful estimation of your site’s loading speed. The script fully emulates natural browser behaviour downloading your page with all the images, CSS, JS and other files – just like a regular user. Spot bottlenecks, reach perfect performance and balance your site load with Site-Perf.com, a smart and flexible testing tool. Focus on important things while Site-Perf.com delivers the speed facts straight to your screen.

Load Impact

This online web performance evaluation tool has the ability to show graphed data such as user load time (simulated by an automated virtual machine) and requests per second (helpful for seeing how durable your web server is and how fast it can handle web page requests).

OctaGate SiteTimer

Web Monitor allows you to monitor how long it takes for a user to download one or more of your web site pages. It visits the page that your request and downloads all content that’s directly linked from that page;

  • Images
  • Frames
  • IFrames
  • Script files
  • It follows redirects

YSlow

A free tool from Yahoo! that suggests ways to improve website speed.

Google Webmaster Tools

Site Performance shows the speed of your website as experienced by users around the world as in the chart below. We’ve also blogged aboutsite performance.

Web Site Performance Test 

A real-time site performance tool displaying information on things such as DNS lookup time and connection time.

Webslug

This web tool will compare the site performance of two websites.

WebWait

A basic website speed timer with options for specifying the number of requests to make and the interval between requests (e.g. 5 requests in 10 seconds).

Website Speed Test

Provides plenty of data on page speed, including estimated load times for various types of Internet connections.

GTmetrix

An online tool that uses YSlow and PageSpeed to evaluate your website’s front-end performance, giving you easy-to-understand information.

Website Speed Test

A rather basic online tool that provides data such as page size, load time, download speed and average speed in tabular format.

Yottaa Site Speed Optimizer

This web performance analyzer outputs great-looking reports. This tool requires you to sign up.

Zoompf Free Web Performance Scan

This tool will scan a web page and gather data pertaining to web performance. You are required to provide and verify your email address in order to run tests.

Site speed checker

A web-based site speed tool that allows you to run tests on 10 URLs all at once.

Free web site speed test

This simple website speed testing tool gives you the option to enter up to 10 URLs to run tests on simultaneously.

References and Other Resources:

15 Tools for Testing your Website
6 Tools To Find Out Website Load Speed
Tools to Evaluate the Speed of Your Website
20 Free Online Tools for Website Speed Testing
Performance Unleashed: How To Optimize Websites and WordPress For Speed
18 Website Speed And Performance Checking Tools
20 Free Online Tools for Website Speed Testing

Tips and Tutorials to Speed Up WordPress site


Best Results for Your Time – Speed Optimization for WordPress

Website speed has been a concern for me since the end of 2010. I can’t remember exactly when but at some point Google said that website speed is now a ranking factor and ever since everytime I would get some sort of ranking decrease I would often believe it was my website’s slow loading speed that was the reason. WordPress blogs usually start at a disadvantage on this compared to normal html blogs or websites that simply have less lines for a web browser to load.

How to speed up your wordPress loading times

This tutorial give credit to the resources and explained how he got best result by optimizing his site and usage of the WordPress Plugins  for optimization.

Best way to Speed up your WordPress Blog

WordPress is one of the most widely used blogging platforms in which number of plugins and themes exist to create a highly specific equipment for their audience. Are you suffered or permanently suffering from the slow down page load in your WordPress blog ?. There are as many as reasons to slow down of your blog load time like broken themes, broken plugin, Previous Version of WordPress, Themes, Plugins, Large images files etc.

Speed Up Your WordPress / BuddyPress Loading Time With This Quick Tip

Minify is a PHP 5 app that “combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.” The WP Minify pluginmakes it easy to integrate Minify into your WordPress / BuddyPress site and in most cases will work right out of the box without any adjustments.

Dramatically Speed Up WordPress/WPMU Load Times With This Simple Tip!

Optimizing your WordPress blog for speed is a serious matter of competition for the attention of your user. The faster you can serve your pages, the better chance you have of lowering your bounce rate. This small piece of code will take you less than a minute to paste into your site and can instantly have your site running approximately 3-4 times faster than before. It’s called zlib compression.

WordPress Plugins to Speed Up Your Website

Fast websites less irritate your visitors which increases the chance that they would click your ads, purchase product or just stay longer at your website enjoying tremendous content that you’ve featured there. Also fast websites use less bandwidth and according to SEO specialists major search engines count sites’ speed while creating rankings for them.

How To Speed Up Your WordPress Blog

There is a popular expression that you have no doubt heard – “Time is money”. The biggest cliches are often the most valid, and we are not looking at an exception to that rule here. When it comes to websites and page load speed, time truly is money. (site speed)

Speed Up Your Blog – Loading Times Are More Important Than You Think

Is your blog or website a big clunky mess that always seems to load slowly? It’s not just you, the load time on your blog can absolutely destroy your “curb appeal” and bring down your blog’s value. After experiencing outages here at theNetFool.com, I’ve decided to switch web hosts. However, there are plenty of tricks you can apply to get some oil back in your site’s gears, and start seeing more traffic.

How to Optimize Your Site for Better Loading Time

Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there.

How to tweak your website images for maximum SEO

Most of the bloggers use images to improve the search engine optimization and to enhance the website content. And this is fact that photos and graphics bring more organic traffic to their site, specially if we are thinking about Google Image Search.

How to Increase WordPress Performance through Lazy Load Widgets

If you are using WordPress as your blog platform and want to increase its performance, The Lazy Widget Loader plugin provides lazy loading for widgets to improve page loading. Use it on slow widgets, especially those where external data is loaded, like widgets from Facebook, Twitter, AdSense and others.

How to manipulate image sizes to speed up WordPress blog load times

Loading time of web site directly impact users and ranking position. As compare to text, images take more time to load and search engines indexed those web pages which have less load time and user spend time that give good impression to search engines.

The Ultimate Quickstart Guide to Speeding Up Your WordPress Site

Give your site a boost! Implement crucial optimization techniques that will improve not only your ySlowscore, but your Google rank too. In this tutorial we will cover all aspects of W3 caching, ySlow, Google page speed, CSS sprites & htaccess rules, to achieve a high ySlow score like i have done on my blog.

10 Quick Tips: Optimizing & Speeding Up Your WordPress Site

Optimize your site to run as fast as it possibly can. So, without further adieu, here are 10 quick tips for optimizing your WordPress site!

WordPress Speed Optimization Guide

The load speed of your website is essential, you need a fast site because slow sites annoy users, meaning less visitors to your site. Secondly, search engines also consider the speed of your site when generating their rankings. There are a number of factors influencing the load speed of a WordPress site.

WordPress Caching and Speed Optimization for Advanced Cloud Setup

WordPress Caching and Speed Optimization for Advanced Cloud Setup is hard as most Cloud providers keeps combination hidden. Here is master guide of the rules. This article on WordPress Caching and Speed Optimization for Advanced Cloud Setup is not for WordPress users using a single Cloud Server or VPS or dedicated server or the worst – a shared server.

Taking my Blog to the Next Level (Part 4): Speed Optimization

Continuing from part 1 (falling in love with your blog again)part 2 (widgetizing & thumbnailing) and part 3 (search engine optimization), in this part I share the steps I’ve taken to enhance the speed and performance of my blog.

WordPress Plugins to Speed Up WordPress Site


Performance Optimizer Plugin for WordPress

The plugin will help you increase the performance of your WordPress website. We aim to do this by optimizing key features of the website’s loading process thus increasing the loading speed and limiting the bandwidth consumption.

Detail

WP Smush.it

Yahoo’s excellent Exceptional Performance series recommends optimizing images in several lossless ways:

  • stripping meta data from JPEGs
  • optimizing JPEG compression
  • converting certain GIFs to indexed PNGs
  • stripping the un-used colours from indexed images

Smush.it offers an API that performs these optimizations (except for stripping JPEG meta data) automatically, and this plugin seamlessly integrates Smush.it with WordPress.

W3 Total Cache

W3 Total Cache improves the user experience of your site by improving your server performance, caching every aspect of your site, reducing the download times and providing transparent content delivery network (CDN) integration.

Recommended by DIYthemes and web hosts like: Host GatorBlueHost

Parallelize

The solution Recommended by Google is parallizing resources across 2-5 hostnames on sites serving 10 or more static resources.

Parallelize allows automatically parallelizing WordPress attachement files (images or any files uploaded with the wordpress media features) across multiple hostnames, speeding page load. To assist caching, resources will always load from the same hostname.

Plugin Organizer

This plugin allows you to do the following: 1. Change the order that your plugins are loaded. 2. Selectively disable plugins by any post type or wordpress managed URL. 3. Adds grouping to the plugin admin age.

WP Avoid Slow

Web pages are becoming increasingly complex with more scripts, style sheets, images, and Flash on them. A first-time visit to a page may require several HTTP requests to load all the components. By using Expires headers these components become cacheable, which avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often associated with images, but they can and should be used on all page components including scripts, style sheets, and Flash.

JS & CSS Script Optimizer

Features

  • Combine several scripts into the single file (to minimize http requests)
  • Pack scripts using Dean Edwards’s JavaScript Packer
  • You can move all JavaScripts to the bottom
  • Combine all CSS scripts into the single files (with grouping by “media”)
  • Pack CSS files (remove comments, tabs, spaces, newlines)
  • Ability to include JavaScript and CSS files (new)
  • If any script fails and shows error you can add it to exclude list

Clean Options

Clean Options finds orphaned options (unused options) and allows you to remove them from the wp_options table. This can save you several KBs or MBs, helping to speed up your site load time.

Optimize DB

For some People running WordPress, the use of phpMyAdmin appears to be a risky thing. There’s just too many options. This plugin lets you do just one simple task: optimize the tables of your database, to reduce their overhead.

Digg Protector

The Digg Protector will protect your blog from suffering from the Digg effect. When writing a post, give the HTML image tags a “protect” attribute to protect them. This means that when visitors from Digg come, they will be shown the image in the “protect” attribute. Otherwise, if they are not from Digg, they will be shown the image given in the “src” attribute. A basic HTML knowledge is recommended to use this plugin.

WP HTTP Compression

This plugin allows your WordPress blog to output pages compressed in gzip format if a browser supports compression.

Best HTML5 Video & Audio Players and Tutorials for Video Blog (Vlogs)

There are lot of  WordPress Plugins build on HTML5 for video blogging and HTML5 based Plugins rapidly growing to represent videos online. Specially with the advancement of mobile technology like iPad, which don’t support Flash player, they can play videos with these HTML5 Video and audio players.   If the user have a  non-HTML5 browser, again these HTML5 video and audio plugins provide Flash or Silverlight fallback players option to run Video and audio streaming on WordPress powered Websites. If you don’t run video on your blog but you can improve WordPress blog With Flash and Video players. There are lots WordPress Themes with Video and audio players features on WordPress as a Video Portal.

HTML5 player is the excellent features in HTML5, which allows to embed video  and audio files without using  flash. In the Following list, you will find best HTML5 video and Audio players for Vlogs and other website that allow to embed video and audio streaming into web pages and ensure backwards compatibility.

HTML5 Video & Audio Players for WordPress


HTML5 Video Player WordPress Plugin

HTML5 Video Player WordPress Plugin includes 3 types of video players:

– Video Player With RightSide Playlist
– Video Player With Bottom Playlist
– Video Player Without Playlist

Live preview | Detail

 Video Gallery WordPress Plugin /w YouTube, Vimeo

responsive, localized, awesome, fully featured, fast. the most advanced stock video gallery in the world! now as a wordpress plugin!

Live preview | Detail

MediaElement.js – HTML5 Video & Audio Player

Video and audio plugin for WordPress built on the MediaElement.js HTML5 media player library. Provides Flash or Silverlight fallback players for non-HTML5 browsers. Supports iPhone, iPad, and Andriod. Supports MP4, OGG, WebM, WMV, MP3, WAV, WMA files as well as captions with WebSRT files.

Check out mediaElementjs.com for more information and examples.

Detail

Vidplanet WordPress Video Sharing Plugin

This plugin can create a comprehensive amount of video playlist and video gallery with full custom controls of shortcode.

Key features are :

  • Create and manage unlimited numbers of playlists.
  • Add any and unlimited numbers of videos to a playlist.
  • Videos can be added by certain video id of youtube
  • Videos can be added by searching youtube instantly.
  • Lot’s of themes and plugins are integrated to watch a video playlist in style.
  • Create and manage unlimited numbers of video gallery.

Live preview | Detail

Projekktor Video Tag Extension

This plugins adds easy to learn shortcodes allowing you to embed a HTML5 based audio and video player into your blog posts with ease. The player features:

  • Six premium player themes
  • automatic Flash fallback
  • custom Logo Overlay
  • Youtube support
  • Social features (embedding, post to Twitter and Facebook)

Please visit www.projekktor.com/docs/wp for more detailed instructions.

Detail

YouTube Premium Videos Integration for WordPress

This Premium YouTube Plugin for WordPress enables you to integrate not only single YouTube videos into your blog posts and pages, but also full YouTube channels and featured YouTube videos (Most Popular videos, Most View videos etc) that you can filter by date (weekly, daily, all time etc).

Live preview | Detail

VideoJS – HTML5 Video Player for WordPress

A video plugin for WordPress built on the Video.js HTML5 video player library. Allows you to embed video in your post or page using HTML5 with Flash fallback support for non-HTML5 browsers.

View videojs.com for additional information.

Detail

External “Video for Everybody”

External “Video for Everybody” is a WordPress plugin that you can use to show videos on your WordPress site. You enter a simple shortcode on your page, and the plugin generates the HTML to deliver the media. Browsers that understand the HTML5 tag will display MPEG/H.264 (.mp4) files, VP8/webm (.webm), or Ogg/Theora (.ogv) files. Other browsers can use Flash to play the .mp4. In all cases, the markup includes links to download the media files. The HTML comes with only minor variations straight from the Video for Everybody model. See that site for fuller details.

Users can optionally use the VideoJS JavaScript library to outfit their videos with an attractive set of controls that includes a full screen option.

This plugin is not for everybody, even if the video tries to be. If I were not writing my own plugin, I would probably be using the Degradable HTML5 audio and video Plugin by Pavel Soukenik.

Detail

Vimeo Video Player WordPress Plugin with Playlist

This wordpress plugin will help you administrate the entire video player using a very friendly interface. You’ll be able to customize the player look & feel, playlist and CSS file.

Live preview | Detail

Video Player WordPress Plugin – YouTube/FLV/H264

This wordpress plugin will help you administrate the entire video player using a very friendly interface. You’ll be able to customize the player look & feel, playlist and CSS file.

Live preview | Detail

HTML5 and Flash Video Player

The html5 and flash video plugin for WordPress allows the addition of video (and other media) to a WordPress website, now you can also watch videos in your iPad or iPod. A full options menu is available with post-level overrides for endless customization. Installation is quick and easy, and no additional setup/coding/php knowledge is required. This plugin is low footprint, creating no tables, and uninstalling cleanly. Provides full support for Html5 Video, skinning the player, integration with Google Analytics, and the capability to display ads from LongTail Solutions.

Detail

Degradable HTML5 Audio and Video

Embed video and audio on your website using shortcodes. The plugin enables HTML5 native playback for users with compatible browsers while offering an elegant degradation to other users through very lightweight Flash players. For HTML5 playback, it auto-detects and offers different alternatives, or degrades to Flash, and (failing even that) to download links.

Typical usage is simply 

Detail | Degradable html5 audio and video plugin

The Wall – Media Gallery – WordPress Plugin

“The Wall” is the ultimate interactive media gallery for your site presentation. Now for WordPress!

The Wall – Features

  • neat effects for your presentations
  • powered by cross-browser js library jQuery
  • works with all media, not only images- inline content, videos, audios, divs with text -all are supported
  • lightbox support
  • DZS Admin Panel included

Live preview | Detail

WordPress Media

WordPress Media 1.3.1 allows the addition of an HTML 5 audio and/or video player to your theme. It requires PHP 5 .1 or higher. The player is an instance of the popular and stable jPlayer by Happyworm and can be inserted into posts via a shortcode, sidebar areas via a widget, or anywhere in your theme via a template tag. Multiple instances of the player on one page is supported.

Live preview | Detail

YouTube Pro

YouTube Pro is a great new plugin for WordPress 3.0! Upload, edit and delete your movies without leaving you blog! And that’s not all! You can change the appearance of your player.

Live preview | Detail

MyMedia for WordPress

WordPress plugin for adding metadata of multimedia items to your blog.
MyMedia is useful when you want to effortlessly:

  • import YouTube videos into your blog
  • catalog your movie collection using metadata from IMDb
  • catalog your music collection using metadata from Last.FM

If one of these apply, stop looking, MyMedia for WordPress has got you covered.

Live preview | Detail

Universal Video

Embed HTML5 video and on your website using shortcodes. The plugin enables HTML5 native playback for users with compatible browsers while offering a simple degradation to other users through the use of the Flowplayer flash player.

Detail

WP YouTube Lyte

WP YouTube Lyte allows you to “lazy load” your video’s, by inserting “Lite YouTube Embeds”. These look and feel like normal embedded YouTube, but only call the actual “fat” Flash or HTML5-player when clicked on, thereby reducing download size & rendering time substantially when embedding YouTube occasionally and improving page performance dramatically when you’ve got multiple YouTube video’s on one and the same page.

Detail

FlasHTML5 Video

A WordPress implementation of the FlasHTML5 Video Javascript Library featuring HTML5 / Flash Video with Mobile Fallback.

Detail

WP Video Music Box

WP Video Music Box – WordPress Plugin is first wordpress floating music player in the world. A music search box an player with the button “music” that will floating on the left of the web page. If the button click, the form will appear with slide effect. The form is using AJAX , so the page wont be reloaded.

Live preview | Detail

WordPress Videos Embedder PRO

The plugins adds automatically a button to WordPress’s default editor (Tinymce) that you can use directly from the post/ page editor or you can just use the shortcode.

Live preview | Detail

Others HTML5 Media Players


Following are the other excellent Media Players and this chart represent and compare the  features of different HTML5 video players.

  1. Acorn Media Player, Accessible and customizable HTML5 media player
  2. Akamai’s Open Video Player for HTML5 <video>
  3. Building a better HTML5 video player with Glow
  4. CwVideo – A Toolkit to handle HTML 5 video made with mootools
  5. Dplayer – the ultimate HTML5 video player
  6. FlareVideo – HTML5 video with Flash fallback
  7. FlasHTML5 Video: The JavaScript Library and WordPress Plugin
  8. FryPlayer– HTML5 Video Player
  9. HTML5 Media Player (Beta)
  10. HTML5 Video Player
  11. HTML5 video player
  12. Html5-video – Videoplayer in HTML5
  13. html5media – Enables <video> and <audio> tags in all major browsers.
  14. jMediaelement – not only just another html5 audio / video player
  15. jPlayer : HTML5 Audio & Video for jQuery
  16. jquery-video –jQuery UI video widget to enhance your HTML5 <video>
  17. JW Player for Flash & HTML5
  18. Kaltura HTML5 Video & Media JavaScript Library
  19. LeanBack Player – HTML5 Video Player with Subtitle-Support
  20. MediaElement.js – HTML5 video player and audio player with Flash and Silverlight shims
  21. Miro 3.5 – An amazing open-source, non-profit video player.
  22. MooPlay- HTML5 Video Player
  23. MooVES 1.0 – The MooTools Video Enhancement System
  24. Moovie
  25. OIPlayer jQuery plugin HTML5 audio and video player with fallback to Java and Flash
  26. Open Standard Media (OSM) Player
  27. Open Video Player for HTML5 <video>
  28. open-player – Cross-browser player for <video> and <audio>
  29. Player Uppod HTML5 video and audio
  30. Projekktor – HTML5 video player
  31. SublimeVideo HTML5 Video Player
  32. Video for Everybody!
  33. VideoJS – a free & open source HTML5 video player
  34. Vimeo HTML5 Video Player
  35. YouTube HTML5 VideoPlayer

HTML5 Audio Players


Accessible Audio Player (AAP) – Cross-Browser HTML5 Audio Player

AAP is an audio player that uses the HTML5 <audio> element for browsers that support it, and the Yahoo! Media Player for those that don’t. It’s available in a standalone version or (with an additional P) as a WordPress plugin called Accessible Audio Player Plugin (AAPP).

An HTML5 <audio> radio player

Previous to HTML5 coming on the scene, it was a fairly awkward task to add audio to web pages. For many years, Flash was the only way to provide audio in any kind of interactive way – but with the introduction of the <audio>element in HTML5, audio playback can now be done natively. It plays nicely with other open standards — you can create custom buttons using CSS and HTML, and give them appropriate functionality using the HTML5 audio API. It is nice not having to go back into Flash every time you want to make some changes to the audio content.

audio.js – Add HTML5’s audio Tag Anywhere

audio.js is a drop-in javascript library that allows HTML5’s <audio> tag to be used anywhere. It uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css.

Scott Andrew’s HTML5 audio player

This player is very minimalist but works well. Great to use when you do not need playlists or any fancy effects!

Speakker: Crossbrowser Audio solution featuring HTML5

Comes out of the box in two variations and with incredible options of customization: Flexible dimensions, unlimited colors
and two different button sets for light and dark themes. Easy to set up. Just a few lines of Javascript and a quantum CSS.

Featuring the technology of Projekktor it comes with cross-browser compability, Flash-fall back plus optional
social- and artists information links.

MooTools HTML5 Audio Player

Made with HTML5 and the Mootools JavaScript framework. The player works perfectly on all recent browsers.

Universal HTML5 Audio Player

This player is the only one from the list which isn’t free. But it’s cheap ($5 only!) and works well. It have lots of useful features, such as a way to protect your audio from being hijacked by using a beep overlay, which is a great solution for commercial uses.

SoundManager 2

Using HTML5 and Flash, SoundManager 2 provides reliable cross-platform audio under a single lightweight (10 kb) JavaScript API.
Want to see what you can do with Sound Manager 2? Then visit http://wheelsofsteel.net/ for an awesome demo!

The jQuery HTML5 Audio / Video Library

jPlayer is the completely free and open source (GPL/MIT) media library written in JavaScript. AjQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer’s comprehensive API allows you to create innovative media solutions while support and encouragement is provided by jPlayer’s active and growing community.

HTML5 Audio Player Bookmarklet

Adds audio player to play linked audio files on any page. Supported file formats depend on the browser used. Use it on any page which has links to downloadable audio files, for example, you can  play music stored in your Dropbox – visit dropbox.com/m then navigate to folder with music files and use this bookmarklet.

ZEN – a single-song HTML5 Audio Player

HTML5 <video> Tutorials


Learn Flash To HTML5 Video Fallback

Learn how to provide an HTML5 fallback option for devices that don’t support the Flash Player. Tutorial Link:gotoandlearn

Simple HTML5 video player with Flash fallback and custom controls

Want to put video onto your web page? HTML5 enables us to do this as easily as placing images with an <img>element – and in this tutorial, we’ll show you how the magic is done.

HTML5 Video Facts & Fiction: New Whitepaper

This whitepaper cover everything you need to know about the current and future state of one of the most important emerging standards for cross-platform online video delivery, HTML5.

The State of Video on the Web

Developers all over the world recognized the gaping hole that Flash exposed in the HTML specification and devised the HTML5 spec to fill in the void. The web needed a first class citizen for video, much like images, that browsers could play natively –without having to rely on a plugin, be it Flash, Silverlight, Quicktime, or something else.

Cross-Browser HTML5 Video With Flash or Silverlight Fall-back

Until recently, playing video files in a web page was notoriously complicated. The user requires a Flash or Silverlight plug-in and even the simplest HTML is a confusing mess.

Getting Started with HTML5 Video

HTML5 Video. It just sounds sexy. Even typing it stirs an excitement inside me usually reserved for theme park rides and new episodes of Family Guy. It’s one of the most lauded features within the new HTML spec, and also one of the most divisive.

How to Include Video in HTML5

There are no restrictions on the video codec, audio codec, or container format you can use for your video. One <video>element can link to multiple video files, and the browser will choose the first video file it can actually play. It is up to you to know which browsers support which containers and codecs.

How to Build a Custom HTML5 Video Player with jQuery

As professional web designers, we want to create a video player that looks consistent across browsers. Each browser however provides its own different look and feel for the player, from the minimal approach of Firefox and Chrome, to the more shiny controls of Opera and Safari. If we want our controls to look the same across all browsers, and integrate with our own design, we’ll have to create our own controls from scratch. This is not as hard as it seems.

How to Building a custom HTML5 video player with CSS3 and jQuery

Opera Developer Community is sharing articles “Building a custom HTML5 video player with CSS3 and jQuery“. This is the first of a series in which we will look at building up an easily customizable HTML5 <video>  player, including packaging it as a simple
jQuery plugin, choosing control types and outputting custom CSS for your own situation.

How to Create an HTML5 Video Player

There is a lot of HTML5 Video player out there, but how about creating  HTML5 Video Player your self?.  Steveheffernan has writen tutorial  How to Create an HTML5 Video Player It’s meant to give you a basic understanding of the different options you have with the new video tag in HTML5, and the javascript needed to create some of the typicalvideo controls you’d find in other players.

Embed Videos In Your Web Pages Using HTML5

Not only has a very public (and contentious) debate unfolded on the web about the efficacy of presenting videos using HTML5 instead of Flash, but momentum is gathering behind the nascent web standard.

Quick Tip: HTML5 Video with a Fallback to Flash

This article will review how to work with HTML 5 video in your own projects. Because older browsers and Internet Explorer do not understand the <video> element, we must also find a way to serve a Flash file to viewers who are utilizing those browsers.

Detecting browser compatibility for HTML5 video and audio

Different browsers offer different levels of support for HTML5 audio and video. Where some browsers support one type of media file other browsers will fail to do so. While browser vendors continue to implement HTML5 features support should get better and better. However, the situation at the time of writing dictates that we cannot (and certainly should not) assume that a browser will play HTML5 media

Lazy Loading Video To Speed Up Your Web Page

When you have a web page containing a video that will not be played until clicked, you can speedup page loading by applying this quick tip which you may have seen on Facebook.

Making a Custom YouTube Video Player With YouTube’s APIs

Video presentations are a great addition to any product page. With a presentation you can showcase your product’s features without making the visitor read through long paragraphs of text. But apart from producing the video, you still need to manually convert it and find (or code) some sort of flash player that will display it on your site.

HTML5 <audio> Tutorials


How to Building a Custom HTML5 Audio Player with jQuery

Neutroncreations recently built an HTML5 audio player for Tim Van Damme‘s The Box, a new podcast where he interviews people who make cool stuff. Tim wanted an HTML5 audio player on the site, and they put together some jQuery to hook up the player interface he designed. Neutroncreations is sharing tutorial How to Building a Custom HTML5 Audio Player with jQuery through the code to explain how it works, covering a few caveats along the way.?

Building a Custom HTML5 Audio Player with jQuery

They have built an HTML5 audio player for Tim Van Damme‘s The Box, a new podcast where he interviews people who make cool stuff. Tim wanted an HTML5 audio player on the site, and we put together some jQuery to hook up the player interface he designed. In this article we’ll run through the code to explain how it works, covering a few caveats along the way.

Other useful Resources and References

11 Efficient HTML5 Video Players
HTML5 Video Tools
10 Best HTML5 Video Player
HTML5 & CSS3-Powered Audio Player – ZEN
HTML5 And Javascript Audio Interface: JAI
MooPlay – Build Your Own Custom HTML5 Video Player
HTML5 video players
Getting Started with HTML5 Video Players: Resources and Tutorials
HTML5 Video Player With Subtitle-Support – LeanBack Player
20 Excellent HTML5 Video Players
MooVES – MooTools Video Enhancement System
10 Amazing HTML5 Media Player Implementations (Inspiration)
5 Interesting HTML5 Video (Media) Players Implementation Across the Web
Adobe announces the HTML5 Video Player widget
Open Standard Media (OSM) Player – All-in-one Media Player For Web
23+ Useful HTML5 Open Source Online Video Players & Libraries
MediaElement.js – HTML5 Video Player
Moovie – MooTools HTML5 Video Player
A Collection of 20 HTML5 Video Players
10 HTML5 Video Players
10 Free Open Source Web Based Media Player Apps
5 Open Source HTML5 Video Players for Web Developers
7 Most Useful HTML5 Video Integrating Tools
Fresh Resources for HTML5 Video and Audio
HTML5 Video Player With Flash Fallback: FlareVideo
Best HTML5 Media Player Implementations
5 Tools For Integrating HTML5 Video in Your Website
YouTube Chromeless Video Player – jQuery Plugin
Review: Flowplayer
HTML5 video Libraries, Toolkits and Players
HTML5 Video Player
HTML5 Media Element API

Adding Custom Navigation Menus in WordPress Themes

Custom-Navigation-Menus-WordPress-Themes

The navigation bar is a very important part of  any website to attract the visitors. Some WordPress themes have very simple navigation bar, so there is a need to make to according to customer requirements which look good with the website design. Customization of  ready made  themes become very difficult if they have used function to control the Navigation bar. But Some themes like U-Design WordPress Theme with complicated structure give you very simple way to customize the whole theme design.

As well you can control the design with WordPress plugins and can design your own HTML and CSS based navigation bar, for that giving you some practices and suggestions along with useful references.

If you are using Thesis Theme, than you must watch this Video tutorial, in which they explained how to set up menu, and how to create a new design and control new menus.


Navigation Menu was introduced in WordPress Version 3.0 and in a new WordPress Version 3.4  you can  utilize these great features to customise the navigation menus into any theme. All you have to add few code segments in your theme. Following are the available function references to Register Navigation Menu:

 And Follow are the Functions to Show Navigation Menu:

How to Add New Register Menus

First of all add add following code segment into Theme’s function.php file to register a name of Menu:

function register_my_menus() {
  register_nav_menus(
    array( 'header-menu' => __( 'Header Menu' ) )
  );
}
add_action( 'init', 'register_my_menus' );

And  to appear two menu options add following code segment , header menu and extra menu –

function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' ); [Source]

This means that you can create multiple menues and can add existing Catergories or  pages to the created Menu through Appearrance >> Menu Option, as well you can add custom links to the created menu with simple drag and drop option under Menu settings:

You can create multiple menus, add existing categories or pages to the menu, and you can add custom links to menu as well. You can organize the menus and create drop-down menus with a simple drag-and-drop feature.

How to Display Menus on Theme

After creating custom menu, now you want to add created menu into your theme. First you have to decide where you want to display your menu, normally n a header area (above or bellow the logo). So add the following code in the header.php file where you want to display it, but it not limited to header file, you can add where you want to display your menu:

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

or

<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>

or

wp_nav_menu( array( 'theme_location' => 'extra-menu', 'container_class' => 'my_extra_menu_class' ) );

Just make sure that the theme_location points to the name  of  menu in the functions.php file.  In the 2nd example (Source), the main function is  wp_nav_menu, sort _column is used to order you pick in the options panel and container_class is the CSS style for created menu.

Design a Navigation Bar

Its all depends on your design, To understand the basic structure about illustration and design by using HTML and CSS in the different ways follow the following links:

WordPress navigation bar 1119
Top 5 WordPress navigation menu tutorials
How to make categories drop down menu
Simple navigation bar with css and xhtml
Goodbye headaches hello menus
Sliding doors WordPress navigation css technique
Best practices to design a perfect html navigation bar
Creating two tiered conditional navigation in WordPress
Simple glossy navigation bar design in photoshop

I have design the U-Design WordPress theme, if you want to add navigation bar in a header file,  create a style for navigation bar in style.css file and there is a  file custom_style.php in  a folder “u-design\styles\custom\”. Open this file and change the #navigation-menu  setting according to your own requirements.

WordPress Menu Plugins For Better Navigation


WordPress Plugins  provide a new and improved functionality to you Website, and For Navigation design there are lots of useful plugins which you can use in different situations. There are mainly two ways to use WordPress Plugins for Navigation bar, first to  design and improve the Front end navigation and second, how to manage  the Navigation bar.

WordPress Menu Plugin to improve Front end navigation

You can create and customize your theme by creating primary menu anywhere in your theme like in header or footer. As well if you are creating Content Management System style website, these WordPress plugins help a lot customize the sidebar.

UberMenu – WordPress Mega Menu Plugin

UberMenu is a user-friendly, highly customizable, responsive Mega Menu WordPress plugin. It works out of the box with the WordPress 3 Menu System, making it simple to get started but powerful enough to create highly customized and creative mega menu configurations.

Menu Management Enhancer for WordPress

Live preview | Detail

CSS3 Mega Menu WordPress Plugin

This CSS3 Mega Menu WordPress Plugin will help you to create easily your own “Mega Menus” with WordPress. It doesn’t use any javascript and relies only on CSS .

Adding a menu to your WordPress site can be done by either using the built-in functions directly in your theme files or by using the Mega Menu Widget and adding them to the preedefined widgetized areas. This item comes with 9 color variants and 2 drop down themes (light and dark) with a documentation to help you to start quickly.

Live preview | Detail

WP Sticky Menu Plugin

Sticky Menu Plugin has it’s own option panel from where you can select your styles, the alignment of the menu (Top or Bottom), the width of the menu (980px or Full Width). You can also select the animation effect for the sliding out and in of the menu.

Live preview | Detail

PBK Mega Menu for WordPress

PBK Mega Menu Plugin for WordPress is your easy way to add a functional and customizable Mega Menu to your WordPress website. Adding menu items and content is just like adding posts or pages… If you know how to use WordPress, then you already know how to use the Mega Menu plugin.

Live preview | Detail

CSS3 Sticky Footer Menu For WordPress

This CSS3 Sticky Footer Menu For WordPress will help you to create easily your own Sticky Footer with WordPress. It doesn’t use any javascript and relies only on CSS. Wordpress shortcodes and CSS classes allow you to create lists, paragraphs with (or without) images or make your menu items stick to the left or the right side.

Live preview | Detail

Fading Menu with Notification Bar and Social Icons

Fading Menu with notification Bar is a WordPress Plugin that will allow you to add your navigational menu (main menu or custom menu defined by you) along with notification bar at the top of your browser. Simply scroll down your browser a bit to see it in live action!

Live preview | Detail

niceMenu – WordPress Plugin

You can navigate on multiple levels very easy! Just a few clicks & the menu is installed on your wordpress website. It’s easy to position anywhere, as a widget sidebar. You can put custom links, website pages & categories.

Live preview | Detail

Sticklr WP – Sticky Side Panel WordPress Plugin

Stickr WP, a sticky side panel menu WordPress plugin. Inspired by Envato site-switcher, after released as CSS3 +jQuery, due to popular demand I decided to create this WordPress plugin version. The features are similar with jQuery version, only WordPress version has an intuitively easy administration panel, so you don’t have to know the coding behind it.

Live preview | Detail

Advanced Menu Widget

This plugin adds enhanced “Navigation Menu” widget. It offers many options which could be set to customize the output of the custom menu through the widget.

Features include:

  • Custom hierarchy – “Only related sub-items” or “Only strictly related sub-items”.
  • Starting depth and maximum level to display + flat display.
  • Display all menu items starting with the selected one.
  • Display only direct path to current element or only children of selected item (option to include the parent item).
  • Custom class for a widget block.
  • And almost all the parameters for the wp_nav_menu function.

Detail

SLMenuWidget

SLMenuWidget is a plug-in for WordPress. It provides an easy to use submenu widget that can be used for WordPress themes which doesn’t deal with sub pages. It renders nothing if the current page does not have sub pages. If you have any questions or if you need more information, please visit www.steffen-liersch.de/wordpress

Detail

Dropdown Menu Widget

Dropdown Menu widget adds a beautiful, CSS only dropdown menu, listing pages, categories of your blog. You can also turn your wordpress navigation menu into a beatiful dropdown menu using this plugin. It allows you to chose vertical or horizontal layout. It supports multiple instances. You can select a theme for your widget from the Dropdown Menu Settings page or you can CREATE YOUR OWN THEME WITHIN SAME PLUGIN!! You can also customize your dropdown menu using CSS. If you want a custom dropdown theme you can request one. Please visit plugin site for more information.

Detail

PixoPoint Menu Plugin

Adds an SEO friendly, accessible regular or dropdown menu to your WordPress blog. Visit the PixoPoint Menu Plugin page for more information about the plugin.

Features

  • Control content will be displayed in the menu
  • Easy to use interface for modifying the design
  • Animation drodpown menus
  • Up to two menus
  • Plus much more

Detail 

AllWebMenus WordPress Menu

The AllWebMenus WordPress Menu add-in & plugin combination is designed to retrieve information from your blog (such as posts, pages, etc.) and import it into the AllWebMenus application to create stylish, feature-rich navigation menus, and not only! Apart from creating menu items derived from your blog’s structure, fully customize your menus adding your own non-wordpress menu items with external or internal links, html-rich content, colors, borders, effects, designs of your choice and many more!

Detail

CMS Navigation

Our new plugin, WPML, includes the functionality of CMS Navigation and is recommended for new designs. It features much cleaner and simpler HTML and customization via the admin screen. Additionally, we recommend you checkout our new CMS enabling plugins Types andViews.

With Types and Fields, you can achieve the functionality of this plugin yourself and customize it in whatever way you like.

Detail

Multi-level Navigation Plugin

Adds an SEO friendly, accessible dropdown/flyout/slider menu to your WordPress blog. Visit the Multi-level Navigation Plugin page for more information about the plugin. Paid premium support for this plugin is available via the PixoPoint Premium Support service.

Detail 

Navigation Menu Widget

This is an advance widget that gives you total control over the output of your menus. Support multiwidget, resizeable page featured image, easy to customize and full features. Displays a list of menu as links. This widget is based on the WordPress function: wp_nav_menu()

Detail

Mashable Menu for WordPress

This is a WordPress version of Mashable Menu – Pure css (Redesigned) .

Features:

  • you can add 15 category and 7 subcategory !
  • Easy To Setup & Customize
  • CSS3 Effects;
  • JS jQuery

Detail

WordPress Menu Plugin for WordPress Menu management


Advanced Menu Manager System

Main feature about this application is the fact of using the nested set model hierarchical data structure instead of the old adjancy list. Nested set Modal is a much more robust and faster way of storing and retrieving hierarchical data on a database that strugles with relational calculus and relational algebra such as MySQL

Live preview | Detail

Menu Management Enhancer for WordPress

The WordPress 3 Menu Management System is excellent, but it can be a bit cumbersome if you’re managing many menu items. The Menu Management Enhancer for WordPress aims to improve the menu management user experience.

  • Manage large numbers of menu items with ease
  • Expand and collapse menu item trees
  • Quickly jump to any top level menu item
  • Enhanced drag & drop jump-to-item functionality
  • View menu item IDs
  • Child and descendant menu item counts at a glance

Live preview | Detail

Easy Menu Manager

Easy Menu Manager is an AJAX /PHP powered menu management system. You can add, edit, delete, and reorder menu items easily using this application.

Live preview | Detail

Gecka Submenu

Submenu enhances the WordPress 3.x navigation system. When you have a website based on WordPress with a lot of pages, but you need a custom menu, it can be tedious to have to add a menu entry for each page created. Submenu just does it automatically.

Detail

Admin Menu Tree Page View

Adds a CMS-like tree overview of all your pages and custom posts to WordPress – much like the view often found in a page-focused CMS. Within this tree you can edit pages, view pages, add pages, search pages, and drag and drop pages to rearrange the order.

CMS Tree Page View is a good alternative to plugins such as pageMash, WordPress Page Tree and My Page Order.

Detail

Admin Menu Tree Page View

This WordPress plugin adds all your pages to the admin menu, so all your pages will always be available within just one click, no matter where you are in the admin area. You can also add pages directly in the tree and you can quickly find your pages by using the search box.

Detail

WordPress Page Tree

Do you have a WordPress site with lots of pages in a hierarchical structure? Are you trying to use WordPress like a “real” CMS? Then this plugin is for you!

Page Tree gives you a much-needed overview of your pages in the admininstration panel using a common expand/collapse menu, which lets you navigate your page structure like a folder tree in Windows Explorer.

Detail

My Page Order

My Page Order allows you to set the order of pages through a drag and drop interface. The default method of setting the order page by page is extremely clumsy, especially with a large number of pages. The plugin also installs a replacement widget that exposes all the options of the wp_list_pages template function.

Detail

Obox Mobile – WordPress Mobile Plugin

Free & Professional WordPress Security Service Free & Professional WordPress Security Service

We Love WordPress. WordPress Arena is a place for WordPress Developers and Designers, providing Tips, tricks, tools and resources to build a website or blog on WordPress. We also present The WordPress Showcase for all kind of WordPress Powered Websites.


Copyright © 2014 WP Arena All Rights Reserved

Divi WordPress Theme