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

 

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 A Very Advanced Image Gallery With Only Few Lines Of Codes With PHP, HTML, CSS

You want to create a Web image gallery and don’t want to write repetitive code? then here is simple script, place it in a directory and also images in same directory under a folder called “images” and that’t it. It will list and display images itself. Not only that, it names the images from the file name, all you to do is rename images to the requirement.

Image gallery script

Here is the code

Continue reading Create A Very Advanced Image Gallery With Only Few Lines Of Codes With PHP, HTML, CSS

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]

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

Create a Multi-Columnar CSS layout

Creating multi-columnar website layout using CSS

Creating a multi-columnar site is easy using CSS. As we are just setting up a layout use of any graphics isn’t involved.

I have created blueprint for my site. Blueprints help you to name the objects easily and will give you idea about how to place them. It also lets you decide the size of objects. Continue reading Create a Multi-Columnar CSS layout

Create Simple Clean Menu using CSS and HTML.

Create a simple , nice looking menu with hover effect without using any flash but only with HTML and CSS.

like this:


click here to open it in new window Continue reading Create Simple Clean Menu using CSS and HTML.