Posts Tagged ‘CSS’

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

How to adjust and fixed DIV columns Heights with jQuery Plugin and CSS

I was working eCommerce website, and there is a need to display four equal column in one row and the other four in a 2nd column. I tired with Equal height – javascriptEqual Height Columns with Cross-Browser CSS, these tutorials are very helpful but not full-fill my client requirements. So I  tried Faux Columns, which gave the perfect solution.  Faux Columns provide the very easy way to by Making DIVs, using the CSS “Float Left” property, all have uniform heights; automatically adjusting to match the tallest DIV in the row.

All you have to play with the design and one image that fit with your design. A tutorial by DAN CEDERHOLM explained step by step procedure. Here is my CSS lines which I  get after modification.  Due to my client, I am unable to   provide the link of this implementation but still you can get idea from my code.

/* ======= index page cat. display ===================*/
#wrapper {
margin: 0 auto;
width: 1110px;
}
.cat_a {
display:block;
color: #FFF!important;
background-image:url(‘cat-tab-bg.png’);
min-height:40px;
padding-top:10px;
padding-left:10px;

}
.cat_a:hover, .hov_sh:hover {
text-shadow:2px 2px 2px #661111;
text-decoration:none;
}

.cat_ico {
float:right;
position:relative;
top:-11px;
}

#faux {
background: url(‘cat-bg.png’);
margin-bottom: 5px;
overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
width: 100%
}

#leftcolumn {
display: inline;
width:264px;
padding:0px;
float:left;
margin: 0px 10px 10px 10px;
position:relative;
}
#leftmiddle {
display: inline;
padding: 0px;
width: 275px;
float: left;
margin: 0px 0px 0px 0px;
position:relative;

}
#rightmiddle {
display: inline;
width: 270px;
float: left;
margin-left:12px;
position:relative;

}
#rightcolumn {
display: inline;
position: relative;
padding: 0px;
width: 256px;
float: left;
margin-left: 13px;

}
.clear { clear: both; background: none; }

In case if you are not satisfied with above solution, here I am compiling a list of resources where you can get more infor about how to get Equal Height Columns with jQuery and CSS.

Tutorials: equal Height Columns with jQuery


Tutorials:How jQuery Works

A basic introduction to jQuery and the concepts that you need to know to use it.

Tutorial

Equal Height Columns with jQuery

This concept has been adapted into a full-fledged jQuery plugin. Check it out here. And then read on to learn how this technique is done.

Detail tutorial

jQuery equal height columns plugin

 If you are looking for a plugin which will calculate the heightest column and than assign that height to the rest of the panels than you should visit: Equal Height Columns with jQuery.

Detail Tutorial

Quick hits with the Flexible Box Model

I’d bet that you’ve done your fair share of styling elements to be arranged horizontally or vertically on a page. As of yet, though, CSS has lacked a suitable mechanism for this task. Enter the CSS3 Flexible Box Module, or Flexbox for short.

Detail Tutorial

Equal height – javascript

Many people have problems getting the heights of their divs the same length. There are good, valid, ways of doing this with only CSS. This isn’t one of them. This uses javascript to find out which div is the longest and then set the others to be the same length as that one.

Detail Tutorial

Making DIVs, using the CSS “Float Left” property, all have uniform heights;

Would you believe that was the best title I could come up with? Honestly, if you can think of a better one shoot me a line – I want to hear from you.

Okay, I’m a big fan of Fluid Design. I love to design websites/webapps that flow into the space available, from giant screened desktops to mobile phones, and always look like they were designed with exactly that screen size in mind.

Detail Tutorial

Elixon Fixheight

Creating equal height columns with CSS is not as easy as it may first seem. Elixon FixHeight is a solution that works in all common web browsers.

Detail Tutorial

jQuery: Boxes of Equal Height

Ever had parallel boxes on a website you’re developing, and wanted them to have the same height, but still wanting them to have dynamic height, i.e. not having to lock them to a certain height in the CSS? I certainly have, and it’s usually difficult. But jQuery provides a simple sollution!

Detail Tutorial 

Tutorials: equal Height Columns with CSS


Equal Height Columns with Cross-Browser CSS

Creating equal height columns with CSS is not as easy as it may first seem. This tutorial highlights the display problems that occur with multiple column layouts, and then shows a simple solution that works in all common web browsers. The method shown here is 100% CSS hack-free, image-free and JavaScript-free so it can even be used on the most strictly coded websites.

Detail Tutorial

Nesting sites expanding

Russian language article: he will give way to layout the sprawling site (and others, as it turned out, I do not know how to typeset), which use the last 2-3 years. This method is used for complex modular networks, it is easy to use, but difficult to understand and it has several drawbacks. In general, the information here useful and web designers, since the very model of the site must be properly prepared.

