How To Create My Own Theme in WordPress Part - I

Before we Start we have to understand WordPress Folder Structure. The WordPress root folder contain "wp-admin", "wp-content", "wp-includes".

The Theme is Located into "wp-content" -> "themes" folder.

In this folder create a folder with your theme name.

In this example we create folder "mytheme"

create a blank stylesheet in new theme folder and add below content


/*  
Theme Name: <place your theme name>
Theme URI: <write website url>
Description: A Simple WordPress Template.
Author: Pulkit Jalani
Author URI: http://pulkitphpworld.blogspot.in/
Version: 1.0
Tags: <Comma-separated tags that describe your theme>.
Your theme can be your copyrighted work.
Like WordPress, this work is released under GNU General Public License, version 2 (GPL).

http://pulkitphpworld.blogspot.in/.
*/


Like in Our Example
/*  
Theme Name: mytheme
Theme URI: http://pulkitphpworld.blogspot.in/
Description: A Simple WordPress Template.
Author: Pulkit Jalani
Author URI: http://pulkitphpworld.blogspot.in/
Version: 1.0
Tags: Wordpress, Themes, Blog.
Your theme can be your copyrighted work.
Like WordPress, this work is released under GNU General Public License, version 2 (GPL).

http://pulkitphpworld.blogspot.in/.
*/

After create this stylesheet, copy function.php file from pre define "twentyfourteen" theme and paste in "mytheme" folder.

After copy function.php copy index.php file from "twentyfourteen" theme folder.

Also create a png screenshot image of your site design, so its identify in admin panel. 

After copy inc folder from "twentyfourteen" to 'mytheme' folder.

1. After did this go to admin panel and login

2. Appearance -> Themes

3. Activate your theme

After this your theme is created and run on front site, but you need to implement design. We know every design have Header, Main Content and Footer. So in Part 2 we create header for our site.

How to set a Logo dynamically in WordPress

To dynamic Logo of your website.

1. Login With WordPress Admin Panel

2. Go To Appearance -> Header

3. Click on Select Image Section and Choose File Button

4. In Next Step You can crop your image or select entire image and click on Crop and Publish Button

After Done Click on "Save Change" Button at the bottom of page.

If you want to select already uploaded image :

Here is list of all the Uploaded Logo. So you can choose anyone of it and click on "Save Changes" Button.

If You want to remove Header Image Then Click on "Remove Header Image" Button and click on "Save Changes" Button.

How to Create Menu in Wordpress

As well all know that user cannot access our pages till they cannot have its link. So pages or any category in blog can be displayed in menu. In WordPress you can make menu dynamic and you can add any pages or category of blog in menu.

To Create Menu in WordPress :-

1. Login with WordPress admin Panel.

2. Click on Appearance -> Menu.

3. Enter Name and Click on Create New Button.

After click on Create Menu You can see left hand sidebar is active.

You can check multiple pages with checkbox and click on "Add to Menu" Button. If you not seen any of your pages then click on "View All" Tab.

You can also Add static menu and its link if you not want to make page for it. If in your menu bar a menu is linked to another site, so you cannot create page for it, so you can create link for it. Enter Menu Name and URL and click "Add to Menu" Button.

You can also show Blog Category in your Menus. Select any Category and Click on "Add to Menu" button.

After Adding you can see in Right hand side you can view all the menu that is added and you can ordered menu by drag and drop and also you can make sub menu to just drag the menu to right.

Theme Locations:

In your website there are many type of menu you have like Left Menu, Right Menu, Header, Footer etc..

Then you can create any number of menus for your site and where this menu displayed you can set the location of menu by checking "Theme Location Section".

In WordPress by default you get only one menu. To Create more menu location you want to place this code in your Function.php file (Located at wp-content->themes->your current theme->function.php)

Find this function "function twentyfourteen_setup() {"

and then find

register_nav_menus ( array (

'primary' => __ ( 'Top primary menu', 'twentyfourteen' ),

'secondary' => __ ( 'Secondary menu in left sidebar', 'twentyfourteen' ) 

) );

then you can copy this line

'secondary' => __ ( 'Secondary menu in left sidebar', 'twentyfourteen' ) 

and you can paste it in same array :

register_nav_menus ( array (

'primary' => __ ( 'Top primary menu', 'twentyfourteen' ),

'secondary' => __ ( 'Secondary menu in left sidebar', 'twentyfourteen' ) ,

                                'third' => __ ( 'Footer Menu', 'twentyfourteen' ) 

) );

