Create your own WordPress theme from scratch [Part 5]

Well, we have coded index.php, header.php, content.php, sidebar.php, and now the one that is left is footer.php . I don’t know what all to add to footer.php except this code.

If you like to add anything more than this to the footer, then please be free to do so.

Now, if you have activated this test theme already in the wp dashboard. Now, just refresh the homepage. You see that there is only a lengthy plain text. Because, we haven’t yet coded the theme completely.

(It is better if you add demo content to the wordpress http://codex.wordpress.org/Theme_Unit_Test)

plain

As you can see we haven’t add your blog title to the theme yet. So, we gonna open the header.php again and add this code at the end of the previous code.

The aim of the above code is to echo the blog title and description at the top of the page.

Now, after adding the code to the header.php the total code in header.php must look like this.

Basically, we have completed coding our theme here. We shall now start with the styling, with css code. Start adding css code to the style.css page.

It will make the page perfectly aligned, and fluid. Check it below.

Wordpress theme full page preview.
WordPress theme full page preview.

Now you should start choosing pictures, colors and everything else by yourselves and start adding.

Here completes the creation of WordPress theme. It was totally tested and worked on 2014’s WordPress release.

PREVIOUS PART
Create your own WordPress theme from scratch [Part 4]

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….)

 

Extend a partition using unallocated space from any volume

If you are trying to extend volumes in a hard disk, then it is necessary that the unallocated space has to be lying next to the volume which is to be extended. But what if you want to extend another volume? which is not allowing you to extend the volume. There is a very solution for this, we can use MiniTool Parition Wizard Home Edition to do this.

Let’s see how we can do it.

First download and install the application software from the official site (Version 8.0 and above is recommended).
MiniTool Parition Wizard Home Edition

Now , Install it and run it.

partion wizard home

 

As you can see there is 3.51 GB of unallocated space below the drive D, which I was unable to use to extend the drive C using default windows partition manager. But it can be really easily done using this application.

To extend C drive am clicking on C: using right mouse button and a drop down menu appeared.

partion wizard home drop menu

And then, I will choose Extend, A new dialogue box will appear asking from where the free space is to be used. From drop down list choose Unallocated space and click ok.

drop downlist partision wizard home

Now,  Apply changes by clicking on Apply Button from the top left side of window. And then when it asked to Apply pending changes click yes.

top left, apply , home partition wizard

apply changes

 

Then the process will start, and it asks you to restart the computer after it, you allow it to restart. Then before the computer boots the window, it process and merge the drive with the unallocated space. Tadah, over.

 

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 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]

[How to] Store and Display images from MySQL using PHP

Now everything is database driven and people are willing to involve the db technology everywhere. So, lets see what we can do to throw a image on the screen not directly from the directory, where it is stored as it is. But, we will see how we can store the image in DB and display images from db.

As we are going to do it, I want to tell you what are the procedures involved in it.

First, we will read the images in the binary mode(Binary mode because it can represent anything) using a PHP script, and all the binary code will be stored in the database as is.

Next, we will give the name or number to those data for the identification.

And at last, we will create a script which will access the db, read the data into it, and display image.

Sounds simple isn’t it? Here create a table named imagedb

Now lets create a page called ” store.php ” because it the page we will use to read the images, and store it in DB.

The code we will add to it are

Save the file, and now create a new file called “images.php” and add this code below. this is the page which will fetch us image from the DB.

$data = $sth->fetchAll();
echo $data;

Now type the url http://localhost/path/to/image.php?id=id_u_used , tadaaa, you can see the image.

if you want to put your images somewhere, just use

<img src=”image.php?id=image_id” />

Create a nice, attractive, and simple drop menu using HTML/CSS and JQuery

Create a simple and attractive looking drop down menu using HTML/CSS and JQuery with very less code.

First, lets create a html code for the menu, code looks like this:
[html]


[/html]

Without any css code the above html code result will be like this.
NO CSS/Jquery HTML menu
Continue reading Create a nice, attractive, and simple drop menu using HTML/CSS and JQuery

[How to] Hide “.php” file extension and beautify your URLs using .htaccess mod rewrite rule

Everybody likes SEO friendly and user friendly URLs, to customize the URLs you have to configure your Apache server and

Please remember, mod_rewrite should be enabled in Apache configuration in order to make this work. URL remapping should be done carefully, if any wrong changes are done then, whole website may stop working.

First, Lets see how can we redirect simple URLs like

From http://www.example.com/something.html to http://www.example.com/path/something.html

lets break it down,

This code “RewriteEngine On” above enables the rewrite_mod , so we can write redirect the pages.

The above line says the server that, when someone tries to reach “something.html” on local server, then take them to the new place “http://www.example/path/something.html

this symbol is used to tell to start matching the url
this symbol is used to tell to stop matching

So anything you write between and $ will be considered as pattern to be matched.

Now, Lets make Dynamic URL SEO Friendly

 you can make http://www.example.com/pages.php?id=1&no=5 look like http://www.example.com/pages/1/5/

by saving this in htaccess file

here as you can see I have used (.*) , this will preserve whatever is present in it and then it can be used again in future. 

( ) is used to preserve anything for future use and  (dot) is used to match any single character. is used to match the previous character for one or more times.

So anything typed where (.*) is present can be accessed by using $1 $2 so on.

Hide .php extension with .html

You can hide .php extension with .html and make it more SEO friendly, here is how to do it.

Write,

 This code here will redirect anything you type after domain, http://example.com/test to http://example.com/test.php

The code above works as condition, this condition first checks if the file already exists.

Above condition checks if the directory exists in that name.

If both conditions are false, then the code below executes.

this code redirects to its .php extension, like http://fiw.me/index to  http://fiw.me/index.php

(will be updated soon, keep reading)

[How To] Make .htaccess file to work on wamp server

By default the htaccess files don’t work on the wamp server, you will need to configure the wamp to make it work.

 First, start the wamp server. Then, left click on the wamp server icon in the icon tray.Wamp icon tray

Now a menu appears, Now move to Apache  then click on httpd.conf .

wamp apache httpd.conf

 

Now a text file opens, find a line

and now remove the “#” from it and save the text file.

It should be like this

Restart the wamp server and now the htaccess file must be working fine now.

How to install both Python 2.x and Python 3.x on same computer

Many people try to go to Python 3 but they got to keep up with Python 2 because of lack of support and not all plugins and mods are yet updated to Python 3. So if you want to install both version and execute both version scripts correctly, here is the trick.

First download both Python 2.x and Python 3.x and install them as usual, there won’t be any problem with it. During the installation choose different folders as installation directory for both. I have installed them in same drive and it looks like this.

Installing python 2 and python 3In folder Python27 is Python 2.7.1 and in folder Python33 is Python 3.3

You can execute python script with python 3 by entering ” C:\python33\python.exe scriptname.py ” in command prompt window and you can execute python script with python 2 by entering ” C:\python27\python.exe scriptname.py

Or if you want to execute them in command prompt window without much path typing Continue reading How to install both Python 2.x and Python 3.x on same computer