WordPress Theme Vorlage – > WordPress 2.8

Ein Ausschnitt aus der auskommentierten index.php.

Oft taucht die Frage auf, wie man denn WordPress seiner eigenen Seite anpassen kann. Ob es denn kein Tutorial dafür gäbe.
Ängste machen sich breit, weil man zwar CSS und HTML kann, aber nicht PHP.

WordPress Theme Vorlage

Dieses WordPress Theme hat absolut kein Design. Jede der Dateien ist von mir mit vielen Kommentaren versehen, damit Du weißt was Du da gestaltest.

Ich empfehle Dir aktiviere dieses Theme ohne Design und sieh Dir an, was dann alles passiert.
So bekommst Du eine Ahnung und Wissen was dies alles bedeutet.

Das WordPress Theme Vorlage beinhaltet folgende Templates:

1. index.php==>Startseite.
2. single.php==>zeigt den ganzen Artikel.
3. comments.php==>Liefert die Kommentare und das Formular dafür.
4. search.php==>zeigt Suchergebnisse an.
5. searchform.php==>gestaltet die Suche.==> gibt es ab WP 2.7 nicht mehr kannst Du Dir aber selbst einfach machen.
6. archive.php==>zeigt Archive und Kategorienübersicht an.
7. archives.php==>eigene statische Seite zb für eine Usersitemap.
8. images.php==>zeigt Anhänge an und Bilder etc.
9. 404.php==>eigene Error 404.
10. page.php==>für statische Seiten.
11. links.php==>Muster für eine eigene statische Seite.
12. sidebar.php==>die Navigation.
13. header.php==>der notwendige html Header.
14. footer.php==>der notwendige html footer und für einen eigenen Footer.
15. functions.php==>ist vorbereite für viele Sidebars.

Nur dort wo ich es als nötig erachtet habe steht bereits HTML dabei. Da WordPress einiges bereits mit li tags erzeugt findest Du in der sidebar.php eben die ungeordnete Liste oder bei den Kommentaren, weil dies sonst total unübersichtlich wird. Ebenso bei den Artikeltiteln, weil sonst die nötige Information verloren gegangen wäre.

• WordPress Theme Vorlage downloaden als zip Datei downloaden:
  WordPress Theme Vorlage für >WP 2.8.
• Entpacken.
• Nach wp-content/themes/ hochladen==>wp-content/themes/default_deleer.
• Dem Ordner die nötigen Schreibrechte geben.
• Admincenter==>Themes==>WordPress Theme Vorlage aktivieren.
• Ansehen was wie wo erscheint.
• Admincenter==>Themes==>Theme-Editor==>Beginne Dein Werk.;)

neu seit Juni 2007 bis WP > 2.8

In der style.css sind einige Grundangaben gemacht, damit man l nicht was vergisst zum Gestalten.

Functions.php und wie macht man sein Theme Widget fähig:

functions.php ist im Download enthalten!

So kan man Widget einbinden.

In der sidebar.php steht drin:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Right Sidebar') ) : else : ?>

dann ganz unten

<!--dieses endif beendet die widget funktion-->
			<?php endif; ?>

Das in Klammerngesetzte “Right Sidebar” gibt an, dass alles was man in die Right Sidebar setzt jetzt in der sidebar.php landet.

Beispiel Du magst ein Theme mit zwei Sidebars machen eine Links und eine Rechts.

In die linke Sidebar kommt dann:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Left Navigation') ) : else : ?>
dazwischen alles mögliche falls keine widgets genutzt werden
<!--dieses endif beendet die widget funktion-->
			<?php endif; ?>

In die Rechte:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Right Sidebar) ) : else : ?>
dazwischen alles mögliche falls keine widgets genutzt werden
<!--dieses endif beendet die widget funktion-->
			<?php endif; ?>

Drei extra Spalten unterhalb des Contens und die sollen auch für Widget Nutzung hergerichtet werden:

Für die ganz die rechte Spalte

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Right Footer) ) : else : ?>
dazwischen alles mögliche falls keine widgets genutzt werden
<!--dieses endif beendet die widget funktion-->
			<?php endif; ?>

Für die mittlere der beiden:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Middle Footer) ) : else : ?>
dazwischen alles mögliche falls keine widgets genutzt werden
<!--dieses endif beendet die widget funktion-->
			<?php endif; ?>

Für die ganz die Linke:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Left Footer) ) : else : ?>
dazwischen alles mögliche falls keine widgets genutzt werden
<!--dieses endif beendet die widget funktion-->
			<?php endif; ?>

Der Himmel fällt Dir auf denKopf,wenn…

• Du mir hier keinen Kommentar hinterläßt.
• Du mir keinen Link Deines Werkes zeigst.

Artikelhistorie

Erstfassung am 09.05.06
Deutsche Fassungam 16. Juni 2007 erneuert.
Englische und Deutsche Fassung erneuert 04.01.08.
Englische und Deutsche Fassung an WP 2.7 angepasst: 1.11.08
Englische und Deutsche Fassung an WP > 2.8 angepasst: 29.11.09
Und wenn es hilfreich war, freue ich mich über einen Link auf texto.de. Danke!

Blank WordPress Theme – WP > 2.8 ready

You would like to have your own WordPress Theme. You know something about CSS and HTML. You don’t know PHP and template tags are not your friends.

Blank WordPress Theme

Templates without design. HTML only if it is absolut necessary for you. But full of comments to explain the functions.

1. index.php==>Mainpage.
2. single.php==>full article.
3. comments.php==>comments and the necessary fields..==>new at WP 2.7!
4. search.php==>searchresults.
5. searchform.php==>searchfield.==>there is no template but a new template tag at WP 2.7
6. archive.php==>archives and categories.
7. images.php==>for attachments >WP 2.5
8. 404.php==>your own error 404.
9. page.php==>static pages.
10. links.php==>individual static page.
11. sidebar.php==>sidebar navigation.
12. header.php==>html header.
13. footer.php==>html footer.
14. functions.php
    

• Dowonload
  Blank WordPress Theme for WP >= 2.8
• Unzip it.
• Upload to wp-content/themes/
• Admincenter==>Themes==>activate the theme.
• Admincenter==>Theme==>Themeeditor==>Here you are able to do as you likes.

New since Juni 2007 and new since 29.11.09

style.css full with necessary class and id or tags.

Functions.php ==>How to use Widget

sidebar.php :

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Right Sidebar') ) : else : ?>

at the end:

<!--widget function end-->
			<?php endif; ?>

Example two Sidebars one right one left

left sidebar:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Left Navigation') ) : else : ?>
your stuff if no widget
<!--widget function end-->
			<?php endif; ?>

right sidebar:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Right Sidebar) ) : else : ?>
your stuff if no widget
<!--widget function end-->
			<?php endif; ?>

Three Columns under content or in the footer:

right column:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Right Footer) ) : else : ?>
your stuff if no widget
 
 
<!--widget function end-->
			<?php endif; ?>

middle column

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Middle Footer) ) : else : ?>
your stuff if no widget
<!--dieses endif beendet die widget funktion-->
			<?php endif; ?>

left column:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Left Footer) ) : else : ?>
your stuff if no widget
<!--widget function end-->
			<?php endif; ?>

Articlehistorie

First: am 09.05.06
english new since 16. Juni 2007
typos and ready for WP >2.3 04/01/08
ready for WP 2.7: 11/01/08
ready for WP >2.8 since 11/29/09
Please leave a reply or spent me a social bookmark …. or

the sky will fall on your head.

und noch was …

Vom 14.03.07 bis zum 25.August 2011 wurde dieser Artikel 214749 mal gelesen, dann habe ich den sichtbaren PostReadCounter aus Performancegründen abgeschaltet.

[ Widgets in WP 2.5 verwalten in Deutsch.]