Detail Tutorial

Faux Columns by DAN CEDERHOLM

One of the somewhat frustrating properties of CSS is the fact that elements only stretch vertically as far as they need to. Meaning, if a 200-pixel tall image is contained within a<div>, the <div> will only expand down the page 200 pixels.

Detail Tutorial

Fluid Width Equal Height Columns

Equal height columns have been a need of web designers forever. If all the columns share the same background, equal height is irrelevant because you can set that background on a parent element. But if one or more columns need to have their own background, it becomes very important to the visual integrity of the design.

Detail Tutorial

Equal Height Blocks in Rows

There are plenty of solutions for equal height columns using jQuery (like this one by Rob Glazebrook). The basic idea is to measure all of their heights and then set all their heights to that of the tallest one.

Detail Tutorial

50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)

Although CSS is generally considered a simple and straightforward language, sometimes it requires creativity, skill and a bit of experimentation. The good news is that designers and developers worldwide often face similar problems and choose to share their insights and workarounds with the wider community.

Detail Tutorial

HOW TO: Create A Vertical Scrolling News Ticker on WordPress With jQuery Carousel

I had to design a Vertical Scrolling news ticker for my client. Initially,  I thought it’s hard to figure it out, but thanks to a tutorial ” Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite“.  I learnt from this tutorial along with other and  modified  the code and made it into something I wanted, hope this would help you too.

First thing first, how to Including jQuery in WordPress (The Right Way)? WordPress already includes a copy of jQuery. Here is how you can load up jQuery in your theme the smart (and intended) way. Put the following code in header.php file in the <head> section:

<?php wp_enqueue_script("jquery"); ?>  <?php wp_head(); ?> 

[Detail]

Other References:
How to Add JCarousel Lite to WordPress
How to Create a jQuery Carousel with WordPress

jCarousel Lite is tiny but powerful plugin and with it you can easily add/tweak/configure  News ticker part on your Website. After including jQuery Carousel into you WordPress theme, now need to create style and html code to run image gallery or News on your website. Follow these steps to  Create A Vertical Scrolling News Ticker on WordPress With jQuery Carousel.

Step 1


Create a new <div> in your style sheet, which should include container for the news ticker and style of the text and heading. As well, a very important <div> class name that must b same class name when you configure jCarousel Lite in your theme. In my case I have created “latestnews-jcarousellite”, as you can see bellow:

/* ======= Latest News ===================*/
#latest-news {
width:268px;
padding:0px 0px 8px;
float:right;
margin:0 !important;
min-height:100px;
}
#latest-news a { text-decoration:none; }
#latest-news .title {
text-align:center;
font-size:14px;
font-weight:bold;
padding:2px;
}
.latestnews-jcarousellite { width:100px; }
.latestnews-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:2px; }
.clear { clear: both; }

Step2


Create a News category and get its id number, hope you know how to get it, after creating some news post for created category, add a loop where you want to display News ticker. In my case i wanted to display it in side bare and  have added the following code in my theme sidebar:

<div id="latest-news">
<h2>Latest News </h2>
<p> Find out our latest orders, clients and customer feedback! </p>
<div id="latestnews-jcarousellite">
<ul>
<?php query_posts("showposts=5&cat=32"); $i = 1; ?>
<?php while (have_posts()) : the_post(); ?>
<li> <a class="title" rel="bookmark" href="<?php the_permalink() ?>"><?php the_title() ?></a></li>
<?php endwhile; ?>
</ul> </div>

Step 3


After adding loop’s posts  and configure the jCarousel. Under the<head> or  in sidebar.php file  add following price of script:

<script type="text/javascript">
jQuery(function() {
jQuery("#latestnews-jcarousellite").jCarouselLite({
vertical: true,
speed: 1000,
visible:5,
auto:500
});
});
</script>

Where visible number  must be equal to showposts number, <div id=”latestnews-jcarousellite”> must be same.  The “auto:500″ means it will auto-scroll every 500ms. There are a lot of options read the documentation for more information and configuration.

Other References about How to Create a jQuery Carousel with Website and WordPress Posts


From the list bellow you can create image gallery from carousel on WordPress posts from a specified category.

jQuery Carousel Gallery for WordPress
Making an infinite JQuery carousel
jQuery Infinite Carousel
How to Create an Infinite Carousel with jQuery
How To: Create A Jquery Carousel With WordPress Posts
Create a Simple Infinite Carousel with jQuery
How to install and style jcarousel lite
Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite
Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite
How can I degrade from Jquery carousel to css scrolling list gracefully
How to create simple and sleek jquery carousel gallery
HTML5 jQuery slider w/ Canvas and jQuery

