CypherHackz.Net

Another Malaysian Technology Blog

Make your Own WordPress Theme – Part 1

303 Comments

After I released my first WordPress theme to public, I make another theme for my site, CypherFS Royale . Then an idea sparkling into my head. Why not I make a tutorial on how to make WordPress theme to public? I’m sure there are many peoples are looking to make their own theme for their website. So lets get started.

But before we proceed, I want to tell you first that this tutorial only covers on how to set the layout and the tags or functions needed to make your WordPress theme works perfectly. It is really basic. I will not teach you html, css and php here. You need to learn them by yourself. There are many tutorials available on the net. I’m sure you can found them in ease.

Ok, I split this tutorial to 7 parts. Here are some details for each part.

Let’s begin the Part 1 – The Layout.

The best thing in using WordPress is we can divide our theme into section. Eg: header.php, index.php, etc. But before that, we need to create our theme layout first. To do it, we start with blank html file. Btw theme that we will make here is two columns theme.

MyOWT---Part-1

Now open your favourite text editor such as Notepad. For me, I use EditPlus. It is easy to use and each tag has each colour code. After you open your text editor, we start building the layout.

Type this into your text editor and save it as index.html.

<html>
<head>
 <title>My WordPress Theme</title>
</head>
<body>

</body>
</html>

That is really basic. Now we are going to create sections in our index.html file. We will use <div> tag here. So prepare your CSS to beautify your theme. Ok now we put in the <div> tags.

<html>
<head>
 <title>My WordPress Theme</title>
</head>
<body>
 <div id="wrapper">

  <div id="header">
   header
  </div> <!-- close header -->

  <div id="content">
   <div id="main">
    main
   </div> <!-- close main -->
   <div id="sidebar">
    sidebar
   </div> <!-- close sidebar -->
  </div> <!-- close content -->

  <div id="footer">
   footer
  </div> <!-- close footer -->

 </div> <!-- close wrapper -->
</body>
</html>

As you can see from the code above, I end the close div tag with a comment to make me easier to trace the close div tag belong to which div’s id.

Ok now we have the sections that we want. The next thing that we will do is to divide each section to their own PHP file. This will save our time if we want to edit our theme in the future. PHP files that we will create are:

  • header.php – contains the header
  • index.php – our main file
  • sidebar.php – sidebar section will be here
  • footer.php – our footer file

Now divide the sections to their own file. Copy and paste them into each file. Make sure to save them in .php extension. Each file will looks like this.

header.php

<html>
<head>
 <title>My WordPress Theme</title>
</head>
<body>
 <div id="wrapper">

  <div id="header">
   header
  </div> <!-- close header -->

  <div id="content">

index.php

   <div id="main">
    main
   </div> <!-- close main -->

sidebar.php

   <div id="sidebar">
    sidebar
   </div> <!-- close sidebar -->

footer.php

  </div> <!-- close content -->

  <div id="footer">
   footer
  </div> <!-- close footer -->

 </div> <!-- close wrapper -->
</body>
</html>

Next, Part 2 – Header.

In the real exams of 350-001, people do learn to make wordpress themes. However it is not until you have done your VCP-310 as well as 640-802, that your work reeks of finesse. There can be work produced by 70-290 as well as 70-291 but that is basically crude.

About CypherHackz

Another Malaysian technology blogger who has been in the blogosphere since 2005 and still counting.

Reader Interactions

Comments

  5. CypherHackz says

    [Comment ID #15599 Will Be Quoted Here]

    leh je tukar jadi xhtml kalau nak. hu3. tu semua bergantung kepada designer tu la sama ada nak atau tak. aku just tunjuk yang basic je. :d

    [Comment ID #15603 Will Be Quoted Here]

    dah balik cuti dah. jap lagi baru aku nak update personal blog aku tu. hu3.

    Reply

  6. x3ro says

    bro cypher..maybe next time leh post kan meta tag tuk ape id: header tuk ape..id: wrapper tuk ape..id: sidebar tuk ape..etc..kalau tgk structure je n trus buat..tp tak tau fungsi tak gunegaks kan..anyway great post..besh giler bace..

    Reply

  8. CypherHackz says

    [Comment ID #15672 Will Be Quoted Here]

    yang tu html sebenarnye. dats why kene tahu basic html dulu. he3. kalau nak gune nama lain pun boleh. takde masalahnyer. 🙂

    [Comment ID #15673 Will Be Quoted Here]

    kalau macam ni, selalu orang buat die call file. nak call file tu kene gune php.

    Reply

  11. Josef says

    I think the tuturial is very useful. I follow it step by step. But I don’t belive the ‘copy and paste code’ in my computer will run at the end.

    I need a zip-file of all the related files from the demo theme. Does someone has al link with the ready final demo code?

    cu

    Reply

  23. Rijalul Fikri says

    Nice tutorial! Thx’s for sharing it with us. Very useful tutorial for me as a newbie in this field. It’s been a long time for me to find how to themes my own design. Thank you !!! 🙂

    Reply

  27. Nathan says

    for some reason i keep getting errors on the index.php page. i even copied exactly what you had on your index.php file, and it’s still giving me errors. what am i doing wrong?

    my website

    Reply

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *