27 {{ upvoteCount | shortNum }}
27 {{ upvoteCount | shortNum }}

Wordpress theme development question

by ronc0011
24 replies
  • WEB DESIGN
    • |
So I'm working on learning theme development in Wordpress I've worked so far with tutorials from various sites claiming boosting tutorials on WP theme development. I am currently working from the Wordpress .org site and I just created an index.php page from WP.org's site i.e "The worlds simplest index page and I still get a page that doesn't display at all. Even if I go in and set a text widget in the side bar through the admin panel Also I have made post to the site under a different theme so there are post in the database.

So here is the code from Wordpress.org's codex page i.e. "Worlds simplest index page.

Code:
 
<?php
get_header();
if (have_posts()) :
   while (have_posts()) :
      the_post();
      the_content();
   endwhile;endif;
get_sidebar();
get_footer(); 
?>

Anyone got any ideas about what I'm missing . Because this doesn't appear to do anything at all.
Now if I select one of the themes that come with WP everything works fine SO what's missing from this?
#development #question #theme #wordpress
  • Profile picture of the author David V
    Originally Posted by ronc0011 View Post

    ......So here is the code from Wordpress.org's codex page i.e. "Worlds simplest index page.
    ......
    The code you pasted is from the Classic theme of WordPress Version 1.5!
    Tutorials, examples at wordpress can be tricky since many of them include things from old versions.

    Try this:
    PHP Code:
    <?php
    get_header    (); ?>

            <?php if ( have_posts() ) : ?>
                <?php /* Start the Loop */ ?>
                <?php while ( have_posts() ) : the_post(); ?>
                    <?php get_template_part( 'content', get_post_format() ); ?>
                <?php endwhile; ?>

    <?php get_sidebar(); ?>
    <?php get_footer    (); ?>
    EDIT: Forgot to mention that the "get_template_part('content'.......... will pull in the content from the content.php which is now the standard in the default 2012 theme.
    {{ DiscussionBoard.errors[7616096].message }}
    • Profile picture of the author ronc0011
      Originally Posted by David V View Post

      The code you pasted is from the Classic theme of WordPress Version 1.5!
      Tutorials, examples at wordpress can be tricky since many of them include things from old versions.

      Try this:
      Code:
      <?php
get_header(); ?>
 
        <?php if ( have_posts() ) : ?>
            <?php /* Start the Loop */ ?>
            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', get_post_format() ); ?>
            <?php endwhile; ?>
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>


      Thanks, I'll give it a try right now...
      {{ DiscussionBoard.errors[7616133].message }}
      • Profile picture of the author ronc0011
        Nope doesn't work
        {{ DiscussionBoard.errors[7616188].message }}
        • Profile picture of the author David V
          Originally Posted by ronc0011 View Post

          Nope doesn't work
          What do you have in the theme folder for files? (index.php, header.php, etc...)
          Edit: The code works for me, so something is missing.

          Are you receiving an error?
          {{ DiscussionBoard.errors[7616239].message }}
  • Profile picture of the author David V
    @ronc0011, this will also work and is even more minimal, but I wouldn't build a theme this way.
    PHP Code:
    <?php
    get_header    ();
            if (     have_posts() );
                while (     have_posts() ) : the_post();
                        get_post_format();
                endwhile;
    get_sidebar();
    get_footer(); ?>
    Note that I removed the get_template_part which is not advised. get_template_part is the way to go.
    The 2012 theme is a great base example using get_template_part, custom templates, and more.
    {{ DiscussionBoard.errors[7616160].message }}
  • Profile picture of the author Patrick
    Try this...

    Code:
    <?php get_header() ?>

    <?php while ( have_posts() ) : the_post() ?>
    <a href="<?php the_permalink() ?>"><?php the_title() ?></a>
    <?php the_content(); ?>
    <?php endwhile ?>

