wordpress custom page template based on a specific <div>

3 Views

I want to know how to set up a custom page template. My website is based on many different widths. example for some pages I use a div called <div class="content-wrap ninecol clearfix"> but for another page I use <div class="text-centered twelvecol clearfix">.

I need to create a template so that I can easy create new pages based on those templates.

Read More

Below is my static html code that Ive done in dreamweaver. 

<div class="content-wrap ninecol clearfix"> <!--I want to make a template based on this div so I can just add new text in the future-->

        <div class="content">


<h1 class="title">Om oss</h1>
<hr>
<div class="entry-content">
<h4>Vilka är Unified Sweden?</h4>
    <p>Vi värnar starkt om vår unika företagskultur och ser den som vårt  kraftfullaste      
     konkurrensmedel. Inom företaget har vi alltid arbetat hårt  för att skapa den 
     stabila grund som vår företagskultur är byggd på. </p>
    <p>All personal på Unified Sweden har många års erfarenhet av  webbutveckling,
    programmering, design och kundservice vilket gör oss  unika då alla led inom kundbemötandet 
    vet exakt vad ni som företag  behöver hjälp med.</p>
         </div>

</div>
    </div>

and this is what I came up with. 

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


  <?php get_header(temp); ?>
  <?php
        // get_template_part( 'loop', 'index' );
        ?>


  <div class="breadcrumbs">
  <?php if(function_exists('bcn_display'))
  {
    bcn_display();
  }?>
  </div>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>   


       <?php the_content(); ?>

   <?php endwhile; endif; ?>



    </div><!-- content-wrap -->

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

    </div>

    </div><!-- .main -->

     <?php get_footer(); ?>

Thank you for any kind of help or support.

Post Views: 3

Related posts

Leave a Reply

3 comments

  1. Are you saying that for each template you want a different style? If yes you need to give different name at div id and then you should edit your style.css 

    #namediv{ }

  2. to setup custom page template (if i understand your question correctly)
    you create your page template in the theme directory which is active
    and use the header the way you did

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

    you replace Test by whatever you want to use for the name (this name can have space)
    then in the admin, you can select the template to use for the page by going to Admin > Page Attributes > Templates
    Your new custom template should appear here

    edit (following op comment)
    then you could check which template is being use with 

    is_page_template()

    http://codex.wordpress.org/Function_Reference/is_page_template
    from within the header.php that would then load a specific css file

    side note: you might also want to check the codex page: http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates as well as the dedicated wordpress stackexchange https://wordpress.stackexchange.com/

  3. Template Name : Your page name

    */

    you replace Test by whatever you want to use for the name (this name can have space) then in the admin, you can select the template to use for the page by going to Admin > Page Attributes > Templates Your new custom template should appear here