Important information: You can’t manage your widgets with IE6 and there is no patch all over the world

Alternate browsers are: Firefox or Flock.

If you would like to have back the old way with drag and drop please read and vote: bring back single screen widgets drag-n-drop.

My example is for three widget ready column theme, but my examples work also in any other widget ready theme.

To see the screenshots larger,please click at the thumbnail. Thanks!

Widget XYZ for column 1 in WP 2.5

1.

Create a new widget

At right side you will find “Current Widgets“, choose from the drop down menu and click “Show”. In my example it is “column1″ this is only a term in my theme. Maybe in your theme it is named “Sidebar Left” or something else.

At left side you will find a drop down with different ways to filter your available widgets. After this you have to click” Show”.

2.

Create a new widget

At left side click an Pages. After the *click* you will find the “Pages Widget” at right side to edit it.

3.

Edit a widget

Choose a title and something else or click “Remove” – you have to click “Save Changes”.

4.

Create a widget for Column2 and filter the available widgets

Create a widget for Column2

Now you would like to have widgets in column2.

1st step: Choose column2 from the drop down. Click: “Show”.

2nd step: Choose “Unused widgets” from the drop down at left side. Click: “Show”.

5.

Edit widget catgories

If you would like to edit your category widget, there you will find two buttons: “Change and Remove”. After your edits you have to click one of them.

I don’t know why some widgets have to buttons “Change and Remove”. I only know “edit” works only with click one of them

6.

Edit widget categories

To see how it looks like in your frontend, you have to click: “Save Changes“.

7.

Text Widgets in WP 2.5

Text widgets in WP 2.5

Each (or every) click add a new text widget. After a click you will find this text widgets at right side.

8.

Text widgets in WP 2.5

Attention: I don’t know why but sometimes and under unknown circumstances it can be that all your text in this text widget will be delete. So copy and paste every time you click *edit*. And click *change* often as you can – .

9.

Rearrange your Widgets in WP 2.5

Rearrange your Widgets in WP 2.5

With drag &drop you can rearrange your widgets.

Thats it. I know it is a very strange way to use widgets in your sidebar or columns. But I hope this step by step tutorial would help you.

The sky will fall on your head

if there is no comment. Leave some love and spread the words.

Dies alles ist auf der Pluginhomepage noch besser erklärt. Ein Supportforum gibt es auch und Moritz Strübe ist sehr engagiert und bemüht. Recht herzlichen Dank dafür.

Das WP Plugin Post Notification erzeugt -wenn man es ihm anschafft – ganz automatisch eine statische Seite für die Anmeldung. Jetzt möchten viele aber nicht nur den Link zu dieser Anmeldeseite, sondern wenn geht bereits das Anmeldeformular in der Sidebar anzeigen lassen. Somit ist die Verführung sich anzumelden sicher höher.

Einfach das Anmeldeformular in die Sidebar kopieren hat zur Folge, dass die eingegebenen Emailadressen nicht in der Datenbank gespeichert werden. Auch wen vordergründig alles funktionierte. Dann hatte ich die Idee eines normalen Loops, der mir eben nur die statische Seite mit dem Postslug ‘post_notification_header’ anzeigt. Dies funktionierte tadellos.

Allerdings möchte ich in der Sidebar die aktiven Kategorien und statischen Seiten kennzeichnen. Dies zerstörte der ganz normale Loop, weil WordPress dann ja nicht mehr wusste, wo es jetzt ist.(Ist laienhaft erklärt, aber so versteh ich es auch. )

So kam mir nach einem Kaffee -das Wundergetränk – die Idee eines neuen Loops. Ich mag ja, dass WordPress ‘my query’ realisiert. Und siehe da, das WordPress Plugin Post Notification funktioniert. Das Anzeigen der aktiven Kategorien oder aktiven statischen Seiten funktioniert und ich konnte sogar ausschließen, dass diese Anzeige des Plugins in der Sidebar auf der statischen Seite mit dem Postslug ‘post_notification_header’ NICHT dargestellt wird.

