Create a chat box for your site with HTML/CSS, jQuery, PHP and MySQL

Well, it is fun to chat with the people who use same site I use, we can share informations, updates, even jokes sometimes. All it is possible with chat box, we can also make them be occupied for long on the site using this technique. We can create a chat box for websites, blogs, forums easily using jQuery, PHP and MySQL.

Here is a tutorial to build a totally customized chat box

We will follow this file tree

diretreee

Chatbox.php is the file which contains the main theme and chat box which will operate to show and receive messages from users.

Process.php , here is where the PHP code is present, which does the job of storing and retaining the chat data from the database.

Config.php , here we will store database configuration file.

Script.js, we will store all javascript and jQuery script.

style.css, we will store the css code for the chat box here.

Here is the code for the chatbox.php

 
[html]



Chatbox







[/html]

 

(To be Updated soon….)

 

SEO tips with wordpress theme

Many people like to design their own custom theme for their WordPress blog. But, sometimes they commit some small errors while coding, which kills their page ranks. Some people don’t even follow standards, and they kinda end up with big disasters.  We can find many tips online about WordPress SEO, some turn into jackpot, and some into awful thing. But here are some guaranteed things, you can follow blindly.

wordpress theme seo

Always Double Check The HTML Tags.

HTML is very easy to learn, and also very easy to make errors. We may sometimes misplace them or use them in different ways other than they meant. These days, browsers are very powerful and advanced, they phrase any errors, and show the site right to you. But, it isn’t same about the web crawlers, search engines seem them differently than we normally do. So, it is always nice to see that we take good care of things behind the curtain too.

There are many websites out their to check the HTML or CSS errors, they are free and totally reliable. There are also many IDE which do it for you. It shouldn’t be hard for you to find such sites or IDE.

Less Graphic More Traffic.

It is not bad to use the graphics to demonstrate things, they are really useful. But, when they are excursively used, I bet, they are pain to bear. And some people who write in images, they should know that it never helps. How would search engine know what is in the image? it doesn’t have OCR. So, less the graphical representation of content, better is the content exploration. You must also include title, alternate name for the images, It is good practice.

Do not Ajax-ify Everything.

Ajax is really cool thing, we can load content without refreshing whole page. Well, it really helps save data. But, have you ever considered how a search engine looks at it? It just sees nothing, it won’t try to load the content that isn’t there. So, if you are ajax fan then you should limit it or What you can do is use some tricks, like using hash links, that might work.

Use standard tags.

We all know HTML, it is very easy to code. But, when we code the WordPress theme we should always see the we follow the standard tags, you might never use <span> or the <hentry> or <header> tags , they really are helpful for search engine to grasp the right content. You must see this, it might prove helpful to you.  http://microformats.org/wiki/hentry

First Header, Then Content and later is Navigation, Sidebar and Footer.

Well, this is really interesting, but search engine will always give greater importance to the documents top side. So, if you fill your top area of web page with only, navigation bar and side bar, the content is hardly given any attention by the search engine. The question may arise ” What can I do if the sidebar is at right? or navigation comes before the Content?”, answer would be, ” CSS can do many thing.” Don’t forget to rely on CSS as much as possible.

Create your own WordPress theme from scratch [Part 4]

In previous tutorials we have coded header.php and content.php, now we shall code sidebar.php.

Sidebar is place where you can put widgets, or links or anything which is to be quickly available from every page in the blog/website.

WordPress has special feature to manage the sidebar, you just have to drag and drop the elements in the sidebar from dashboard, and that’s it, it will be live.

So, you have to choose what you want to put in side bar. Here am going to add search,categories, recent posts, archives, and web links.

Before doing that we must first register our sidebar, to do that we must first create a file named functions.php and add this code to it.

Continue reading Create your own WordPress theme from scratch [Part 4]

Create your own WordPress theme from scratch [Part 3]

In last part we have coded index.php and header.php,  here we will code content.php, this page will display the posts and search results, and posts under categories, pages , etc.

here is the code for content.php

The above code looks to0 complicated, let me break it for you line by line. Continue reading Create your own WordPress theme from scratch [Part 3]

Create your own WordPress theme from scratch [Part 2]

Here is a basic theme idea, how the things are gonna be arranged in the theme.

basic wordpress theme layout

First, create a empty folder in wordpress’s main directory -> wp-content -> themes, name the new folder as testtheme.

Now create a new css style sheet named style.css and add the below code to it and save it to empty folder of theme.

