DisplayCcontent of a Page Template

Hi there.

I'm building an one page WordPress theme. I have created a template with following code:

<?php get_header();?>

    <?php

        $args = array(
            'post_type' =>  'page'
            );
        $the_query = new WP_Query($args);

    ?>

    <?php if( have_posts() ) : while( $the_query->have_posts() ) : $the_query->the_post(); ?>

    <?php global $post; ?>

	<article id="<?php echo $post->post_name; ?>" <?php post_class(); ?>>

	    <?php the_content(); ?>

	</article><!-- #post-## -->

    <?php endwhile; endif; ?>

<?php get_footer();?>

Now, everything is actually working fine. However, if I assign another template to one of the pages, nothings is shown. Or in other words, I would like to show information from a template on a certain page, but noting is shown, only if I add some code/text to the content area on the actual page.

Since I couldn't get it to work, I went back to show following code on the homepage.php template with no additional loop (nothing is shown on the website):

<header>
	<div class="container">
	    <div class="row">
	        <div class="col-lg-12">
	            <img class="img-responsive" src="<?php the_field( 'profile_picture' ); ?>" alt="">
	            <div class="intro-text">
	                <span class="name"><?php the_field('name');?></span>
	                <hr class="star-light">
	                <span class="skills"><?php the_field( 'job_title_1' );?> - <?php the_field( 'job_title_2' );?> - <?php the_field( 'job_title_3' );?></span>
	            </div>
	        </div>
	    </div>
	</div>
</header>

This might have to do with a double loop, however, I can't seem to get it to work.