Dies ergäbe nämlich sonst alles ‘doppelt gemoppelt’.

Meine Vorgangsweise um das Plugin Post Notification auch in der Sidebar anzuzeigen.

Plugin installiert und dann alles gemacht wie beschrieben.

Admincenter==>Einstellungen==>Post Notification==>Einstellungen

Relativ weit unten steht dann “Post Notification-Seite hinzufügen:” Das hakte ich an.

Admincenter==>Verwaltung==>Seiten==> die ID dieser statischen Seite merken. Oder den Postslug verwenden wie ich.

Beispiel die statische Seite, die das Plugin erzeugt hat,hat die ID 43.

Dann tippe ich folgendes in die Sidebar. Und zwar bevor der Widgetcode anfängt oder nachdem er aufgehört hat!

 
<?php if(!is_page('43')) :?>
<p>Info über neue Posts per Email</p>
<?php     
rewind_posts();     
global $more;
$more = 0; 
$my_query = new WP_Query('page_id=43');
while ($my_query->have_posts()) : $my_query->the_post();
  $do_not_duplicate = $post->ID; ?>
 
  <?php the_content(); ?>
 <?php endwhile; ?>
<?php endif; ?>

Dies bedeutet:

Wenn dies nicht die statische Seite mit der ID 43 ist, dann fahre den Loop zurück (rewind….). Zeige mir den ganzen Content an, auch wenn es den “more link” gäbe, (more =0) .

Jetzt, liebes WordPress hole mir aus der Datenbank die statische Seite mit der ID 43, zeige nichts doppelt an. Liefere mir den Inhalt (the content) .

Beende den Loop. Beende die if Abfrage.

Das war es schon. Dank und Dank Moritz Strübe.
Der sich nicht nur über Kommentare, sondern sicher auch über monitäre Dankeschöns freut.

WordPress Plugin Post Notification is a wonderful tool. It creates a static “subscribe page” if you follow the authors instructions.

But you would like to have this subscribe formular blogwide in your sidebar. This seduce your reader to subscribe much better than a click on a link to an extra static page.

» You need the ID of this static page. Its postslug is “‘post_notification_header’”.

The id of my static page with the postslug “post_notification_header” is 43.

I use this loop in sidebar.php.

» Before widget code starts or after widget code ends. Never ever between. It can’t work between this code, if you are using widgets!

 
<?php if(!is_page('43')) :?>
<p>Post Notification </p>
<?php     
rewind_posts();     
global $more;
$more = 0; 
$my_query = new WP_Query('page_id=43');
while ($my_query->have_posts()) : $my_query->the_post();
  $do_not_duplicate = $post->ID; ?>
 
  <?php the_content(); ?>
 <?php endwhile; ?>
<?php endif; ?>

I try to explain this loop.

Dear WordPress don’t show the content of static page 43 in my sidebar if it is static page 43. (Logical. Nobody would like to read the same content twice. )

Dear WordPress start again with a new loop (rewind posts) – give me the full content if there is a more-link or not (more=0).

Search my query-not your default loop. Search for page id 43 in your datacenter and give me a unique result. ( do not duplicate..).

Show me the content.

“php” your work is done (endwhile and endif).

This works like a charme for me and I hope for you too.

Thats it. The idea for this loop is the result of a big cup of coffee. . Thanks to Moritz Strübe for his great plugin.

And you know: I would like to read a comment. Or the sky will fall on your head …..

You would like to have all posts from a certain category on a static page. Sometimes with the “more-link” sometimes without. WordPress can do this, but it is tricky and static pages would never shown in feeds.

» » Deutsche Anleitung ist hier

You need this for a simple print version for all posts from certain category or for whatever else. My english isn’t the best. So I post the code. You do it and you’ll see the results.

All posts on a static page. Without more-link. No specific category. Sort Order is ASC -eldest post first.

 
<?php
/*
Template Name: All
*/
?>
 
<?php get_header(); ?>
 