That css page adds the description and info about theme to wordpress dashboard, that code basically works as theme description. Now, you can see that your new theme is available to be activated from dashboard. Don’t activate it yet, as there no other files in the folder except for the style.css page. Continue reading Create your own WordPress theme from scratch [Part 2]

Emulate and test your website on different devices virtually.

It is almost impossible to test your website for compatibility on all different devices, especially when you don’t have much time. Hence, it will ease your work when you have a tool to emulate the device and check it at different compatibility. It is possible with Google Chrome Canary, it has special feature for developers which enables to emulate few different devices. You can also emulate a custom device. So, it should be nothing but good gift for web designers.

Here is how to do it.

1) First download and install Chrome Canary from here.

https://www.google.co.in/intl/en/chrome/browser/canary.html

2) After you have installed it. Open the site you want to check compatibility for. ( I open google.com) Continue reading Emulate and test your website on different devices virtually.

Create your own WordPress theme from scratch [Part 1]

Here is how to code your WordPress theme from scratch. If you have a HTML/CSS template ready and you want to turn it into fully functioning theme then you are at right place. You don’t need to be a very intelligent coder or a software engineer to code your own theme, all you need is little bit of time, patience and a bit of knowledge( which can be gained by just surfing for a few hours.).

Who is this tutorials for :

  • Those want to create a theme by themselves for WordPress.
  • Those who have basic knowledge of HTML, CSS and PHP.
  • Those who need help in coding.

Who isn’t it for:

  • Professional coders who is already knowing a lot about this and expecting better stuff here.
  • Those who wants to code a next-gen theme which is fully loaded, because this tutorials is for basic learners and only low level stuffs are taught here.

So lets get started…

Here is what are we gonna require first to get started.

  • Basic Template
  • CSS Styling

and we’re going to convert theme into theme.

 But….

As you know WordPress theme doesn’t have to be a single page code. We can break the main page into parts like.

  • Index.php . This page is the index page where we will include all the other blocks.
  • Sidebar.php This sidebar page, this will hold all the widgets and everything we want to include in side.
  • Header.php This is common page for all, it will handle all the heading, page linking, script linking and many things.
  • Footer.php this is also common, it will hold everything that you want to include at the bottom of page.
  • Content.php This is the page which will print the lists posts for the index.php
  • Single.php this is the page which will open when you click to open a single article.
  • Comments.php , this page will show the comments.
  • Search.php This is the page which will show the search results.
  • searchform.php this the page which holds your custom search for( it is not really necessary as there is already a built in search form).
  • Tags.php this will show the lists of posts tagged under same tags.

So, understand them. Now we must break our custom theme into parts and start coding.

NEXT PART:
CREATE YOUR OWN WORDPRESS THEME FROM SCRATCH [PART 2]

SEO for Bloggers.

SEO isn’t that easy for web bloggers. Making pages look good in search engines is harder than anything, they keep swinging from first page to the hundredth page. So, bloggers usually keep researching on the web to keep the ranks higher. They get lucky sometimes, most of the times they are failed. Well, not because they didn’t try hard but sometimes they have to make changes on their own web to make it more SEO friendly. Here are somethings you can before posting on your blog.

seo for bloggers

Tags, Tags, Tags

Tags speak everything for SEO sometimes. You must be really good at choosing tags. Choose tags which are related to your posts and also very popular or common. For example, if I write about an car, I would tag it under “cars”,”brands”,”name-of-the-car”, not only these but, “mileage”,”smooth running car”,”new car”, etc.

Though your page does not has the search term, your page will be showed up in search engine if it has tag which matches the term . So, always choose a tag that is common or popular.

Use Images wherever possible

Use images in the posts wherever possible, and give alternative sensible names to the images  because images also drive a lot of traffic to the blog, if you post some appropriate image with right name, who knows, you may drive thousands to your site easily.

Ping back your previous articles,

If there is something you written already related to currently being written articles then you must mention them. Because, when you mention the articles again they get re-crawled and they get a bit boost of SEO, which is a good thing.

Keep up the posting frequency,

You must maintain the posting frequency, if you stop posting even for a week your blog may jump back to many pages behind. So, never miss an opportunity to post something on your blog.

Maintain originality

Original articles are found to be more focused and most easily reached. Powerful and unique articles are good way to attract users.

 

 

Create a side hover menu for your site with pure CSS

Create a nice and attractive side hover menu for your website with pure CSS. It will let you store menu items in it and only show when user move the mouse towards any edge of the screen. Here I am creating a left-sided menu.

Lets first prepare a HTML page with menu,

 

Now lets start playing with css styling, Continue reading Create a side hover menu for your site with pure CSS