-- Download how to create a wordpress themes as PDF --
In this Tutorial we are going to learn How to create Theme.
What is WordPress theme:-
A WordPress theme is representation of your content and theme changes the design of your website, and its layout. Changing your theme changes how your site looks on the front-end, i.e. what a visitor sees when they browse to your site on the web.
Why WordPress theme:-
WordPress theme is easy to focus on how your website looks on the browser that you are currently using.Each theme may be different,offering many choices for site owners to instantly change their website look.
Process :-
How create static theme:-
1) Download any Html template.
2) Create custom theme folder in wp-content\themes directory and save all these files into it .
3)Now you have your index.html and style.css file.
Open your code editor and copy-paste the contents of your stylesheet into a new file and save it as style.css in your custom theme folder. Add the following information at the very top of the newly-created style.css
4) Now you can activate your static theme.In WordPress Dashboard->go to appearance->Themes ->Click on Activate Button.
Breaking Up Your HTML Template into PHP Files:-
The step involves creating PHP files. Create index.php, header.php, sidebar.php and footer.php, and save them in your custom theme folder.All the files are empty at this point.
- header.php :-
Open your newly-created header.php. Login into your existing WordPress installation, navigate to Appearance –>> Editor and open index.php. Copy all the code between the <head> tags and paste it into your header.php file.The header usually contains all necessary head style and top navigation to website.add code wp_head(); just before </head>
B) Footer:-footer.php
Footer code will come in this section where we include our JS files and call wp_footer(); before </body>.
C) Index.php
All main content,articles will comes in this section.call get_header(); at beginning of file and get_footer(); at end of file for inserting header and footer code into existing file.
D) Sidebar:-sidebar.php
Most websites, especially blogs, will have a side area for including content such as archives, tags, categories, ads.
Now you have custom theme folder structure with these files index.php,
Header.php,footer.php,sidebar.php,style.css
Make website dynamic:-
We can make static website dynamic using option framework.we need to add admin folder into custom theme directory.
=>add the functions.php in custom theme directory
How to make dynamic homepage:-
A) Create theme options on wordpress admin panel by including admin/index.php file in functions.php file.
B) Create controls in order to change content,posts,logo,images,Menus etc.
Eg.Make logo dynamic:-
i) Create image upload control in functions.options.php file:
ii) Call id as $data[‘id’] into php code.
C) upload image for logo and Save changes.
We can create text,textarea,switch,slide controls in functions.options.php file in order to make website dynamic.
Text and textarea controls are used to make content dynamic and section can be made hidden using switch.
How to make a content dynamic:-
- Create text/textarea control in functions.options.php file.
- Call id as $data[‘id’] into php file.
- From Backend set text in textfield and Save changes.
Steps for creating portfolio in theme:-
- To create portfolio post type include portfolio-post-type.php file into custom folder.
- To create portfolio post type include inc folder into custom folder.
i) Once you include file,goto wordpress dashboard->Portfolio menu->add categories
ii) Then create filters for portfolio.goto wordpress dashboard->Portfolio menu->filter
iii) Add item in portfolio:-enter your post title in the upper field, and enter your post body content in the main post editing box below it. and assign filter and categories
iv) Click publish button.
Display portfolio in your Template:-
P1) Sets up the loop to display post and returns list of post.
P2) Retrieve the terms id of the taxonomy that are attached to the post.so that we can display
category of portfolio.
P3) Display featured image on post.
P4) Display title of post.
P5) Display content of post.
Steps for creating blog post in theme:-
- Goto wordpress dashboard ->Posts->add new post
- Start filling in the blanks: enter your post title in the upper field, and enter your post body content in the main post editing box below it.
- As needed, select a category, add tags, and make other selections from the sections below the post.
- Click publish button.
- Add following code where
Display Blog post in your Template:-
B1) Sets up the loop to display post and returns list of post.
B2) Display featured image on post.
B3) Display title of post.
B4) the_author_posts_link() displays a link to all posts by an author.
B5) Displays the time of the current post.
Steps for creating Menus in theme:-
- Goto WordPress Dashboard.From the ‘Appearance’ menu on the left-hand side of the Dashboard, select the ‘Menus’ option.
- Select Create a new menu at the top of the page
- Enter a name for your new menu in the Menu Name box
- Click the Create Menu button.
Steps for Adding items to menu:-
- On Pages pane select pages that you want to add in menu by clicking check box.and click Add to menu button.
- In Menu Structure pane you can see all menu item you have selected.We can create sub menu item by dragging it to right.
- Click Save Menu button.
Creating a Custom Page template:-
- Create new file template.php and add following code at beginning of your code.
<?php /* Template Name: Service */ ?>
2) save file.
Creating a Page in wordpress:-
- Goto wordpress dashboard ->Pages>add new.Enter page title.
- In Page attribute pane,Add Page template.
- Click Update button.
Prerequisites:-
- set up a local server environment.
2. Install WordPress locally.
3. HTML Template.
Testing or What can go wrong?
- Styling of images may get reflected or vary while doing dynamic portfolio,Slider,Blog post.
- sometimes we forgot to sync updated files .Upload files on GitHub and sync files after changes are made to files.so that we can have backup of files.