Wordpres Theme Development – Lesson 1

If you are really interested in WordPress theme development. I’ll really recommend that please go for HTML, CSS and little bit PHP knowledge first. If you already aware with those than congrats, this lesson is for you.

Now first, we have to create two files in the theme folder in WordPress.

In our new theme folder Javatportal we create two blank files.

  1. index.php
  2. style.css

 

Now in style.css file write the below code comment.

Now in index.php paste the following code:

Wordpress already created some predefine function for the theme developer in above code we use the follow:

 

have_posts()                                     – return true if we have post

the_post()                                          – iterate a single post

the_permalink                                 – return the link to the specific post

the_title()                                          – return the title of post or page

the_content()                                   – return the whole content of a page or post

Adding Header & Footer:

For adding header and footer we have only add get_header(); on top of the index.php file and get_footer(); in end of the index.php file.

Now you will see the admin top bar area and some little changes.

Customize the header and footer:

For header and footer customization we have to create two files in our theme folder:

  1. header.php
  2. footer.php

Now we added the code into the header.php file and that is following:

In the above code, we use the following function of WordPress.

 

language_attributes();                  -specify the language for a HTML doc

bloginfo(‘charset’);                         – specify the charset information in a HTML Doc

bloginfo(‘name’);                            – specify name of the blog

wp_head();                                        – all plugin head codes will be there

body_class();                                     – CSS class of body

home_url();                                       – specify your blog URL

bloginfo(‘description’);                  – specify the description of your blog

 

Now in footer.php file, the code is following:

 

wp_footer();                                     – all plugin closing codes will be there

 

Adding some more styles into style.css

Now our style.css should be like this:

Now the above style may not be effective into our website. For include this style.css file, here we have already known many ways to perform the same task.

But in WordPress, we have to make a function into functions.php

We created a new php page named functions.php

Explanation: In above in our self created function we include our style.css file using the predefined function wp_enqueue_style();

And in another function named add_action() we added that function so the WordPress can identify that the function gets work properly.

Adding some more CSS for styling

Explanation: We did following in this claim.

Article.post : In every article you will show a line/separator after each article.

article.post:last-of-type : No Line/separator after the last article.

site-header: Bottom border after the header

site-footer: Bottom border after the footer.

Finally, this is the output of what we did:

Harish Sharma blog

Harish Sharma blog