QUESTION How to create a personal theme

[Raeven]

This is the guide you are using, correct?
http://get-simple.info/wiki/themes:tutorial

How far did you get before it stopped working?

The first thing to realize is that all of these php codes are placeholders for information.  In your html's footer you wrote

...(website URL) by(Administrator)...

You are doing the same thing. You used 2 little placeholders (website URL) and (Administrator) instead of the real information.  A template is a page full of placeholders that will display the real information for each page later.


I think you had no trouble with step 1 since this is just copy and paste into the top of your file.
The rest of the guide explains how to replace parts of your html with php "placeholders" that will work.  For example in step 2 you would replace your page title "My first website" with the get_page_clean_title php code.

Code:

<title>My first website</title>

becomes

Code:

<title><?php get_page_clean_title(); ?></title>

(in the guide he ALSO adds in the php code that  will put your website name into the title.)

Step 3 is an extra line that you add into your header.  As the guide says, it will not change the way your page looks but some plugins need it.  As Timbow mentioned there is also footer one that should be added to the bottom of your page.

In your webpage I see you have your css and js in the same folder with your html.  And your favicon & logo image are in a subfolder called img.   Your theme will not be in the same folder as your pages, though.  So you must tell it where to find your theme files. That is what the get_theme_url() php code in step 4 does.

To use it he adds it in to any href and src that link to his theme's files: the CSS in step 4, the header images in step 6, the logo image in step 7. You would also use it for the js file that you have uploaded and your favicon image.

Code:

<link rel="icon" href="img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="responsive-iframes.js"></script>

becomes

Code:

<link rel="icon" href="<?php get_theme_url(); ?>/img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="<?php get_theme_url(); ?>/style.css">
<script src="<?php get_theme_url(); ?>/responsive-iframes.js"></script>

and

Code:

<img src="img/logo.jpg" alt="logo" />

becomes

Code:

<img src="<?php get_theme_url(); ?>/img/logo.jpg" alt="logo" />

Get simple generates your navigation for you so instead of

Code:

<ul class="nav inline-items">

<li><a href="index.html">Home</a></li>
<li><a href="pag1.html">Pag 1</a></li>
<li><a href="pag2.html">Pag 2</a></li>
<li><a href="pag3.html">Pag 3</a></li>
</ul>

you write

Code:

         <ul class="nav inline-items">
            <?php get_navigation(return_page_slug()); ?>
         </ul>

(this will be a little different if you use the popular i18n navigation plugin)

Remember that anything you put into the template gets used for all pages. Instead of

Code:

<h2>Home page</h2>

(which should only be seen on that one page) use

Code:

<h2><?php get_page_title(); ?></h2>

This will display the correct title for each page (based on what you have entered as the page title in the page editor.)

For this same reasons, replace

Code:

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>

with

Code:

<?php get_page_content(); ?>

There is more to learn in the guide, of course, and you must double check the examples I have given because I am also new and still learning.