<?php rewind_posts();
 
 
	$my_query = new WP_Query('order=asc&showposts=500');
         while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;
global $more;
$more = 1; ?>
 
<div class="post" id="post-<?php the_ID(); ?>">
				<h2><a href="<?php the_permalink() ?>" rel="bookmark" title=" <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
				<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
				<div class="entry">
					<?php the_content('Read the rest of this entry &raquo;'); ?>
				</div>
 
 
			</div>
 
 
 <?php endwhile; ?>
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

<?php
/*
Template Name: All
*/
?>

Dear WordPress “All” is the name of my static page.

Administration Panels==>Write==>Page==>Title==>right side you can choose this template “All”.

rewind_posts();

Dear WordPress start the loop again. Maybe not necessary but if you have another loop above it is necessary.

global $more;
$more = 1;

Dear WordPress show the full post if there is a more-link or not.

$my_query = new WP_Query('order=asc&showposts=500');
         while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>

Dear WordPress this is my loop. I need all posts. Eldest post first. Give me 500 posts.

Ok I know nobody would like to read 500 posts on one static page.;) But if you would like to have “all” you need a number of posts.

Now all the stuff to show the posts.

<?php endwhile; ?>

Dear WordPress you are ready. The end of the loop.

get header, sidebar, footer -whatever you need for your page.

All posts from a certain category on a static page. With more-link. No specific sort order.

 
<?php
/*
Template Name: All
*/
?>
 
<?php get_header(); ?>
 
<?php rewind_posts();
 
 
	$my_query = new WP_Query('cat=10&showposts=500');
         while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;
global $more;
$more = 0; ?>
 
<div class="post" id="post-<?php the_ID(); ?>">
				<h2><a href="<?php the_permalink() ?>" rel="bookmark" title=" <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
				<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
				<div class="entry">
					<?php the_content('Read the rest of this entry &raquo;'); ?>
				</div>
 
 
			</div>
 
 
 <?php endwhile; ?>
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

$my_query = new WP_Query('cat=10&showposts=500');
         while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;

Dear WordPress show me only posts from the category with the id=10.

global $more;
$more = 0;?>

Dear WordPress if you will find the more-link in a post please show it.

The rest … » please read above.

You can see the results on my Example Page. Ok there are never ever 500 posts – but you can see it works.

have fun, do it and please correct my english if you’ll find a or two or more mistakes. I will read a comment or the sky will fall on your head.

5 ways to highlight the first post or the first article in your WordPress Theme. I’m sure there are more than 5 ways, but I
love them.

This is one of my “draft posts”. One of my gathering place. Subscribe to this post because if I find out a new way to highlight my first post I would like to edit and complete this article.

Let’s start and remember : Please don’t copy & paste my code examples.

1.

highlight the 1.post on every page

<?php if(have_posts()) : the_post() ?>
              your stuff
<?php endif; ?>
 
<?php while(have_posts()) : the_post() ?>
              your stuff
<?php endwhile; ?>

2.

highlight the 1st post only on the 1st page

first post:full content, without more link

all other posts:only the excerpt

 
<?php if (have_posts()) : ?>
 
		<?php while (have_posts()) : the_post();$first++; ?>
<?php if ( 1 == $first && is_home() && !is_paged() ) { 
  the_content();
} else {
 
 the_excerpt(); 
} ?>
 
<?php endwhile; endif; ?>

3.

highlight 1st post only on the 1st page – another option

<?php global $paged $counter = 1; if(have_posts()) : while(have_posts()) : the_post();
 if ($counter == '1' && ($paged == '' || $paged < 2)) { ?>
                   your stuff
  <?php $counter++;
  } else { ?>
                your stuff
  <?php } endwhile; endif; ?>

4.

highlight h1 in the 1st post on every page

<?php if ( have_posts() ) : while ( have_posts() ) : the_post();  
      $loopcounter++; ?> 
        <div class="post">