Pre-made Carousel Plugins


By using these plugins you can create beautiful carousel image gallery for your visitors inspiration.

Boutique carousel

A ready to use jQuery slider/carousel to present your images in a unique, smooth and customizable way. Simply link to the JavaScript and CSS files and apply it to your HTML element like other jQuery plugins. Customize the settings and CSS to match your style and purpose. Full documentation and examples included.

Live preview | Detail

jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation) – Example.

jCarousel Lite

jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. jCarousel Lite is not a replacement for jCarousel; rather it is a light-weight (only 2kb) alternative for users whose primary focus is not to build a full-blown image gallery.

Agile Carousel

Agile Carousel is a JQuery plugin that lets you create a carousel with fexible settings.
New features in Beta 2.0 include:

Here’s an example with intro slide.

jQuery Carrousel

Moodular is a jQuery plugin which allows to create carousel/slider very easily. Moodular comes from the contraction of two words : mood & modular.
– Mood for many reasons, “in the mood – Glenn Miller”, …
– Modular because this plugin has some modules integrated (controls & effects).
It’s modular too, cause you can create your own controls & effects to perform your personal carousel.

jQuery Infinite Carousel Plugin

jQuery carousel plugin where small image thumbnails allow users to jump over to other images.

Features:

  • Carousel never ends and images shuffle around
  • Captions are optional
  • Optional thumbnail controls which allow visitors to jump to any image in the carousel sequence
  • Thumbnails can be styled via CSS
  • It’s less than 14K
  • Reusable on multiple containers within the same page

Step Carousel Viewer

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps.

Just Another Carousel

A jQuery content carousel that works with any size content and supports mouse input. Features:

  • Works in FF3, IE7, Opera, and Safari.
  • Supports fixed-size or variable-size children
  • Supports the Meta plugin for jQuery
  • Totally CSS-based allowing for high customization
  • Degrades gracefully into an unordered list

 jQuery Carousel

Great looking plugin with various types of use.

Roundabout

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!)

jQuery Banner Rotator / Slideshow

This is a jQuery banner rotator plugin featuring multiple transitions. The thumbnails and buttons allow for easy navigation of your banners/ads. The banner rotator is also re-sizable and configurable through the plugin’s parameters.

Live preview | Detail

AviaSlider – jQuery Slideshow

AviaSlider is a very flexible and easy to use Image slideshow plugin for jQuery with a set of really unique transitions that were nver available before, as well as some basic transitions, so the slider will fit into every project.

Live preview | Detail

Estro – jQuery Ken Burns & swipe effect slider

This jQuery plugin uses unobstrusive javascript to transform a block of simple HTML markup into a georgous elegant slider, which can be completely customized using HTML5 data attributes. The markup is valid HTML5 and SEO optimzied, with all content always being available to search engines. When using this plugin, your page layout will be consistent even if javascript has been disabled.

Live preview | Detail

 Sexy Slider

SexySlider is a JQuery plugin that lets you easily create powerful javascript Sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!
Live preview | Detail

Examples for Inspiration


There are huge list for inspiration and I will complie it in my next post along with pre-made WordPress themes with jQuery gallery. Subscribe to wparena’s email for update:

Rss Feeds    Twitter Followers   Email Updates

Best Online Generators for Designers & Developers

Online generator do a tremendous job for designers and developers if they want to solve some problem quickly and efficiently. As well, on the other hand web-generators make their life easier and save precious time. I have compile a list of the most useful online-generators for web-development and listed them below.

Color Generators


ColorBlender.com

ColorBlender is developed by Kim Jensen and It is a free online color matching toolbox.

Color Calculator

The free online Color Calculator is an interactive color wheel that helps designers select HTML, RGB, or CMYK colors, and identifies color harmonies and schemes.

ColorCombos.com

Web colour combinations tool and library, on this website you can Color Tester, Combo maker and very useful articles on ColorCombo’s Blog.

ColorMixers

This colorpicker from Color Mixers – Color BlenderColor MixerWeb Color Themes.

color palette creator v1.6

A color swatch generator which was inspired directly by the excellent Creating Color Palettes article by Andy Clarke.

Color Palette Generator

This is image base color generator, just enter the URL of an image to get a color palette that matches the image. This is useful for coming up with a website color palette that matches a key image a client wants to work with.

colr.org

It has two purposes:
1) It’s a tool to let people fiddle around with colors.
2) It’s a jungle gym for software ideas.

EasyRGB

This site provides information and services related to color technology. The first RGB and COLOR search engine on the Web!

Gradient Image Maker