Thanks a lot!
Sincerely,
Mika

  • Mika

    Hi Jack.
    Thanks for your reply.

    I would like to show the html (with the PHP) when selection the homepage template.

    So for example, on the homepage/landing page when people enter the website, I would like to display the html code with the php as shown above.

    The way the administrator will accomplish the setup of the homepage is is simply to choose the Homepage template under "Pages". I have already done that, and the Homepage Template already contain the HTML structor. However, nothing is shown on the actual page.

    Now, if I added the html from the homepage.php file into the content area of the Homepage, it works fine. However, that's not my goal, I want to display the content (html/php) from the template on the screen. Does it make sense?

    Sincerely,
    Mika

  • Mika

    Hey Jack.

    Doing great, thanks! I hope you are doing fine as well :slight_smile:

    I'll try to explain what I'm trying to accomplish very clearly.

    1. My index.php is where all the information (from the different pages) for the "one-page" theme is showing. It contains this code:

    <?php get_header();?>
    
        <?php
    
            $args = array(
                'post_type' =>  'page'
                );
            $the_query = new WP_Query($args);
    
        ?>
    
        <?php if( have_posts() ) : while( $the_query->have_posts() ) : $the_query->the_post(); ?>
    
        <?php global $post; ?>
    
    	<article id="<?php echo $post->post_name; ?>" <?php post_class(); ?>>
    
    	    <?php the_content(); ?>
    
    	</article><!-- #post-## -->
    
        <?php endwhile; endif; ?>
    
    <?php get_footer();?>

    2. I have created several templates to make the theme easy to work with. I have made 4 templates. homepage.php, portfolio.php, about.php and contact.php.

    3. I want to show the information (html and php output) from each template and not the actual page content.

    4. Right now, I'm pulling out the content of the page with the <?php the_content(); ?> code. This could be an issue because I actually do not with to show the information from the content area because there will be none since I have removed that field and use the Advanced Custom Fields to make fields where the user can add inputs such as title, description, occupations and so on. Once again, I want to show the information from template.

    5. Right now, I have made a page and called it "Homepage". And, I have assigned the Homepage(.php) template to that page.

    6. Now we enter the issue; nothing is shown on the index.php. Or in other words, the page isn't shown, which means the information from the template isn't shown on the index.php/the one-pager.

    7. My questions is: How can I make the content (html) from the template appear on the index.php?

    8. The code I have in my homepage.php is this which is template available for selection:

    /*
    
    	Template Name: Homepage
    
    */
    
    	<header>
    	<div class="container">
    	    <div class="row">
    	        <div class="col-lg-12">
    	            <img class="img-responsive" src="<?php the_field( 'profile_picture' ); ?>" alt="">
    	            <div class="intro-text">
    	                <span class="name"><?php the_field('name');?></span>
    	                <hr class="star-light">
    	                <span class="skills"><?php the_field( 'job_title_1' );?> - <?php the_field( 'job_title_2' );?> - <?php the_field( 'job_title_3' );?></span>
    	            </div>
    	        </div>
    	    </div>
    	</div>
    </header>

    Does this make any sense?

    Sincerely,
    Mika

  • Mika

    By the way,

    I just tried to add the <? php get_header(); ?> to the homepage.php template file and then viewed the http://localhost:8888/freelancer/homepage/ (the page that is using the "homepage" template.

    Now, the page is showing completely proper there, however, since I'm creating a one page theme I want to query all the pages on the homepage and show the information from the template there.

    I hope this may help the process of finding a solution to my issue.

    Thanks a lot!
    Sincerely,
    Mika

  • Vinod Dalvi

    Hi Mika,

    Thank you for your detailed reply.

    I want to correct one thing that if you are developing a one page WordPress theme then why are you developing the following template files?

    homepage.php, portfolio.php, about.php and contact.php.

    I think you don't need the above files to develop single page theme and you can develop it using only the following theme files.

    style.css
    index.php
    header.php
    footer.php
    sidebar.php
    functions.php
    /js/ ( If any custom javascript files )
    /css/ ( If any custom css files )
    /templates/ ( If any template part files )
    screenshot.png

    You will have to develop separate section in the index.php file to display the information about portfolio, about and contact.

    Please advise if you have any questions.

    Regards,
    Vinod Dalvi

  • Mika

    Hey Vinod.

    Thanks a lot for your reply.

    In many ways, I'm still new to the theme building aspect of Wordpress, so please forgive my ignorance.

    I want to make the theme flexible so the user only loads a certain template part if that template has been chosen under a certain page.

    So for example, there are 4 pre-made templates/sections the user can use:

    Homepage (top page)
    Portfolio
    About
    Contact

    Let's say an user only want to display the 1) Homepage, 2) Portfolio and 3) Contact page, then I want to give them the freedom so they don't have to add the about section.

    Does that make sense?

    Once again, thanks a lot!
    Sincerely,
    Mika

  • Jack Kitterhing

    Hi there Mika,

    Hope you're well today, that certainly does make sense. :slight_smile:

    I'm just wondering how you plan on offering this to the user?

    For example, are you planning on a option page whereas they can pick the blocks as such they want on the one page theme.

    Or is each block/template completely separate and they have to have it as is?

    Did you plan on extending the WordPress theme customizer for this?

    Thanks!

    Kind Regards
    Jack.

  • Vinod Dalvi

    Hi Mika,

    I want to make the theme flexible so the user only loads a certain template part if that template has been chosen under a certain page.

    Yes this is achievable and you can develop as many template part files as you want to modularize code.

    I recommend you to create template parts but don't create main templates as it will make theme development complex for single page theme.

    You can develop theme options to let users choose which block they want to display and add the conditions in the index.php file to include the template parts so that it can be displayed.

    Cheers,
    Vinod Dalvi

  • Mika

    Hey Vinod,

    Thanks a lot for your reply.

    I think I'm following your logic. However, if I want to add certain information into a certain section using Advanced Custom Fields like this:

    1. http://col323webdesign.com/wp-content/uploads/2014/06/Screen-Shot-2014-06-23-at-11.11.39-PM.png

    2. http://col323webdesign.com/wp-content/uploads/2014/06/Screen-Shot-2014-06-23-at-11.11.49-PM.png

    Then I assume I would have to connect each template (section) to a certain page? Isn't that right? And if so, how would I go about doing that.

    Additonally, how would you recommend that I include my template parts? Using something like:
    <?php get_template_part( 'content', 'homepage' );?> or <?php get_template_part( 'index', 'homepage' );?>

    Thanks a lot!
    Sincerely,
    Mika

  • Jack Kitterhing

    Hi there Mika,

    Hope you're well today and thanks for your question.

    The get_template_part, should be slug and name, from the example on the link.

    <?php get_template_part( 'loop', 'index' ); ?>
    
    will do a PHP require() for the first file that exists among these, in this priority:
    
            wp-content/themes/twentytenchild/loop-index.php
            wp-content/themes/twentyten/loop-index.php
            wp-content/themes/twentytenchild/loop.php
            wp-content/themes/twentyten/loop.php

    So yours would do a require on content-homepage.php or index-homepage.php depending on which you use, here's the template hierarchy http://codex.wordpress.org/Template_Hierarchy

    You'd need to build a theme options admin panel or use the standard WP customizer and hook that up, you may even want to use something like the Options framework https://wordpress.org/plugins/options-framework/

    Advanced custom fields, wouldn't be connected to a template part, rather they are connected to a post type. :slight_smile:

    Thank you!

    Kind Regards
    Jack.

  • Mika

    Hey Jack.

    Thank you for the clarification. I will look into that information which you provided.

    I might have missed out one important detail, I'm using the Custom Post Type UI with the Advanced Custom Fields plugin. So, I have assigned certain custom fields to certain template parts.

    That means, that when I for example create a page named "Homepage" and assign the template "Homepage" to that page, then it will automatic show the custom fields for that section. Please see attached file.

    I really would love to avoid using any Theme Options and instead allow my theme users to add all the necessary information straight through the pages, since that is much more user-friendly.

    Does it actually make sense? :slight_smile:

    Sincerely,
    Mika

  • Mika

    Hey Jack.

    Thanks, I'm doing great. I hope the same for you :slight_smile:

    I have read through your all of the comments but I haven't found the solution I'm looking for.

    My logic is simple. I want my theme-users to do following:

    1. Create a page.
    2. Assign a template to that page.
    3. Fill out the custom fields that is associated with that template, which will automatically appear when the user chooses a template.
    4. Click "Update".
    5. View the page (section) on the website's frontpage (as it is a one-page theme).

    As the user adds more pages, more pages (sections) will be added on the frontpage.

    This logic is fairly simple, the only issue is how I can display the pages with the content from the templates with the information added to each template through the custom fields which has been assigned to each template, on the themes one-page frontpage.

    If I try to view the page "Homepage" through this link http://localhost:8888/freelancer/homepage/ this is what I see (check out the attached file).

    So, the information is being added to the template properly using the Advanced Custom Fields. And, if I add the <?php get_header();?> it will grap the stylesheet and appear which the correct styling and remove template declaration text:

    /*
    
    	Template Name: Homepage
    
    */

    However, I want to show this section and all other pages I create on the frontpage (index.php). How do I do that? :slight_smile:

    Thanks a lot!
    Sincerely,
    Mika

  • Jack Kitterhing

    Hi Mika,

    Hope you're well today. :slight_smile:

    Right that does make sense, but I'm trying to understand your file structure in the theme.

    So do you have a single index.php with a page.php and post.php and that contains the code for all the template parts or are you actually using page templates?

    If you are, and your using advanced custom fields is basically handling the options for the template correct?

    So you need a custom call to load the correct template part to load the custom fields?

    Thank you!

    Kind Regards
    Jack.

  • Mika

    Hey Jack.

    Thanks for replying back to me :slight_smile:

    This is my files:

    style.css
    index.php
    header.php
    footer.php
    functions.php
    /js/
    /css/
    /templates/
    - homepage.php (page template)
    - portfolio.php (page template)
    - about.php (page template)
    - contact (page template)
    /fonts
    screenshot.png

    I desire to use the index.php file to query the templates files with the info added through the advanced custom fields. However, the template parts should only be shown when they are being used. Make sense? :slight_smile:

    Sincerely,
    Mika

    • Vinod Dalvi

      Hi Mika,

      Thank you for your reply.

      I want to makes one this clear here that there is difference between the page template and the page template part.

      The page template is used to display information from the specific page where as the page template parts are loaded in to page template (other than header, sidebar, footer) that makes it easy for a theme to reuse sections of code and an easy way for child themes to replace sections of their parent theme.

      See the more information about page templates and the page template parts on the following pages.

      http://codex.wordpress.org/Page_Templates
      http://codex.wordpress.org/Function_Reference/get_template_part
      http://wpshout.com/need-know-wordpress-custom-page-templates/
      http://wordpress.stackexchange.com/a/41640/14347
      http://kovshenin.com/2013/get_template_part/

      As you are not using theme options and instead using custom fields so let's discard the idea of using page template part and let's achieve it using page templates.

      So you have created custom page templates, attached it to pages and integrated custom fields to the particular page templates using advanced custom fields rules.

      So now let's display these information on the front end by developing and adding code in the index.php file and page template files.

      Do not use get_header and get_footer functions in the page template files instead only use it in the index.php file so that it will be displayed only once as you are developing single page site.

      Develop custom code in the respective page templates to display values added in the advanced custom fields as described on the following page. Also develop appropriate markup in the templates.

      http://www.advancedcustomfields.com/resources/getting-started/displaying-custom-field-values-in-your-theme/

      Please advise if you face any problem doing it.

      In the index.php file add the following code to display information from the page to which the particular page template is attached. Use the following code four times in the index.php file changing page template name for the four respective custom page templates you have created.

      <?php
      $args = array( 'posts_per_page' => 1,'post_type' => 'page', 'meta_query' => array(
      		array(
      			'key' => '_wp_page_template',
      			'value' => 'Homepage' // Change page template name here
      		)
      	));
      
      $mypages = get_posts( $args );
      foreach ( $mypages as $page ) : setup_postdata( $page );
      	include get_page_template();
      endforeach;
      wp_reset_postdata(); ?>

      Best Regards,
      Vinod Dalvi

  • Mika

    Hey Vinod.

    Thank you so much for your reply. You are the man, we are about getting there :slight_smile:

    I have done everything you prescribed, however, nothing is shown on the index.php page other than the header and footer.

    I have added this code:

    <?php get_header(); ?>
    
    <!-- Homepage  -->
    
    <?php
      $args = array(
        'posts_per_page' => 1,
        'post_type' => 'page',
        'meta_query' => array(
          array(
            'key' => '_wp_page_template',
            'value' => 'homepage' // Change page template name here
        )
      ));
    
    $mypages = get_posts( $args );
    
    foreach ( $mypages as $page ) : setup_postdata( $page );
      include get_page_template();
    endforeach;
    wp_reset_postdata(); ?>
    
    // same codes three times for three other templates
    
    <?php get_footer(); ?>

    Did I do anything wrong? (By the way, if I go to http://localhost:8888/freelancer/homepage/ I can see that the homepage is showing correct, without the css because the get_header(); is not included), and with the input from the custom fields - So the page is setup correctly, it's just not showing on the index.php page.

    Do you know what might cause this problem?

    Sincerely,
    Mika

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.