<?php get_sidebar() ?>
<?php get_footer() ?>
    Signature
    Website Development | Shopify Development | WordPress Development |Headless Development
    {{ DiscussionBoard.errors[7616291].message }}
    • Profile picture of the author David V
      Not sure what you've created for files in the test theme folder, but you definately need more then index.php

      Here's a nice simple info-graphic that will give you a simple rundown.
      {{ DiscussionBoard.errors[7616304].message }}
      • Profile picture of the author David V
        @ronc0011, if your trying to learn wp development basics, I think starting with what you indicated in the original OP is probably stepping back "too far" and will make it tougher to grasp. Starting at the loop like that really doesn't lay the foundation.
        I have found a lot of people get it faster by converting a simple html site to wordpress.
        This forces you to create the separate parts, write a little code, and when your done you'll be much more comfortable with it.
        Hope it helps.
        {{ DiscussionBoard.errors[7616478].message }}
        • Profile picture of the author ronc0011
          Originally Posted by David V View Post

          @ronc0011, if your trying to learn wp development basics, I think starting with what you indicated in the original OP is probably stepping back "too far" and will make it tougher to grasp. Starting at the loop like that really doesn't lay the foundation.
          I have found a lot of people get it faster by converting a simple html site to wordpress.
          This forces you to create the separate parts, write a little code, and when your done you'll be much more comfortable with it.
          Hope it helps.

          Actually I think I have a reasonable grasp of what WP is doing but I think there is some key piece of information I haven't found yet that's stopping my theme from working I actually have some background with coding and programming i.e programming languages so I get it that WP is pulling from different files like header.php and footer.php to build an HTML page to display That's why I can watch it work just fine using a theme that came with WP and conclude that Mu WP install is working as it should and that the problem is with the code in my theme files. Ultimately I probably will try the tact you are suggesting but in the mean time I want to know why my page isn't running correctly right now.
          {{ DiscussionBoard.errors[7616664].message }}
          • Profile picture of the author David V
            Ok, sounds good.

            I just so happen to bump into your post on this topic at wordpress.org and you posted the files you were using there.

            404.php
            archive.php
            attachment.php
            author.php
            category.php
            comments.php
            date.php
            footer.php
            front-page.php
            functions.php
            header.php
            home.php
            image.php
            index.php
            rtl.css
            search.php
            sidebar.php
            style.css
            tag.php
            taxonomy.php

            Wordpress will only grab the index.php if nothing else exists.
            You didn't say if your testing with a post or page, but by this list if your on the home of the site, it will grab the home.php first. So if your editing the index.php you won't see any change under this assumption.
            Really good hierarchy example here.
            {{ DiscussionBoard.errors[7616718].message }}
            • Profile picture of the author David V
              I see a couple things with the code you posted. Will show you the correction in a few minutes......
              {{ DiscussionBoard.errors[7616743].message }}
              • Profile picture of the author ronc0011
                So you think maybe if I get rid of home.php it might start working. Actually I copied those files from ... I think it was Twenty Ten maybe
                {{ DiscussionBoard.errors[7616793].message }}
                • Profile picture of the author David V
                  Originally Posted by ronc0011 View Post

                  So you think maybe if I get rid of home.php it might start working. Actually I copied those files from ... I think it was Twenty Ten maybe
                  I don't think it will work, no.
                  Either there was an issue with pasting the code into the forum post here, or the code has a bunch of problems.
                  I'm going to paste the code for each file you listed below in a few...
                  My dog has to go "do his thing" first....
                  {{ DiscussionBoard.errors[7616812].message }}
                  • Profile picture of the author ronc0011
                    Originally Posted by David V View Post

                    I don't think it will work, no.
                    Either there was an issue with pasting the code into the forum post here, or the code has a bunch of problems.
                    I'm going to paste the code for each file you listed below in a few...
                    My dog has to go "do his thing" first....

                    Cool


                    OK so I just Copied the content from index.php from Twenty Ten into the index file on my new test theme still nothing. So I'm looking at header.php from Twenty Ten and there's a lot of stuff there. Appears to be the first portion of the <body> tag. I just copied that into the header.php file in my new test theme and still getting nothing just empty space.
                    Just a note the Warrior post widget really like to jam up the code you put in it I always have to go back and try to fix what I've pasted in because it always screws it up
                    {{ DiscussionBoard.errors[7616840].message }}
                    • Profile picture of the author Patrick
                      Originally Posted by ronc0011 View Post

                      Cool


                      OK so I just Copied the content from index.php from Twenty Ten into the index file on my new test theme still nothing. So I'm looking at header.php from Twenty Ten and there's a lot of stuff there. Appears to be the first portion of the <body> tag. I just copied that into the header.php file in my new test theme and still getting nothing just empty space.
                      Just a note the Warrior post widget really like to jam up the code you put in it I always have to go back and try to fix what I've pasted in because it always screws it up
                      Wow you guys are still on it....

                      Copying the twenty ten index file won't help, it uses the loop file also so you need to copy the loop file also. I posted a simple solution up there but you ignored haha.

                      And by the way if you really want to learn WP, you can spend one hour reading this post here Theme Development « WordPress Codex

                      Spending 5 hours in forums exchanging messages and clicking thanks, and then replying won't help you learn WP ever.
                      Signature
                      Website Development | Shopify Development | WordPress Development |Headless Development
                      {{ DiscussionBoard.errors[7616892].message }}
                      • Profile picture of the author David V
                        Originally Posted by schwarzes View Post

                        Wow you guys are still on it....
                        Spending 5 hours in forums exchanging messages and clicking thanks, and then replying won't help you learn WP ever.
                        @ schwarzes - BIG assumption on your part!
                        I just got back from a 3 mile walk with my dog.....don't assume we're all sitting here at the computer just because it say's we're logged in.....

                        Anyway..

                        @ronc0011, You can't mix the 2010 and 2012 themes.

                        Assuming you have your root like you posted at wordpress.org with the
                        directories: css/js/inc

                        Then open the following add the code below.
                        This is a major stripped version like you were trying to do and will let you test a post, page, and a home page template.

                        For the index.php
                        PHP Code:
                        <?php
                        /**
                         * The main template file.
                         *
                         * This is the most generic template file in a WordPress theme
                         */

                        get_header(); ?>

                            <div id="primary" class="site-content">
                                <div id="content" role="main">

                                    <?php while ( have_posts() ) : the_post(); ?>
                                        <?php if ( has_post_thumbnail() ) : ?>
                                            <div class="entry-page-image">
                                                <?php the_post_thumbnail(); ?>
                                            </div><!-- .entry-page-image -->
                                        <?php endif; ?>

                                        <?php get_template_part( 'content', 'page' ); ?>

                                    <?php endwhile; // end of the loop. ?>

                                </div><!-- #content -->
                            </div><!-- #primary -->

                        <?php get_sidebar(); ?>
                        <?php get_footer                        (); ?>
                        For the home.php
                        PHP Code:
                        <?php
                        /**
                         * Template Name: Home Page Template
                         *
                         */

                        get_header(); ?>

                            <div id="primary" class="site-content">
                                <div id="content" role="main">

                                    <?php while ( have_posts() ) : the_post(); ?>
                                        <?php if ( has_post_thumbnail() ) : ?>
                                            <div class="entry-page-image">
                                                <?php the_post_thumbnail(); ?>
                                            </div><!-- .entry-page-image -->
                                        <?php endif; ?>

                                        <?php get_template_part( 'content', 'page' ); ?>

                                    <?php endwhile; // end of the loop. ?>

                                </div><!-- #content -->
                            </div><!-- #primary -->

                        <?php get_sidebar(); ?>
                        <?php get_footer                        (); ?>
                        For the header.php
                        PHP Code:
                        <?php
                        /** 
                         * My header.php file
                         * 
                         **/                        ?><!DOCTYPE html>

                        <html <?php language_attributes(); ?>>
                        <head>
                        <meta charset="<?php bloginfo( 'charset' ); ?>" />
                        <title>TEST TITLE</title>
                        <link rel="profile" href="http://gmpg.org/xfn/11" />
                        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

                        <?php wp_head(); ?> <!-- Need this header hook here before head close tag-->
                        </head>

                        <body <?php body_class(); ?>>
                        <div id="page" class="hfeed site">
                            <header id="masthead" class="site-header" role="banner">
                                <hgroup>
                                    <h1 class="site-title">TEST H1 TITLE</h1>
                                    <h2 class="site-description">TEST H2 TITLE</h2>
                                </hgroup>

                            </header><!-- Close header div #masthead -->

                            <div id="main" class="wrapper">
                        For the footer.php
                        PHP Code:
                        <?php
                        /**
                         * The template for displaying the footer.
                         *
                         */
                        ?>
                            </div><!-- Close the #main .wrapper opened in header.php -->
                            <footer id="colophon" role="contentinfo">
                                <div class="site-info">
                                    <h2>SITE FOOTER</h2>
                                </div><!-- .site-info -->
                            </footer><!-- #colophon -->
                        </div><!-- #page -->

                        <?php wp_footer(); ?> <!-- Footer hook must be here -->
                        </body>
                        </html>
                        For the sidebar.php
                        PHP Code:
                        <?php
                        /**
                         * The sidebar containing the main widget area.
                         *
                         */
                        ?>

                            <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
                                <div id="secondary" class="widget-area" role="complementary">
                                    <?php dynamic_sidebar( 'sidebar-1' ); ?>
                                </div><!-- #secondary -->
                            <?php endif; ?>
                        For the content.php
                        PHP Code:
                        <?php
                        /**
                         * The default template for displaying content.
                         *
                         */
                        ?>

                            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                                
                                <header class="entry-header">
                                    
                                    <h1 class="entry-title">H1 CONTENT TEST</h1>
                                    
                                </header><!-- .entry-header -->

                                
                                <div class="entry-content">
                                    <p>Entry content test</p>
                                </div><!-- .entry-content -->

                            </article><!-- #post -->
                        For the page.php
                        PHP Code:
                        <?php
                        /**
                         * The template for displaying all pages.
                         *
                         */

                        get_header(); ?>

                            <div id="primary" class="site-content">
                                <div id="content" role="main">

                                    <?php while ( have_posts() ) : the_post(); ?>
                                        <?php get_template_part( 'content', 'page' ); ?>
                                    <?php endwhile; // end of the loop. ?>

                                </div><!-- #content -->
                            </div><!-- #primary -->

                        <?php get_sidebar(); ?>
                        <?php get_footer                        (); ?>
                        For the single.php
                        PHP Code:
                        <?php
                        /**
                         * The Template for posts.
                         *
                         */
                        get_header(); ?>

                            <div id="primary" class="site-content">
                                <div id="content" role="main">

                                    <?php while ( have_posts() ) : the_post(); ?>

                                        <?php get_template_part( 'content', get_post_format() ); ?>

                                    <?php endwhile; // end of the loop. ?>

                                </div><!-- #content -->
                            </div><!-- #primary -->

                        <?php get_sidebar(); ?>
                        <?php get_footer                        (); ?>
                        For the content-aside.php
                        PHP Code:
                        <?php
                        /**
                         * The template for displaying content in aside post format.
                         *
                         */
                        ?>

                            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                                <div class="aside">
                                    <h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
                                    <div class="entry-content">
                                        <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?>
                                    </div><!-- .entry-content -->
                                </div><!-- .aside -->

                                <footer class="entry-meta">
                                    <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php echo get_the_date(); ?></a>
                                    <?php if ( comments_open() ) : ?>
                                    <div class="comments-link">
                                        <?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentytwelve' ) . '</span>', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>
                                    </div><!-- .comments-link -->
                                    <?php endif; // comments_open() ?>
                                    <?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?>
                                </footer><!-- .entry-meta -->
                            </article><!-- #post -->
                        For the content-page.php
                        PHP Code:
                        <?php
                        /**
                         * The template for displaying content in page.
                         *
                         */
                        ?>

                            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                                <header class="entry-header">
                                    <h1 class="entry-title"><?php the_title(); ?></h1>
                                </header>

                                <div class="entry-content">
                                    <p>This is a page test</p>
                                    <?php the_content(); ?>
                                </div><!-- .entry-content -->
                            </article><!-- #post -->
                        and of course you still need the style.css in the root.

                        This works....it's very bare-bones.....but test away..
                        {{ DiscussionBoard.errors[7617145].message }}
                      • Profile picture of the author ronc0011
                        I think what would be really helpful would be just the barest minimum flies and corresponding code to get a working theme.
                        Surely someone out there has such a thing and surely there must be such a thing.
                        {{ DiscussionBoard.errors[7617216].message }}
                        • Profile picture of the author David V
                          Originally Posted by ronc0011 View Post



                          Surely someone out there has such a thing and surely there must be such a thing.
                          There's lot's of them. The only thing that can cause a little confusion is every author has there own coding style...

                          Most themes are procedural, but some are more towards OOP.
                          Ever seen a theme with a virtually blank style.css, header.php, and footer.php?
                          This puzzles many people trying to edit their themes.

                          All depends on the coding style.
                          Search for bare bones html5 frameworks

                          Honestly, the 2012 theme is fairly straightforward without any bells or whistles.
                          {{ DiscussionBoard.errors[7617265].message }}
                        • Profile picture of the author yukon
                          Banned
                          Originally Posted by ronc0011 View Post

                          I think what would be really helpful would be just the barest minimum flies and corresponding code to get a working theme.
                          Surely someone out there has such a thing and surely there must be such a thing.


                          This is the bare minimum you need to create a Wordpress theme (two files):
                          • index.php
                          • style.css
                          1. Create both files with the correct file extension.
                          2. Zip the file/folder.
                          3. Upload the zip file to host/Wordpress.

                          It's a lot easier to setup an offline server like WAMP (free), then install Wordpress offline, this way you can mess around with the file all day long without FTP/Host. Make a backup of the theme as you keep adding new code. If you break something, run the backup theme & keep working...






                          index.php
                          HTML Code:
                          <!DOCTYPE html>