Gradient images are used everywhere in web page design, ie, as the background of form buttons, DIVs, to act as shadows and other interesting visual effects etc. This is Web-based tool that makes a linear gradient image between any two colors.

Technicolor

Cameron Adams is one of the new breed. Automatic color palette generator with realtime preview and CSS generator.

php & MySQL generators


PHP Classes – Class: PHP MySQL class generator

The goal of this service is to build a base of programming components ready to be used in applications written in PHP. Generate classes to manipulate MySQL table rows

phpMyEdit – Instant MySQL Table Editor and PHP Code Generator

phpMyEdit generates PHP code for displaying/editing MySQL tables in HTML.

phpThumb()

phpThumb() uses the GD library to create thumbnails from images (JPEG, PNG, GIF, BMP, etc) on the fly.

PHP FormMail Generator

A tool to create ready-to-use web forms in a flash

POG – Php Object Generator (v1.6 rc2)

Php Object Generator, (POG) is a PHP code generator which automatically generates tested Object Oriented code that you can use for your PHP4/PHP5 application.

WWW SQL Designer

visualisiert Datenbanken und Strukturen

css generators


Clean CSS

CSS Formatter and Optimiser

CSS Button Generator

CSS Button & Text Field Generator

CSS Creator

The generator helps you create the structure of your website template using valid HTML and CSS.

CSS Font and Text Style Wizard

You can use this wizard to experiment with font and text styles and generate sample CSS style source code.

Online CSS Optimiser/Optimizer

This tool is used to optimise CSS code. All you have to enter either a URL or Copy & Paste the stylesheet into the box, and it will Optimize your Style Sheet.

CSS Formatter and Optimiser

Online Style Sheet optimizer.

CSS Form Code Maker

This HTML – CSS form generator will create a nice looking layout for forms. Create  ‘tableless’ layout for forms. And at the same time, add a ‘little color’ to the forms.

CSS Menu Generator

CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons

Format CSS Online

Automatically format your CSS (cascading style sheets) so they are easy to read and edit…..

Online CSS Optimizer

Online CSS Optimizer/Optimiser is a web tool for reducing the file size of cascading style sheets. In order to save more space optimized files would be messy even so you may output it as a file.

Cornershop

This page is for creating rounded corner graphics to use in your website design.

CSS Rounded Box Generator

Generates both the images and code you need for a rounded box.

Online CSS Scrollbar Color Changer

This tool will change the scroll-bar colors in an HTML page

CSS Tab Designer

CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required!

Free CSS Template Code Generator

This HTML – CSS template generator yields a three column layout without using any Tables. This HTML & CSS Style Sheet template generator outputs a full featured 3 column template. Resulting in an instant web page with a customized template that can be used to control the look n feel of an entire site.

HTML and CSS Table Border Style Wizard

You can use this wizard to experiment with table border styles and generate style source code.

Listamatic

one list, many options – Using CSS and a simple list to create radically different list

Listamatic2

It provide nested list options

List-O-Matic

List-O-Matic is a tool that makes the process of creating list-based, CSS-styled navigation just that little bit easier. Try it…

S5Easy: Create S5 Slideshows Easy Online

By using this tool you can Create slideshow in only 3 steps.

Scriptomizers

A CSS stylesheet web-generator

The Generator Form v2.90

CSS Source Ordered Variable Border 1-3 Columned Form Maker

ascii generators


ASCII Artist

This little program converts your picture to ASCII text art – a jumble of letters, numbers and symbols that do not appear to have any significance until you step back and look at the whole picture. It has no practical purpose, other than the neat factor.

ASCII G+enerator

Web-Generate to create a ASCII graphic from a word or text. Over 130 fonts.

ASCII-O-Matic

One of my favorite web application that can convert an image into ASCII Art dynamically

email generators


Advanced Email Link Generator

The “Advanced Email Link Generator with Anti-Spam Encoder” will generate mailto: links you can copy and paste into your web pages and emails.

E-Mail Icon Generator

For GMail, Hotmail, MSN, Yahoo!, AOL and many more!

Email Riddler

Email Riddler is an online tool that encrypts and transform your email address into a series of numbers when displaying it, making it virtually impossible for spam harvesters to crawl and add your email to their list.

NeedASig

This web-generator will create Email and Forum Signature Icon.

favicon generators


A Tutorial:

How to Add favicon into WordPress Blog and Website

Favicon Generator

You can make Free Favicons  with this tool – Create a Favicon.ico Design

FavIcon Generator (beta)

Use this online tool to easily create a favicon (favorites icon) for your site. A favicon is a small, 16×16 image that is shown inside the browser’s location bar and bookmark menu when your site is called up. It is a good way to brand your site and increase it’s prominence in your visitor’s bookmark menu.