Follow the above type you can make many types of menu to display different different places in your website location.

By Default Primary menu is shows in header part of website, but to display the "third" menu you can use this function

<?php wp_nav_menu( array( 'theme_location' => 'third', 'menu_class' => 'nav-menu' ) ); ?>

WordPress uses above function to display menus so if you want to show another menu just pass the name in "theme_location" argument.

How to Create Page in Wordpress

As we know the WordPress is made for blog purpose, but still there may be pages like About us, Contact Us etc.

To Create Pages like About us :-

1. Login with WordPress Admin Panel.

2. Open Page menu on left hand side menu.

3. Click on Add New Page.

Title : Add Page Name or Title

Add Media : This button work when you write in editor and you want to place an image then you can click on button, its shows all your file that is upload, you can choose and click on insert into page button, the image is inserted where your cursor on editor.

B : B button used to bold selected text in editor.

I : I button used to Italic Selected text in editor.

ABC : this button used to strikethrough text in editor.

List : There is two type of list one is Ordered list and second is Billeted List.

Alignment : there are Three type of Alignment (Left, Center, Right).

Link and Remove Link : Two Button used to give link to selected text or remove link from selected text.

Read More Tag : This button is used when you want to show summary on listing page so you can give more tag, then when user show posts in listing page then he can see only that text, after click on Read More button he can see full blog post.

Toolbar Toggle : This hide or show the paragraph formatting toolbar.

There are special two type of button : Visual & Text

Visual : The visual button show the text editor and if you copy any content from any other site then its show here as well.

Text : It show only blank textbox its not format any content, here you can also paste html code.

For Page Attribute Section :

Parent : You can add any page to its parent page, like you want to make services page then you can add sub page like Wordpress, Drupal, Cake PHP etc. so you can make first services page and add new page and choose service page as parent.

Order : You can set pages order, this pages is shown in menu, so you can define order in which order this page shows in menu.

You can also add one Feature Image in Pages.

How to Create Blog Post in Wordpress

The blog is basic feature of WordPress website. The WordPress is construct for only bloging website, but now a days its used for all types of other website like : E-commerce, General Website, Social Network Site. All this happen bcz of Lots of Plugins and Widget.

To Create Blog Post in Wordpress :-