<?php if ($loopcounter  == 1) { ?>
         <h1 class="first"><?php the_title(); ?></h1>
<?php } else { ?>
         <h1 class="second"><?php the_title(); ?></h1>
<?php } ?>
        <?php the_content(); ?>
        </div>
<?php } endwhile; endif; ?>
......

CSS for this example

 
h1.first{font-size:1.4em;
          line-height:1.7em;
          color:red;
          background-color:inherit;}
h1.second{font-size:1.1em;
          line-height:1.5em;
          color:blue;
          background-color:inherit;}

5.

This is the method I’m using here at texto.de these days.

WordPress give me one post

<?php $top_query = new WP_Query('showposts=1'); ?>
<?php while($top_query->have_posts()) : $top_query->the_post();
$do_not_duplicate = $post->ID; ?>
      <div class="first">
        <h3>the title</h3>
         <?php the_content("&raquo;&raquo; " . the_title('', '', false)); ?>
       </div>
<?php endwhile; ?>

5.a

…and now WordPress give my 7 other posts without the 1st one.

<ul class="second">
<?php $top_query = new WP_Query('showposts=7&offset=1'); ?>
<?php while($top_query->have_posts()) : $top_query->the_post();
$do_not_duplicate = $post->ID; ?>
 
<li id="post-<?php the_ID(); ?>" class="<?=($i%2)?"odd":"even";$i++;?>"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a>&nbsp; &raquo;&raquo;</li>
<?php endwhile; ?>
</ul>

My CSS for this example:

 
ul.second{margin:9px auto;
          width:97%;
          text-align:center;}
 
ul.second  li{padding:2px 0 2px 12px;	
          text-align:left;
          line-height:140%;
          background-image:url(images/texto-read-on.gif);	
          background-repeat: no-repeat;	
          background-position: 0 6px;}
 
li.odd{width:47%;
          float:right;}
li.even{width:47%;
          float:left;}
 
ul.second li.odd a,
ul.second li.even a{display:block;
          width:80%;
          float:left;
          overflow:hidden;
          white-space:nowrap;}

Safe your files and figure it out. Remember:Trial and error are good taskmaster.

>Have fun, and don’t be afraid to contact me if you have questions.

And…
Please leave a reply or :
the sky will fall on your head.

I wish you well

Joram schrieb mir eine Email. Er kann ein wenig CSS und ein bisschen HTML. Aber wenn er dann PHP irgendwo sieht traut er sich kaum dieses Wissen zu nutzen. Er würde aber gerne sein eigenes WordPress Theme gestalten und holte sich daher mein WordPress Theme blank.

Joram kommt aus Holland und kann englisch und daher ist dieses Tutorial soweit als nötig in Englisch aber mit ganz vielen Code Beispielen.

The story behind this tutorial: I’ve got an email from Joram:

I know a bit about html and css, but to use this in combination with php is a bit of a blur with me. Could you please tell me how to implement the css I’m about to write? Because writing the css is one thing, but putting the class/id tags in the html is another. I’m not sure how to write the css if I don’t know where to enter their div-tags

How To – Design Your Own WordPress Theme – Let’s start

Preambel: This post is full with code examples and so it is very long.
And I know: “All roads leed to Rome”. Here is only one of them.

And you know:==>I would like to read your comment or the sky will fall on your head…. .

• You need WordPress.
• My blank WordPress Theme.
• Time and coffee (or tea if you are ill ).
• A bit knowledge about css and html.
• An editor. Wordpad is good enough.
• Information about ‘editing files’ and ‘change chmod permission’, you’ll find the links in this comment.Thanks to Lorelle

I need the structure of a design: Layout Gala==>Layout Gala Design n.30.

Two percentage columns and one larger, with header and footer.

Remember “Murpheys Law” and save your theme files.

Layout Gala Design n.30.==>Sourcecode ==> CSS

<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{position:relative}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}

div#wrapper{float:left;width:70%}
div#navigation{float:right;width:29.9%}
div#extra{clear:both;width:100%}
</style>