FavIcon from Pics

Now it’s easy to create icons and marquees for your web pages with FavIcon from Pics. Simply select a picture, logo or other graphic (of any size/resolution) for the “Source Image” and it will create your icon.

Favicon.ico Maker

Upload a 16 x 16 pixel PNG and click ‘Faviconify!’ to create a favicon for your website. This favicon maker supports alpha transparency.

Flash generators


Flash Buttons Menu Generator

Easy and fast to create website menus ! Instantly add your text and links to any of the animated buttons. A webmaster tool that will add both functionality and flavor to your site.

FLASH EMBEDDER

This tool will let you easily embed flash movies into HTML. This could also be done using the Publish option in the Flash program.

form generators


Accessible Form Builder

This tool will generate XHTML-compliant accessible forms quicky and easily.

Contact Form Generator

The free Website Contact Form Generator utility enables you to create form-to-email scripts for your ASP, PHP or Perl web site with no programming skills needed. Optionally you can have the facility to save the results to a database and for users to upload a file. Results can be saved to a MySQL or MSSQL database, or saved as CSV.

CSS Form Code Maker

This HTML – CSS form generator will create a nice looking layout for forms. You can make ‘tableless’ layout for forms. And at the same time, add a ‘little color’ to the forms.

FormLogix

FormLogix is an online FREE form builder tool for creating web databases and web forms.

JotForm

This is Web Based WYSIWYG Form Builder.

PHP FormMail Generator

A tool to create ready-to-use web forms in a minutes. It’s Easy + Quick + Free.

Wufoo

HTML form builder helps you create contact forms, online surveys, and invitations so you can collect the data, registrations and online payments you need without writing a single line of code.

Web Form Factory

This is an Open Source Web Form Generator.

Graphics & Image Generators


Ajaxload

Create easily your own ajax loader icon.

Button Maker :: Adam Kalsey

Pick some colors, enter some text, and you’ll get a button you can download for your site.

Brilliant Button Maker by LucaZappa.com

A web application to create customizable 80×15 brilliant buttons

PHP/SWF Charts

is a simple, yet powerful PHP tool to create attractive web charts and graphs from dynamic data.

XML/SWF Charts

XML/SWF Charts is a simple, yet powerful tool to create attractive charts and graphs from XML data. Create an XML source to describe a chart, then pass it to this tool’s flash file to generate the chart. The XML source can be prepared manually, or generated dynamically using any scripting language (PHP, ASP, CFML, Perl, etc.)

ACME Label Maker

With this toll you can Make a label online!

Create A Graph

Create Graphs and Charts with with web tool.

Cool Text (Logo Generator)

Cool Text is a FREE graphics generator for web pages and anywhere else you need an impressive logo without a lot of design work.  Simply choose what kind of image you would like. Then fill out a form and you’ll have your own custom image created on the fly.

Online SiGGy Maker

These are the so called User bars :) , you can use them as your email or forum signature, it also helps in hiding ID’s from spambots.

phpThumb()

phpThumb() uses the GD library to create thumbnails from images (JPEG, PNG, GIF, BMP, etc) on the fly.

PixelButton

PixelButton is an Antipixel online generator, easy and fast to use. This little buttons created by Jeremy Hedley, become larged used expecially among bloggers, because they are nice looking, very visible and it’s easy to place theme inside a site layout. It makes possible to create buttons without the need of programs like Photoshop. The button is generated with the desired text and colors and it is converted into an HTML code with inline image, not requiring to be uploaded on the server.

Portrait Avatar Maker

Best ‘n’ Free Avatar Generater ! Available for blogs and SNS ! But Unmeasurable about the Combinations of parts.

Portrait Illustration Maker

Your free online Illustrator maker and let’s make an original icon!

RSS Button Generator

A RSS Button is a small image banner/badge/button/label/sticker (80 pixels wide x 15 pixels high) that has been adapted by the blogging world in order to keep blogs neat and consistant.

Sparklines

You can start right away by dynamically creating a sparkline using the Sparkline Generator Web Application. Sparklines, as defined by Tufte, are intense, simple, word-sized graphics. Kind of like this:  .

StripGenerator

With this wonderful tool you can make your own cartoon online.

Texture Maker

The application can create procedural and hand painted textures from scratch, remove visible seams from existing images, crop textures from photos by applying a perspective correction, render seamless tiles from structure sample patches, combine existing textures and heightmaps with realistic illumination and much more.

Thumbnail Generator

This is the source code file with it you can process thumbnails from a large amount of images

Tile Machine 1.0

Excellent web generator for designing graphic tiles.

Typogenerator