<head>
<title>Wordpress theme</title>
</head>
<html>
<body>

<h1>Wordpress theme</h1>

<p>Do some stuff...</p>

</body>
</html>








                          style.css
                          HTML Code:
                          /*
Theme Name: My simple Wordpress theme
Theme URI: http://www.domain.com
Description: My theme description.
Version: 1.0
Author: Author Name
Author URI: http://www.domain.com
*/
                          {{ DiscussionBoard.errors[7624371].message }}
      • Profile picture of the author ronc0011
        OK, Here is a list of the files I currently have present in the test site

        404.php
        archive.php
        attachment.php
        author.php
        category.php
        comments.php
        date.php
        footer.php
        front-page.php
        functions.php
        header.php
        home.php
        image.php
        index.php
        rtl.css
        search.php
        sidebar.php
        style.css
        tag.php
        taxonomy.php

        Most if not all of these files were created using my editor which gives them a "Starter block of code i.e....
        Code:
         
<?php
 
?>
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
</body>
</html>


        So all of these files have just this starter block of code except for files such as header.php, Index.php, sidebar.php, and footer.php where I have coded stuff according to instruction or example as found through studying this business. Otherwise all other files are just as they are created through the "Add New item" menu feature in the editor. so far this is what is in the four main files

        header.php...

        Code:
        <?php/** *My header.php file **/?><!DOCTYPE html><html><head><meta charset="utf-8"/><title>org Theme</title><link rel="stylesheet"href="<?phpbloginfo_rss('stylesheet_url');?>"></head><body><div id="wrapper"><div id="header"></div><h1>HEADER</h1></body></html>


        index.php

        Code:
         
