This is the third post of my WordPress Complete Tutorial series.

For all tutorials in this series, please visit:

In the last post, we created a blog on WordPress.com. We will continue working on that blog, the topic of today is the themes.

Change Your Theme

How the blog is displayed is based on the theme used. Let’s go to the blog we created, ZackLive.WordPress.com, At the bottom of the page, we can see this blog is using a theme called, Wu Wei which is designed by Jeff Ngan. Let’s try some other themes.

WordPress.com Themes

Go back to Admin Panel, you can visit Admin Panel by adding wp-admin to your blog’s URL, in this case, it will be: http://zacklive.wordpress.com/wp-admin.

Click Appearance->Themes. There are a lot of great themes listed here. Most of them are free to use, some Premium themes require you to purchase.

We go with some popular themes. Click Popular under Browse Themes in the middle of the page. These are the most popular themes on WordPress.com. You can find some well-designed themes here. We will try INove theme for this time.

Scroll down the page to the bottom, you’ll find INove theme. Or type INove in the search box to find it.

WordPress.com INove Theme

It shows the name of the theme, a short description and tags. Tags describe the features of the theme, such as two-columns, right-sidebar.

Now click on Preview to see how it works for your blog, or click on Activate to use this theme. I’ve activated INove theme, let’s see what’s the difference.

WordPress.com Blog Theme

A totally new blog! Just one click you’ve got a new design of your blog. And it’s all free, what can be better?

Sidebar and Widgets

You may notice that INove has a right sidebar, which is different from the default theme. We can edit the sidebar from Admin Panel.

WordPress.com Widgets

Click Appearance->Widgets.

Widget is one of the most amazing things of WordPress. It’s a small tool which contains different features, such as showing latest posts. You can add or remove these widgets to your blog by drag-and-drop. You don’t need to edit any code to change the layout of your blog.

Widgets are usually used in sidebar. Sidebar is like a container for widgets, you put widgets into a sidebar so that the widgets can be functional.

Some themes have only one sidebar, others may have several, there is no limitation to the number of sidebars, it’s all based on the design of the theme.

INove theme has one sidebar, right sidebar. You can drag-and-drop your favorite widgets into it. It’s better that we put some thing that will help readers to find out more about our blog in the sidebar. Like Categories, Recent Posts and so on.

After modifying the sidebar, we need to refresh our blog to see how it works.

WordPress Sidebar

We’ve got the new sidebar now. If you want to remove any widget, just drag and drop it off the sidebar area.

WordPress Menu

Let’s set up the menu for the blog.

Go to Admin Panel, click on Appearance->Menus.

Wordpress Menu

The left hand side is inactivate, because there is no menu for now. We can create a menu by entering a name for the menu and click Create Menu. Here we use “My Menu” as the name.

WordPress Menu

Ok, we’ve got our menu. We need to allocate the menu to theme – select a Theme Location for the menu. There is only one menu location in this theme, the Primary Navigation. We choose My Menu for this location and click Save.

WordPress Menu Item

We can set up items for the menu now. The first item we need is a Home button which is a link back to the home of the blog. We will add a Custom Link to the menu. Enter the URL of the blog, in this case, it’s “http://zacklive.wordpress.com” and “HOME” as Label. Click Add to Menu.

We have our first item for the menu, let’s add more. Check the Page of “About” and click Add to Menu. Do the same to our only category, “Uncategorized”. So that there are three menu items. We can edit and remove them by clicking the triangle on the items.

WordPress Menu Edit

Remember to click Save Menu when finishing editing. Refresh the blog to see the new menu.

WordPress Blog Menu

Everything works fine.

Concludesion

In this tutorial, you learned:

  • Changing WordPress Theme
  • Editing Sidebar and the concept of Widget
  • Editing Blog Menu

In the coming tutorial, We’ll go through other settings of WordPress.

This is the second post of my WordPress Complete Tutorial series.

For all tutorials in this series, please visit:

I am going to guide you to register a free blog on WordPress.com today. We will use this blog as a testing blog, you can try out the power of WordPress with it.

WordPress.com is a blog service website run by the company behind WordPress, Automattic. They offer free and paid blog service powered by WordPress.

Register a Blog on WordPress.com

This is the homepage of WordPress.com, it shows latest posts on WordPress.com. You can select your language from the drop down box on the top right.:

WordPress.com Homepage

To get our free blog, click on Get Started Here. You need to provide some information about your blog.

WordPress.com Signup

The first thing is to select your own domain, you can use a domain under WordPress.com for free, which is like: YourName.WordPress.com. Or you can register a .COM/.NET/.NET here. WordPress.com will host your both your domain and blog. It’s very convenient, you don’t need to worry about the setting of your domain. The only thing is that it’s a little bit expansive, $17 per year, usually a domain company charges for a price under $10.

Here we choose WordPress.com to get a free account. I use ZackLive.WordPress.com as my domain, and ZackLive for username. And then enter your password and email. You can select your language in the drop down box as well.

