QUESTION How to create a personal theme

[Silvana]

Hello, I want to create my first personal theme for Getsimple, using my template. I would like to ask you to help me the first time, because I tried to change the html code by myself (by following the guide), but I'm not able. Something wrong. Can you show me how to change the code attacked, please? If I see how to do now, then I'll know to do it forever. Thanks so much..

[shawn_a]

Your gonna need to wrap that in code tags.. id use gist instead for large code edits

[Raeven]

I assume that was to me
I deleted the post that went gibberish-y that Shawn is referring to have another go but
I dunno how to color the bits that I want to draw attention to.

[Carlos]

It is recommended to have a <?php get_footer(); ?> line before the </body> closing tag.
http://get-simple.info/wiki/themes:tutorial

[Timbow]

I think you have got the idea Silvana.

One thing I think is not in the wiki, at least not clearly: the meta description tag. GS fills that from the page editor panel so you leave it out or leave the content empty thus:
<meta name="description" content="">

[Silvana]

I think you have got the idea Silvana.

One thing I think is not in the wiki, at least not clearly: the meta description tag. GS fills that from the page editor panel so you leave it out or leave the content empty thus:
<meta name="description" content="">

Thank you all, but ..... I don't understand anything!!    If I can not have an example, I can not understand. I don't know php ..

[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.

[Silvana]

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

How far did you get before it stopped working?

Thank you, you're so kind. Yes, that's the guide that I followed. Now I have redone all over again, following your indications, but the result is the same. The contents appear, but the style is not there. I do not know what to do. I send you the folder with all the content and my changes. Maybe there is something wrong in the css for GetSimple. If you are learning, you know the difficulties. Thank you, thank you, thank you .... for your patience ..

Download folder

[Silvana]

.... The contents appear, but the style is not there....

This is the screen of my theme in Getsimple:
(not even appears the image of logo, maybe I have to put the files in another place? I left them in the folder as they are)

[Raeven]

Sure thing!
I took a look and the problem is that you need to change the quotation marks that you use from proper open/closing marks ( “ and ” ) to the generic quotes. ( " ) Fixing those will fix both the CSS and the logo.

I must have accidentally pasted the wrong ones in when I posted early. So sorry about that!!

[Silvana]

Sure thing!
I took a look and the problem is that you need to change the quotation marks that you use from proper open/closing marks ( “ and ” ) to the generic quotes. ( " )  Fixing those will fix both the CSS and the logo.

I must have accidentally pasted the wrong ones in when I posted early. So sorry about that!!

True, but I corrected and does not work the same. I attach again my template.php (that anxiety! )..

[Timbow]

Did you get that working? It all looked fine to me once you fixed the " problem.

[Silvana]

Did you get that working? It all looked fine to me once you fixed the " problem.

No, Timbow. I have done all that you have told me, but it does not work. The screen is always the one I showed you, no css. I do not understand where is the mistake ..

What do you think about?
(difficult to learn the first time)

p.s. sorry for my bad english..

[Timbow]

I will fix it for you now...

[Silvana]

I will fix it for you now...

Thank you. You are fantastic

[Timbow]

I will fix it for you now...

Thank you. You are fantastic

Not Really. It is on google drive, the whole theme, with favicon, screenshot and all
https://drive.google.com/open?id=0B7zkmD...mJHLXlkUnc
I tested it works but I have not validated or verified anything

[Silvana]

I will fix it for you now...

Thank you. You are fantastic

Not Really. It is on google drive, the whole theme, with favicon, screenshot and all
https://drive.google.com/open?id=0B7zkmD...mJHLXlkUnc
I tested it works but I have not validated or verified anything

It works, it works!! I'm happy. Now I have to study. Can you explain to me where was the error (if it is not too complicated), because I want to learn ....
....and thank you very, very, very much

[Timbow]

It works, it works!! I'm happy. Now I have to study. Can you explain to me where was the error (if it is not too complicated), because I want to learn ....
....and thank you very, very, very much

You had it correct except for the issue with the " and some small things like the favicon. 

Your logo.jpeg - I guess you can just replace the image?

[datiswous]

I thought the

PHP Code:

<?php get_header(); ?>

was also missing in your last example in post #11

[Silvana]

It works, it works!! I'm happy. Now I have to study. Can you explain to me where was the error (if it is not too complicated), because I want to learn ....
....and thank you very, very, very much

You had it correct except for the issue with the " and some small things like the favicon. 

Your logo.jpeg - I guess you can just replace the image?

Ok, thanks. This is a basic template to customize. Now I can try change it and make other themes for me. It is a test of my ability and I like to learn. You have been a great help to me. Ciao

[Silvana]

I thought the

PHP Code:

<?php get_header(); ?>

was also missing in your last example in post #11

Thanks, thanks to all..