New Theme creation

Question

I am looking into creating my first ever WordPress theme. I want to move my current look and feel that I have created via html / css into WordPress.

What I would like, is to have a list of categories on my home page.

Then clicking on one of these categories will bring up a page which will display a list of posts on it with some description of the posts.

Then if you click on a single post in this page it will load up a single page with a single post displayed on to it. (the full description will be displayed here)

I'm not good at PHP as I mainly know HTML and CSS so if someone can guide me through how to do this or even point me in the direction of a related theme I would appreciate it.

an idea of what I want, looks like this. This one is my current site created in HTML/CSS.

Answer 1

I found Ian Stewart's Theme Development tutorial a wonderful one to start from the scratch with a very little knowledge on WordPress.

How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial

Hope the explanation there could help you a lot to understand which code block's for what. So you can modify yours as you want. :)

Answer 2

Well, you need index.php, category.php, single.php, header.php and footer.php.

The code should be something like this:

index.php

<?PHP
$category_ids = get_all_category_ids();
sort($category_ids);
foreach($category_ids as $cat_id):?>
      <!-- Category Start -->
      <div class="category" id="cat-<?PHP echo $cat_id; ?>">
        <!-- Category Title -->
        <div class="cat-title"> <a href="<?PHP echo get_category_link( $cat_id ); ?>">
          <h1><?PHP echo get_cat_name($cat_id); ?></h1>
          </a> </div>
        <!-- // Category Title End -->
      </div>
      <!-- // Category End -->
<?PHP endforeach; ?>

<?PHP get_footer(); ?>

category.php

<?PHP get_header(); ?>
  <?PHP if( have_posts() ): while( have_posts()) : the_post(); ?>
  <!-- Content Post Start -->
  <div class="content-post">
    <h1><a href="<?PHP the_permalink(); ?>">
      <?PHP the_title(); ?>
      </a> </h1>
  </div>
  <!-- // Content Post End -->
  <?PHP         endwhile;
            endif;
    ?>
</div>
<!-- // Content End -->
<?PHP get_footer(); ?>

single.php

<?PHP get_header(); ?>
<!-- Content Start -->
  <?PHP if( have_posts() ): while( have_posts()) : the_post(); ?>
  <!-- Content Post Start -->
  <div class="content-post">
    <h1><a href="<?PHP the_permalink(); ?>">
      <?PHP the_title(); ?>
      </a> </h1>
      <div class="post-info">
      <div class="date"><?PHP the_time('M d, Y'); ?></div> BY <?PHP the_author(); ?>
      </div>
    <?PHP echo get_post_image(); ?>
    <?PHP the_content(); ?>
  </div>
  <!-- // Content Post End -->
</div>
<!-- // Content End -->
<?PHP get_footer(); ?>

At header.php you should include you css/js files.

This link can help you to build the structure of the wordpress theme

Answer 3

You Can use the Parent / Child theme structure in wordpress to develop your own theme and style it as per your need. Minimal CSS Theme e.g. http://rtcamp.com/rtpanel/