After clicking Sign Up button, a activate email will be sent to your email, you need to click the link in the mail to activate your blog:

WordPress.com Activate email

You will be redirected to the Dashboard of your blog’s admin panel.

Dashboard of a WordPress Blog

Here you will see the basic information of your blog, like how many posts and comments on your blog. You can drag and drop to re-arrange the Dashboard, and you can select what to be showed in Screen Options on the top right.

WordPress.com Dashboard

The video provided by WordPress.com is the best way to understand the Dashboard.

Let’s check out our blog.

Your First WordPress Blog

You can visit your blog by clicking on My Blog on the top Admin Bar. Or directly type your URL in your browser, for my blog that will be zacklive.wordpress.com:

WordPress.com My blog

On the top of the page, you can see a Admin bar, that can only be seen by the owner of the blog. You can use it to go back to Dashboard or publish a new post quickly.

Right below the Admin bar is the blog Menu. We have two links, Home and About. You can change this in your admin panel(Appearance->Menus).

The big title, zacklive, is the name of my blog, and followed by a default slogan, “Just another WordPress.com site“. You can change these in your admin panel(Settings->General).

And here comes the post, you can see the post title(Hello World!), publish date and content. Post category is under the post.

There is a blank area at the bottom, that’s where sidebar is placed. There are usually three kinds of sidebars: Left, Right and Footer sidebar. For this theme, we have footer sidebar(at the bottom of the page), you can edit sidebars in admin panel as well(Appearance->Widgets).

Conclusion

So you have your first WordPress blog, you can try it out in Admin Panel.

In the next tutorial, I’ll show you how to work with themes to make your blog looks better.

If you’ve got any questions, feel free to talk to me via comment.

WordPress Complete Tutorial 01: Introduce WordPress

This is the first post of my Complete WordPress Tutorials series. For all tutorials in this series, please visit:

What is WordPress?

I suppose you have the concept of blog, or you can figure it out in Wikipedia.

WordPress is originally designed for blog, but now it becomes a full-featured CMS(Content Management System) , which means you can create all kinds of websites with WordPress.

So if you want to have your own personal website(blog), or you’re looking for a tool to create and manage your websites(CMS), I will suggest you to try WordPress. It’s one of the most popular CMS and blog platform in the world(Top 3 CMS: Drupal, WordPress, Joomla) .

Full features of WordPress is described here. And here are some of my favorites:

  • Everything of a Blog: Post, Page, Comment, Trackback, Tag…
  • Theme and Plugin System: Theme and plugin are separated from the core. So that you can change as many themes as you want, or install plugins to get new features without changing(re-installing) WordPress.
  • Easy to update: You can upgrade WordPress, themes and plugins with one click in Admin panel, rather than re-installing or uploading files.

Why You Need a Blog?

There are a lot of blog posts telling you why you need a blog. I’d like to suggest you to read this post by Mark Suster. He’s talking about startups, but you can figure out the power of blog, here are two examples from that post:

Example 1 : Mint.com

Think Mint.com. In their early days they had an enormously effective blog on the topic of personal financial management. They created a reason for their customers to aggregate on their site on a regular basis. They became both a thought leader in the space as well as a beautifully designed product. They created inbound link juice on topics that drove more traffic to their site. Type “personal financial management” into Google.  Mint.com is the second result. Smart.

Example 2: Magento

Think Magento. They are an open-source & SaaS provider of eCommerce solutions. They are the fastest growing player in the world in this space. They achieved all of this before they raised even a penny of venture capital. eCommerce is an enormously competitive search term. Yet type it into Google and the third result (behind the Wikipedia entry and ecommerce.com) is Magento. Magic. They did it by creating a blog, discussion board and hub for eCommerce advice and information.

WordPress.org and WordPress.com

WordPress.org and WordPress.com

There are two WordPress websites: WordPress.org and WordPress.com.

What’s the difference?

WordPress.org is for the open source project of WordPress. Here you can download your own copy of WordPress and install it on your server. And there are a lot of great themes and plugins can be found here.

WordPress.com is a blog service website run by the company behind WordPress, Automattic. They offer free and paid blog service powered by WordPress. You can have a WordPress blog by signing up on their website. The disadvantage  is less flexibility. You can’t edit everything, and they have limitation on themes and plugins.

That’s It for Lesson One

I guess that’s enough for the first lesson. In the next post, I will guide you to go through WordPress.com. You will understand how to blog in WordPress.

jquery.qrcode.js: Browser QRcode Generation JQuery Plugin

jquery.qrcode.js is jquery plugin for a pure browser qrcode generation. It allow you to easily add qrcode to your webpages. It is standalone, less than 4k after minify+gzip, no image download.

It doesnt rely on external services which go on and off, or add latency while loading. It is based on a library which build qrcode in various language.

jquery.qrcode.js wraps it to make it easy to include in your own code. jquery.qrcode.js is available under MIT license.

Visit JQuery.qrcode.js

Download JQuery.qrcode.js