1. Login with Admin Panel (http://localhost/<Wordpress Folder Name>/wp-admin/)

The WordPress Post can be categorized into different different category. So WordPress create a default category Uncategorized. Every post which have no category will be shown in Uncategroized Category.

To Create New Category go to Posts Menu > Categories.

 Then fill the Left Side Form.

Then Click On Add New Category Button, category will be added and shown in right panel.

What is Slug ?

A few lowercase words separated by dashes, describing a post and usually derived from the post title to create a user-friendly (that is readable and without confusing characters) urls.

Create a Blog Post :-

Go to Post menu > Add New

You can see the new blank fields for posts.

Post Title : Tile of Blog Post.

Content : in Text Editor You can write post content.

Status : 

     Draft : Draft post is only saved with your content, its not showing publicly on website.

     Publish : Published Post Shown publicly on website.

Category : You can choose category in which this post listed. You can also create new category from here also.

Set Featured Image : Every post can contain an image, that image is known as Featured Image.

After Create Post click on Publish button, then this post listed on Website.

How to Work WordPress Admin Panel

In WordPress Admin Panel You can manage all the content related to your front end website. Like Posts, Page Content, Images, Menu, Logo, Background.

In our Blog Install and Setup WordPress You can see how wordpress is installed. In Step 4 you insert the admin panel user name and password.

Link for WordPress Admin panel

www.domainname.com/wp-admin

Like if you use localhost and your wordPress in wordpress directory.

http://localhost/wordpress/wp-admin

Login with your Username & Password

WordPress Admin Panel Menu :-

• Dashboard :- The WordPress Dashboard have quick links and some kinds of widget to quick access to module. You can see there How many posts you post, how many comment posted on posts, latest comment, WordPress News. There are two Sub Tab:-

1. Home :- Dashboard and Home Links are Same.
2. Updates :- In WordPress The Three (WordPress, Theme, Plugin) have regular updated version. Wordpress show here the list of updated version of Theme, Wodpress and Plugins.

• Posts :- WordPress mainly uses for Blog Posts. You can Add your blog post for your blog site. Here are 4 Sub Menu :-

1. All Posts :- Here you can see all the list of post that you have been posted. You can Edit, Delete any post and you can see how many comment a single post have. Its also showed Published Date.
2. Add New :- You can Write New post from here. Add Title, Image, Description, Choose Category and add tags to post.
3. Category :- Here you can Add, Edit, Delete and View WordPress Post Category.
4. Tags :- Tags provide a useful way to group related posts togther and quickly tell readers what a post is about. Here you can Add, Edit, Delete and View WordPress Tags for Post. 

• Media :- Here you can see all your uploaded file. You Can Delete or view the files. Here are 2 sub Menus :-

1. Library :- Library and Media have same work and link.
2. Add New :- You can upload new files from here.

• Pages :- Pages are one of the most part of website. The page contain the content of website other then blog. Like About Us, Contact Us. These pages are also display in menu bar.

• Comments :- Here you can view all comment related to post. You can Edit, Reply, Unapproved/Approve and delete the comments.

• Appearance :- Appearance is used to customize the design theme in front end website. Its have 7 Sub Menu :-

1. Themes :- In WordPress you can install as many Themes. The Activated Theme displayed on Front End Site.
2. customize :- Customize have many options will discuss later. Its using Site Title, Background Image, Header Logo Image and many more.
3. Widget :- Widget is some usefully content that is shown in Left Side, Right Side or in Footer. Widgets were originally designed to provide a simple and easy-to-use way of giving design and structure control of the WordPress Theme to the user, which is now available on properly "widgetized" WordPress Themes to include the header, footer, and elsewhere in the WordPress design and structure. Widgets require no code experience or expertise. They can be added, removed, and rearranged on the WordPress Administration Appearance > Widgets panel. The order and placement is set by the WordPress Theme in thefunctions.php file.
4. Menus :- Here you can make many types of menu so it can be shown in different menu in different places. Like in Header menu we didnt show Terms & Condition but in footer we show Terms & Conditions.
5. Header :- Here you can change the logo of website or color of text title if site have no logo only text.
6. Background :- Here you can set the Background of website or image for background that is displayed in background of every page.
7. Editor :- Editor is special menu. Its list all the pages that is in Themes Folder. Its open the file coding and you can change coding here and save the file, then you can see the changes.

• Plugins :- The core of WordPress is designed to be lean and lightweight, to maximize flexibility and minimize code bloat. Plugins then offer custom functions and features so that each user can tailor their site to their specific needs. You can Activate Plugin and Deactivate if its no uses.

• Users :- Users Menu is show all the list of registered usres in website. You can Edit, View, Create or Delete the Users. You can also Edit your profile from here.

• Tools :- This menu is used to import the content from another website or you can take backup by export your content.

• Settings :- Settings menu provide options regard your website. Here are 6 options :-

1. General :- In General Settings you can change Date and Time, Site Title, Tag Line, Email Address etc.
2. Writing :- Here you can set mail server for post the blog from directly from your email. Also can set formatting for comments.
3. Reading :- Here you can which page is your home page and which page if your blog page. If you want to show on home page different content then you can set this page from here. Also you can set how much blog post shown in one page. After that paging will appear.
4. Discussion :- Here you can set Comments Related Settings.
5. Media :- Every image you upload on WordPress, WordPress will create 3 thumbnail image of original image so you can set the dimantion here.
6. Permalinks :- Permalinks setting is set how url of your site is looks. There are 6 kinds of url structure, you can choose which you likes.

Thank You and give me your kind reverts to improve myself.

Wordpress Directory Structure and Files That is needs to customize

Folders :-

wp-admin (for admin panel)

wp-content (for theme, plugin and images)

wp-include (for libraries)

Files in root Folder :-

wp-config (For database connection)

Other files are use for wordpress coding, no need to change.

WP-CONTENT folder :-

Plugin (For plugin)

Themes (For Theme)

Upgrade (For backup when wordpress being upgrade)

Uploads (Media & Files stored in this folder)

In Plugin folder for every plugin there is directory with plugin name.

In Theme Folder there is for every theme a Directory with Theme Name.

In Uploads folder there is folder with Month Name and then in Month Name Folder there is Folder with Date.

Important Files from Theme Folder :-

For make a new theme create a folder with the Theme Name.

1. functions.php

2. style.css

3. index.php

4. page.php

5. header.php

6. footer.php

7. sidebar.php

You can copy and paste these files from pre installed wordpress theme.