A so-called typo poster is an image consisting of text and background images – not necessarily being readable, but looking nice. typogenerator is a tool to create typo posters automatically.

Wallpaper Generator

Make free Desktop Wallpapers

Web Album Generator 1.8

With this application you can create Online Photo Albums

htaccess generators


Htaccess Disable Hotlinking Code Generator

If people are ‘hotlinking’ to your image files, they are using your bandwidth which you will ultimately pay for. You can stop this from happening by placing a ‘.htaccess’ file in the folder where your images are stored.

.htaccess File Generator

This is an Apache htaccess file generator.

.htaccess Generator

This .htaccess generator – will generate the files you need (.htaccess and .htpasswd) to password protect a directory of your website.

.htaccess Generator

The .htaccess is a simple method that allows you to customise the way the webserver works on a per directory basis. With this application Create Encrypted Passwords in seconds.

mod_rewrite RewriteRule Generator

Their mod_rewrite RewriteRule generator will take a dynamic url given to it, and generate the correct syntax to place in a .htaccess file to allow the url to be rewritten in a spiderable format.

URL Rewrite (mod_rewrite)

With the URL Rewrite Tool you can generate dynamic urls to search engine friendly urls. For search engine friendly (rewrited) urls you need the rights to put a .htaccess file on your webspace and you need e.g. the Apache Webserver module mod_rewrite.

metatag generators


META builder

This form will generate HTML META tags suitable for inclusion in your HTML document. These tags allow better indexing by robot-driven search engines.

Title & Meta Tags Generator

Making web design easy. Create your sites meta tags instantly to help achieve higher search engine ranking. Includes title tag, description, abstract, keyword, and robot meta tags. You can read theMeta Tag Description page for an explaination of the meta tags created by our meta tag generator.

META Tag Generator

Fast track creating your META tags with our advanced META tag generator. Just select the META tags you would like and let our META tag generator spit out the code for you

META Tag Generator

Here‘s an easy to way to generate your META tags. Fill in the form and hit ‘submit‘

password generators


Free Password Generator

Fill out the form, click ‘Generate’, and you will get your own unique password instantly generated.

hashapass

Hashapass automatically generates strong passwords from a master password and a parameter.

Perfect Passwords

Generates a unique set of custom, high quality, cryptographic-strength password

Phonetic Password Generator

It was originally designed to help make up passwords that would be easy to remember but relatively difficult for nefarious types to guess.

PASSWORD GENERATOR

Online Password Generator

Password generator

This is a little Javascript program that will concatenate two fields and MD5 them…

Perfect Passwords

Ultra High Security Password Generator

pdf generators


html2pdf

This application will convert any URL of a Webpage into a PDF file

Notepad Generator – 1.0.0a

This tool allows you to customize a PDF notepad.

PDFCreator

PDFCreator is a free tool to create PDF files from nearly any Windows application.

PDF Online

Quickly and easily convert your documents into PDF from anywhere in the world

RSS 2 PDF (Beta)

Free Online RSS, Atom or OPML to PDF Generator

popup generators


Accessible Pop-up Window Generator

Create pop-ups that are accessible and search engine-friendly

Popup Window Generator

Use Eric’s Popup window Generator to easily add popup windows to your site! The windows are activated by clicking on a link, and can be fine tuned in every aspect, such as dimensions, scrollbars, toolbar etc. Awesome tool.

Popup Window Maker

Need to create a popup window? Use their code generator! Fill out the specifications of the popup window you would like to use, including the URL and the various options such as menubars, toolbars, scrollbars, etc, and click the generate button. Just add this generated code to your site, or even have us mail it to you!

robots.txt generators


Robots.txt Generator

This is the Robot Control Code Generation Tool

Robots.txt Generator

robots.txt Generator (Website is in German language)

Robots.txt syntax checker

This robots.txt syntax checker checks the contents of a site’s robots.txt against that contained in the latest specification, along with providing warnings on the use of new features that are not yet widely deployed.

rss generators


ListGarden

The ListGarden™ program is a tool for manually creating and maintaining RSS feeds. (To learn what an RSS feed is, read “What is RSS?“.)

RSS Button Generator

A RSS Button is a small image banner/badge/button/label/sticker (80 pixels wide x 15 pixels high) that has been adapted by the blogging world in order to keep blogs neat and consistant. With this page you can create your own RSS styled buttons.

RSS 2 PDF

Free Online RSS, Atom or OPML to PDF Generator.

RSSxl Beta – RSS Generator

This online tool generates an RSS 2.0 Feed from pretty well any web page.

sitemap generators


Free Sitemap Generator

Their tool creates a sitemap as defined by Google™ for your site.