Copy all between “style” and the end of this tag and paste it in the [Admincenter==>Presentation==>Theme Editor==>] style.css =>after this click:update files.

Layout Gala Design n.30.==>Sourcecode ==> HTML

We need the HTML to the CSS above. To get the overview I’m using “html comments”.

<body>
       <div id="container">
          <div id="header"><h1>Header</h1><a href="http://www.texto.de/">download this layout</a>
            </div><!--end of id header-->
 
      <div id="wrapper">
          <div id="content">
               <p><strong>1) Content here.</strong> column long long column very long ...l very.
                   </p>
              <p>very make make fill silly long long ..
                  </p>
                 and so on....
             </div><!-- end of id content-->
        </div><!--end of id wrapper-->
 
       <div id="navigation">
            <p><strong>2) Navigation here.</strong> l
            </p>
       </div><!--end of id navigation-->
 
    <div id="extra">
          <p><strong>3) More stuff here.</strong> very text make long column 
               </p>
         </div><!--end of id extra-->
 
     <div id="footer">
            <p>The footer. You can go to the ...
              </p>
       </div><!--end of id footer-->
</div><!--end of id container-->
 
</body>

Now you and I know that “div id container” is the box around. This “id container” starts after body tag and ends before it.

How To – Join CSS and HTML in PHP Files

If you know a bit about html you know that “body tag” starts after the end of the html tag. 99,9999% this you will find in header.php and in footer.php. Div id header and div id footer the same.

[Administration Panels==>Presentation==>Theme Editor==>] header.php

<body>
<div id="container">
  <div id="header">
                     <!--the blog title-->
               <h1>
		<a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a>
 
                  <!--blog description-->
                  <?php bloginfo('description'); ?>
               </h1>
       </div><!--end of id header-->
<!--header.php end-->

[Administration Panels==>Presentation==>Theme Editor==>] footer.php

<!--footer.php-->
<div id="footer">
	<p>
		<?php bloginfo('name'); ?> is proudly powered by 
		<a href="http://wordpress.org/">WordPress</a>
		<br /><a href="feed:<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
		and <a href="feed:<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.
		<!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
	        <!--necessary-->
		<?php wp_footer(); ?>
          </p>
      </div><!--end of id footer-->
</div><!--end of id container--></body>
</html>

My wordpress theme blank is full of html comments to explain all the wordpress template tags and to explain header.php ends, start of single.php and so on. You’ll see in the code above that the html tags are between this comments. And this is necessary!

View your site and you see the first result. Ok it doesn’t look very well, but you get the overview.

The next div id wrapper and div id content.

[Administration Panels==>Presentation==>Theme Editor==>] index.php

<?php get_header(); ?>
 
	<!--index.php-->
<div id="wrapper">
          <div id="content">
        <!--the loop-->
	<?php if (have_posts()) : ?>
and so on ........
 
 
                    Not Found
		Sorry, but you are looking for something that isn't here.
		<?php include (TEMPLATEPATH . "/searchform.php"); ?>
        <!--do not delete-->
	<?php endif; ?>
 
               </div><!-- end of id content-->
        </div><!--end of id wrapper-->
<!--index.php end-->
<!--include sidebar-->
<?php get_sidebar(); ?>
<!--include footer-->
<?php get_footer(); ?>

View your site. Trial and error are good taskmaster.

The next “div id navigation”. The box at the right side.

[Administration Panels==>Presentation==>Theme Editor==>] sidebar.php

<!--sidebar.php-->
<div id="navigation">
		<!--searchfield-->
....
.....
<?php } ?>
</div><!--end of id navigation-->		
 
<!--sidebar.php end-->

Don’t view your site now.It looks very strange. Header, the footer is at the left, content is grey and you got a headache.

Why? Have a look at the CSS. Div id extra clear both (wrapper, content and navigation) and we have no div id extra, because there is no “extra.php” or another template in this theme to create an “extra stuff”.