<?phpget_header();?><?phpif( have_posts()):?><?php/* Start the Loop */?><?phpwhile( have_posts()): the_post();?><?phpget_template_part('content',get_post_format());?><?phpendwhile;?><?phpget_sidebar();?><?phpget_footer();?>

        sidebar.php

        Code:
        sidebar.php<div id="sidebar"><ul id="sidebar"><?phpif(dynamic_sidebar());?><li id="about"><h2>About</h2><p>This is my blog</p><link id="links"><h2>Links</h2><ul><li><a href="http://example.com">Example</a></li></ul></li><?phpendif;?></ul></div>
        footer.php

        Code:
         
<div id="footer"><h1>FOOTER</h1></div></div></body></html>
        {{ DiscussionBoard.errors[7616623].message }}
  • Profile picture of the author David V
    Ok, this threads getting a little long so I'll wrap up my thoughts by pointing out these pretty bare frameworks. All are good.
    Bones
    Handcrafted WP Starter
    Starkers

    Good luck!

    Note: All the code below is only within the context of the question asked. You cannot use these codes/files to create a theme, very incomplete.
    {{ DiscussionBoard.errors[7617346].message }}
  • Profile picture of the author BerlinSianipar
    Wordpress theme development is a process of transforming static HTML pages to dynamic pages with PHP functions that packed in WordPress.

    So, first you have to master HTML and CSS and a little PHP, and then you are good to go.

    Tutsplus.com has free PSD to WordPress theme video tutorial series that you can learn from. It's a comprehensive tutorial from Adi Purdila. You must see it if you are learning about WordPress theme development.
    {{ DiscussionBoard.errors[7619793].message }}
  • Profile picture of the author leliahawkins31
    TRY THIS,

    download another wordpress blog thesis/themes that you had used and go the the hosting cpanel admin, go to files managers, got the the theme that you currently installed and located the PROBLEM where it is then replace the codes using the codes you have just downloaded(NEW), then you done.

    hope this will work for you!
    thanks
    {{ DiscussionBoard.errors[7619804].message }}
  • Profile picture of the author SteveJohnson
    As was said earlier, the required files for a WP theme are index.php, and style.css. That's ALL.

    It sounds like you are (were?) afflicted with 'blank screen syndrome'. Out-of-the-box WP installs are set to suppress errors. Open your wp-config.php file; toward the bottom, find
    Code:
    define( 'WP_DEBUG', false );
    change 'false' to 'true'. Save and upload the file.

    Your stylesheet.css file needs to have the beginning comment 'header' section, nothing more. You'll (obviously) get unstyled output, but at least you can make sure things are working.

    For the index.php file, the only essential part is the WordPress Loop. If you don't have that, you won't get any output. SOOOOO, to test, you can put this in index.php:

    Code:
    <?php
if ( have_posts() ) :
  while ( have_posts() ) :
    the_post();
    the_content();
  endwhile;
endif;
    Nothing more, nothing less. When you hit your URL, you should see the text of the latest posts ( that's what "the_content()" line spits out ); how many you see is determined by the setting on the Settings > Reading page in your Dashboard.

    Notice there is NO closing PHP tag ( ?> ) at the end of the file. Closing tags are unnecessary and actually go against WP coding convention.

    If your theme works, NOW you can start expanding it out to add HTML elements, etc.

    The above obviously won't get you anywhere near to a finished theme, it's kind of like WordPress's version of programming's "Hello world."
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[7627654].message }}

Trending Topics