Google Sitemap Generator for WordPress v2 Final

This plugin generates a XML-Sitemap compliant sitemap of yourWordPress blog. This format is supported by Ask.com, Google, YAHOO and MSN Search.

Google Sitemaps

Google sitemap generator- need to sign up, excellent tool for webmaster.

ROR Sitemap Generator

A Google XML sitemap will ensure that Google and other participating search engines are made aware of all the pages contained within a website, speeding up the time it takes for your pages to be crawled by the search engines.

Sitemap Generator

Create an XML sitemap that can be submitted to GoogleBingYahoo and other search engines to help them crawl your website better.

text generators


Lorem Ipsum Generator

Typographic filler text generators are available for these languages:

ArabicChineseEsperantoGreekHebrewHindiInterlinguaJapaneseL33tspeakLatin |LetzebuergeschMorsecodeQuenyaRussianSlovioSonaTokiponaVolapük

Typographic filler text-generators are available with individual user interfaces in:

  • English
  • Spanish
  • German
  • Lorem Ipsum

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Get it from this ipsum generator.

    Malevole – Text Generator

    Tired of using Lorem Ipsum for dummy text in your latest masterpiece?

    This text generator has been developed based on years of careful research and is guaranteed to improve even the most lacklustre of designs.

    Typetester

    The Typetester is an online application for comparison of the fonts for the screen.

    tooltip generators


    DHTML Tooltip Generator

    Sometimes the HTML “alt=” isn’t enough to relay the detail you’d like it to. Here is a tool that will allow you to give your users more interactive tooltips.

    Flash Tooltip Generator

    A flash tool tip is like an alt tag that can contain a message and this tool tip can be used on text links quite nicely, giving a brief description of the link to your visitor.

    Weblog generators


    Firdamatic

    Firdamatic™ is an online tableless layout generator that allows you to create and customise layouts easily only by completing forms, making creating skins for your Firdamatic-based layout a breeze. This tool is available for free for personal/non-commercial use only and comes with no technical support as my interest in web design has died down. Use it at your own risk.

    PsycHo

    Free weblog template generator

    misc generators


    Backlink Builder

    Building Quality backlinks is one of the most important factors in Search Engine Optimization.

    FontEditor BitfontMaker

    Online bitmap font editor

    HTML to JavaScript Convertor

    The HTML to JavaScript convertor takes your markup and converts it to a series of document.write() statements that you can use in a block of JavaScript.

    Insta-Select

    Transform a list of words/phrases into to an XHTML-compliant <select> list. Just like that, as Tommy Cooper used to say.

    Pretty Printer for PHP, Java, C++, C, Perl, JavaScript, CSS

    This is a source code beautifier (source code formatter), similiar to indent. Please make a backup before you replace your code!

    Quick Escape

    It’s a tool that lets you quickly paste in HTML and for that to be converted to escaped characters which can be pasted back in to your HTML source code so that it renders on screen.

    Response.Right

    Response.Right converts text/HTML to server-side write statements in PHP, ASP, JavaScript and Perl.

    XFN (XHTML Friends Network) Link Creator

    Create XFN-friendly links at the press of a few buttons

    Yes No Now!

    It’s a tool for quickly generating accessible, XHTML-compliant yes/no radio button choices from a list, that’s what.

    Browsershots

    Free screenshots of your web design in different browsers

    iCapture

    Screenshot Generator

    More will be added…

    References:
    ASCII-Art
    Graphics
    Using the .htaccess File
    Free CSS Generators and Creators
    What is Web 2.0 Badges
    Web 2.0 Badges – Online Generator
    Photoshop to Create a Favicon ICO
    Meta Tag Generator By ProBlogBooster
    Free Online PHP Form Generator
    20 More Shocking and Remarkable Flash Photo galleries for Websites
    Color Scheme Generators for Cool Web Designs – Make Wonderful Color Schemes for Websites
    How to view hidden passwords without using any software
    How to increase your email subscriber database fast using proven and cost effective techniques

    Free Files of the Month: May 2011 from Envato

    This post is continuity of “ Free Files of the Month: April 2011 from Envato”  which is the marketplaces where thousands of developers and designers buy and sell digital goods every day.

    Free files from Envato are completely ready-made, well-designed and functional enough to provide you with all necessary facilities for your website or project requirement. You can download the files you like absolutely for free.

    All you have to create an account and with this single account you can get access to all Envato Marketplaces and after Sing in  Download link will be available to you.

    Themeforest: Slideo Business template – available in 7 colors

    A modern business template, cool sliding menu and ready to use page styles.

    7 custom skins: Navy, Red, Green, Pink, Orange, Purple and Grey.

    Live Preview | Download

    Code Canyon:CSS style switcher

    Features

    • absolutely no PHP editing needed!
    • 5 seconds, 3 step setup (see below)
    • created for designers
    • support for multiple CSS files in single HTML
    • ideal for showcasing your work with multiple color schemes
    • faster than JS based switching
    • unlike JS based switching not prone to bugs; doesn’t interfeer with other JS code
    • extensive user-friendly documentation and examples

    Live Preview | Download

    Calendar is resizable.
    You can resize the whole calendar over xml including text size and position of every element, without the need for opening flash files.
    Easy to change font (instructions included).

    Download

    Video Hive: Spectrum

    Customize this project any way you need! Add your videos, photos and text! By simply tweaking a few settings, you can give this project a completely different feel!

    Included with the project file is a in-depth video tutorial to help you customize the project quickly and easily.

    Download

    Pack of stunning backgrounds, including city skylines and night skies.

    • Includes 25 JPEGS and a PSD file
    • 10 color variations, plus add your own with a few clicks
    • Fully layered, editable and easy to use
    • Textured and clean versions included
    • Resolution – 1280×960

    Download

    3D Ocean: 15 plastic Materials and Render Scene

    This file was made using 3d Max 2010, so the material will only work in 3d max 2010/2011

    Please Note the Hovercraft is not included, but is available to buy from DarkstarDesigns’s portfolio.

    These amazing materials come with a professional render scene included to help get the best out the textures, It comes ready to use simply add you own models to the scene. 15 different styles of Plastic material to choose from so any model will look good.

    Download

    An upbeat modern Africa inspired piece depicting simpler times and joyful souls… Bouncy celesta and marimbas set the tone for this one.

    Download

    Tut Plus: Build your Own JavaScript Library

    Over the course of the past few years, the JavaScript community has exploded exponentially. While technologies like Ajax certainly had something to do with the popularity of JavaScript, it it’s safe to say that libraries are the primary reason we’ve seen such astonishing growth in the community. No longer is the browser the playground of those who venture into JavaScript development and brave the disparate APIs supported by multiple browsers. Thanks to libraries, the differences between the popular browsers are minimized, making cross-browser development much easier than it used to be.

    Download

    Run a Video Blog on “eVid WordPress Theme”

    How to Use the Excerpt as a Description

    The WordPress Excerpt is an optional summary or description of a post; in short, a post summary.
    The Excerpt has two main uses: (WordPress Excerpt)

    1. It replaces the full content in RSS feeds when the option to display summaries is selected in Dashboard › Settings › Reading.
    2. Depending on the WordPress theme, it can be displayed in places where quick summaries are preferable to full content:
    * Search results
    * Tag archives
    * Category archives
    * Monthly archives
    * Author archives

    How to add excerpts to posts

    To add an excerpt to a post, simply write one in the Excerpt field under the post edit box. An excerpt can be as short or as long as you wish. Usually, given its purpose, a couple of sentences is fine.
    Interestingly, since the WordPress excerpt is similar in purpose to the META description of (X)HTML documents, excerpts can additionally be used as meta descriptions too. Some themes do this by default. It can also be done by means of an SEO plugin or a plugin for managing data in the head of (X)HTML pages.

    Since the_excerpt() prints directly to the screen and can’t be passed to other PHP functions, you can’t wrap it in the esc_attr() function, as you normally would when using a template tag as an HTML attribute. Instead, you use the_excerpt_rss(). This function formats the excerpt for RSS feeds, but in this case it will work equally well in your description attribute, since excerpts can’t contain HTML.

    Add this lines code between the <head></head> tags in the header.php file of your WordPress theme, which display the excerpt as the meta description tag for single posts and pages.

    <?php
    if (is_singular()):
    global $post;
    setup_postdata($post);
    ?>
    <meta name=”description” content=”<?php the_excerpt_rss(); ?>” />
    <?php endif; ?>

    I have not discussed The WordPress Excerpt in detail but rather explained most important part. I tried to make some sense of it by focusing on what seemed essential to me and without going into too much detail. If you think there is still too much detail, or not enough detail, leave a comment to say so. If you are still satisfied read the following reference and I hope you will find WordPress Excerpt in detail.

    Useful Resources:

    The manual Excerpt in WordPress
    Ultimate Guide to WordPress SEO – META Descriptions
    How to use the Excerpt field from WordPress for SEO
    WordPress meta description using post excerpt, category description and post ID
    The WordPress excerpt: What, why, how, tips and plugins
    Using WordPress Excerpts
    Change excerpt length in wordpress

    WordPress Top Plugins

    Digging Into WordPress

    WordPress 3.0 jQuery: Enhance your WordPress website

    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