You have to create a new template and tell wordpress to use this.

And that’s why I’m using Layout Gala Design n.30 as an example.

1. Open your editor. Save the empty file as extra.php. Upload it in your theme folder.
wp-content/themes/yourtheme/.
2. [Administration Panels==>Presentation==>Theme Editor==>] extra.php

<!--extra.php-->
 <div id="extra">
          <p><strong>3) More stuff here.</strong> very text make long column 
               </p>
         </div><!--end of id extra-->
<!--end of extra.php-->

The html above tell us, we need this extra.php between sidebar.php and footer.php.

[Administration Panels==>Presentation==>Theme Editor==>] index.php

 
</div><!-- end of id content-->
        </div><!--end of id wrapper-->
<!--index.php end-->
<!--include sidebar-->
<?php get_sidebar(); ?>
 
<!--include extra.php-->
<?php include (TEMPLATEPATH . '/extra.php'); ?>
 
<!--include footer-->
<?php get_footer(); ?>

With this

<!--include extra.php-->
<?php include (TEMPLATEPATH . '/extra.php'); ?>

you can tell wordpress every new template you need. /extra.php or /whateveryouneed.php or /sample.php and so on.

View your site and I’m sure it looks much better.

The template hierachie of wordpress

WordPress theme blank have page.php, single.php, search.php two archives.php. You can delete all this files and you are ready with your new design. To understand, please read Codex and have a look at my new sheet about the template hierarchie. I can’t explain it better. (Not in english )

If you click on an article, static page or an archive/category you will see a very creative website. Because div id wrapper and div id content and the new template extra.php are missing.

[Administration Panels==>Presentation==>Theme Editor==>]archive.php

<?php get_header(); ?>
<div id="wrapper">
          <div id="content">
	<!--the loop-->
 
		<?php if (have_posts()) : ?>
 
......
....
<!--do not delete-->
	<?php endif; ?>
 
	       </div><!-- end of id content-->
        </div><!--end of id wrapper-->
<!--archive.php end-->
 
<?php get_sidebar(); ?>
<!--include extra.php-->
<?php include (TEMPLATEPATH . '/extra.php'); ?>
<!--include footer-->
<?php get_footer(); ?>

[Administration Panels==>Presentation==>Theme Editor==>]single.php

<!--single.php-->
	<div id="wrapper">
            <div id="content">
<!--loop-->			
  <?php if (have_posts()) :
......
......
Sorry, no posts matched your criteria.
 
<!--do not delete-->
<?php endif; ?>
 
	</div><!-- end of id content-->
        </div><!--end of id wrapper-->
<!--single.php end-->
 
 
<?php get_sidebar(); ?>
<!--include extra.php-->
<?php include (TEMPLATEPATH . '/extra.php'); ?>
<!--include footer-->
<?php get_footer(); ?>

I’m shure you understand==> search.php, the second archives.php, page.php.

Ok and the stuff in single.php and the other files?

This is “one post”.

 <!--the loop-->
	<?php if (have_posts()) : ?>
		<!--the loop-->
		<?php while (have_posts()) : the_post(); ?>
 
			<!--post title as a link-->
				<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
		     <!--post time-->	
                     <?php the_time('F jS, Y') ?>
 
                      <!--post author-->
                      <?php the_author() ?>
 
				<!--post text with the read more link-->
					<?php the_content('Read the rest of this entry &raquo;'); ?>
				<!--show categories, edit link ,comments-->
 
				Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?>
 
 
	        <!--end of one post-->
		<?php endwhile; ?>

Safe your files and figure it out. Remember:Trial and error are good taskmaster.

… Have fun, and don’t be afraid to contact me if you have questions.

and .. if you would like to relaxe after all this “css, html, php ” – solve Sudoku online

und noch was …

Vom 14.03.07 bis zum 25.August 2011 wurde dieser Artikel 161 879 mal gelesen, dann habe ich den sichtbaren PostReadCounter aus Performancegründen abgeschaltet.