A graphical approach to WordPress custom page templates

Source: Internet
Author: User
Tags comments trim contact form wordpress blog

The role of page templates

Let WordPress's pages have different layouts or styles. WordPress provides a page feature that allows us to create different pages to show different content. such as contact, message book, and so on, a lot of people like to build this. These pages are built so that you can customize the title and content. But different pages, the layout is exactly the same, can not according to their own needs to change and add. Sometimes we just want to add something to the sidebar of a page, such as a picture, and then you can customize the template to implement a specific feature of the page.

1, through the FTP tool in your subject directory to create a new PHP file. For example: links.php (name casually take).

2, edit this new file, add this code to the header of the file.

The code is as follows Copy Code
< PHP
/*
Template Name: Friend chain
*/
?>

3, copy the contents of your page.php directly to the links.php.

4, then find where you need to change in the links.php. I think, the most major change is the sidebar, one is the content of the article, as to how to change, depends on your needs.

5. After modifying and saving this file, create a new page or modify the existing page. In the bottom right there is a "page template" panel, in the Drop-down menu select "Friend Chain" after the save on it.


Links.php can be any content, do not necessarily copy the contents of page.php.
You can even place HTML code directly in it without adding anything else.

Create a Contact page template
If your site has a contact page, it will be easy for your site visitors to send emails to your WordPress blog administrator. Here is an example of a single page template theme for a new contact, and you can copy the following code:

The code is as follows Copy Code




&lt;?php


/*


Template Name:contact


*/


?&gt;


&lt;?php





$nameError = ';


$emailError = ';


$commentError = ';


$sumError = ';





if (Isset ($_post[' submitted ')) {


if (Trim ($_post[' contactname ']) = = = ') {


$nameError = ' Please enter your name. '


$hasError = true;


} else {


$name = Trim ($_post[' ContactName ']);


}





if (Trim ($_post[' email ')) = = = ') {


$emailError = ' Please enter your e-mail address. '


$hasError = true;


else if (!eregi ("^[a-z0-9._%-]+@[a-z0-9._%-]+.[ A-z]{2,4}$ ", Trim ($_post[' email ')) {


$emailError = ' you entered a invalid email address. '


$hasError = true;


} else {


$email = Trim ($_post[' email ')];


}





if (Trim ($_post[' comments ']) = = = ') {


$commentError = ' Please enter a message. '


$hasError = true;


} else {


if (function_exists (' stripslashes ')) {


$comments = Stripslashes (Trim ($_post[' comments '));


} else {


$comments = Trim ($_post[' comments ']);


}


}





if (Trim ($_post[' sum ')) = = ' | | | trim ($_post[' sum '])!= ' 11 ') {


$sumError = "Please enter what ' s 7 + 4";


$hasError = true;


}





if (!isset ($hasError)) {


$emailTo = get_option (' Pu_email ');


if (!isset ($emailTo) | | ($emailTo = = ")) {


$emailTo = get_option (' Admin_email ');


}


$subject = ' [contact Form] from '. $name;


$body = "Name: $name nnemail: $email nncomments: $comments";


$headers = ' from: '. $name. ' &lt; '. $emailTo. ' &gt; '. "RN". ' Reply-to: '. $emailTo;





Mail ($emailTo, $subject, $body, $headers);


$emailSent = true;


}





}?&gt;





&lt;?php Get_header ();?&gt;





&lt;section class= "box Grid_9 list_posts" &gt;


&lt;div class= "inner" &gt;





&lt;?php if (have_posts ()): while (Have_posts ()): The_post ();?&gt;





&lt;div &lt;?php post_class ()?&gt; id= "post-&lt;?php the_id ();?&gt;" &gt;





&LT;H1 class= "Entry-title" &gt;&lt;?php the_title ();?&gt;&lt;/h1&gt;





&lt;div class= "Entry-content" &gt;





&lt;div class= "Contact-form clearfix" &gt;





&lt;?php if (isset ($emailSent) &amp;&amp; $emailSent = = True) {?&gt;





&lt;div class= "HI" &gt;


&lt;p&gt;&lt;?php _e (' Your email was sent successfully. ', ' framework ')?&gt;&lt;/p&gt;


&lt;/div&gt;





&lt;?php} else {?&gt;





&lt;?php the_content ();?&gt;





&lt;?php if (isset ($hasError) | | | isset ($CAPTCHAERROR)) {?&gt;


&lt;p class= "Error" &gt;&lt;?php _e (' Sorry, an error occured. ', ' framework ')?&gt;&lt;p&gt;


&lt;?php}?&gt;





&lt;form action= "&lt;?php the_permalink ()?&gt;" id= "Contactform" method= "POST" &gt;


&lt;ul class= "Contactform" &gt;


&lt;li&gt;&lt;label for= "ContactName" &gt;&lt;?php _e (' Name: ', ' framework ')?&gt;&lt;/label&gt;


&lt;input type= "text" name= "ContactName" id= "ContactName" value= "&lt;?php if (isset ($_post[' ContactName '))) echo $_ post[' ContactName '];? &gt; "class=" Required Requiredfield "/&gt;


&lt;?php if ($nameError!= ') {?&gt;


&lt;span class= "Error" &gt;&lt;?php echo $nameError;?&gt;&lt;/span&gt;


&lt;?php}?&gt;


&lt;/li&gt;





&lt;li&gt;&lt;label for= "Email" &gt;&lt;?php _e (' Email: ', ' framework ')?&gt;&lt;/label&gt;


&lt;input type= "text" name= "email" id= "email" value= "&lt;?php if (isset ' email ')) echo $_post[' email '];? &gt; "class=" required Requiredfield Email "/&gt;


&lt;?php if ($emailError!= ') {?&gt;


&lt;span class= "Error" &gt;&lt;?php echo $emailError;?&gt;&lt;/span&gt;


&lt;?php}?&gt;


&lt;/li&gt;





&lt;li class= "textarea" &gt;&lt;label for= "Commentstext" &gt;&lt;?php _e (' message: ', ' framework ')?&gt;&lt;/label&gt;


&lt;textarea name= "Comments" id= commentstext "rows=" cols= "class= required" Requiredfield if ( Isset ($_post[' comments ')) {if (function_exists (' stripslashes ')) {echo stripslashes ($_post[' comments ']);} else {echo $_post[' comments ']; }}?&gt;&lt;/textarea&gt;


&lt;?php if ($commentError!= ') {?&gt;


&lt;span class= "Error" &gt;&lt;?php echo $commentError;?&gt;&lt;/span&gt;


&lt;?php}?&gt;


&lt;/li&gt;





&lt;li&gt;&lt;label for= "sum" &gt;&lt;?php _e (' 7 + 4: ', ' framework ')?&gt;&lt;/label&gt;


&lt;input type= "text" name= "sum" id= "sum" value= "&lt;?php if (isset ($_post[' sum '))" Echo $_post[' sum '];? &gt; "class=" Required Requiredfield "/&gt;


&lt;?php if ($sumError!= ') {?&gt;


&lt;br/&gt;&lt;span class= "Error" &gt;&lt;?php echo $sumError;?&gt;&lt;/span&gt;


&lt;?php}?&gt;


&lt;/li&gt;





&lt;li class= "Buttons" &gt;


&lt;input type= "hidden" name= "submitted" id= "submitted" value= "true"/&gt;


&lt;label&gt;&lt;/label&gt;&lt;button class= "Button-message" type= "Submit" &gt;&lt;?php _e (' Send Email ', ' framework ' )?&gt;&lt;/button&gt;


&lt;/li&gt;


&lt;/ul&gt;


&lt;/form&gt;


&lt;?php}?&gt;





&lt;/div&gt;


&lt;/div&gt;


&lt;/div&gt;





&lt;?php Endwhile; else:?&gt;





&lt;div id= "post-0" &lt;?php post_class ()?&gt;&gt;





&LT;H1 class= "Entry-title" &gt;&lt;?php _e (' Error 404-not Found ', ' framework ')?&gt;&lt;/h1&gt;





&lt;div class= "Entry-content" &gt;


&lt;p&gt;&lt;?php _e ("Sorry, but are looking for something", "the framework") isn


&lt;?php get_search_form ();?&gt;


&lt;/div&gt;


&lt;/div&gt;





&lt;?php endif;?&gt;





&lt;/div&gt;


&lt;/section&gt;





&lt;?php Get_sidebar ();?&gt;





&lt;?php Get_footer ();?&gt;

Create a widescreen page template
The main difference between a full width page template is that the sidebar has been removed, making it possible to extend the template across the page width in the content area.

The code is as follows Copy Code

&lt;?php


/*


Template Name:fullwidth


*/


?&gt;





&lt;?php Get_header ();?&gt;





&lt;section class= "box Grid_12 list_posts" &gt;


&lt;div class= "inner" &gt;





&lt;article id= "PRIMARY" class= "Hfeed" &gt;


&lt;?php if (have_posts ()): while (Have_posts ()): The_post ();?&gt;





&lt;div &lt;?php post_class ()?&gt; id= "post-&lt;?php the_id ();?&gt;" &gt;


&LT;H1 class= "Entry-title" &gt;&lt;?php the_title ();?&gt;&lt;/h1&gt;





&lt;div class= "Entry-content" &gt;


&lt;?php the_content ();?&gt;


&lt;?php wp_link_pages (' Before ' =&gt; ' &lt;p&gt;&lt;strong&gt; '. __ (' pages: ', ' framework '). ' &lt;/strong&gt; ', ' after ' =&gt; ' &lt;/p&gt; ', ' next_or_number ' =&gt; ' number ');?&gt;





&lt;/div&gt;


&lt;/div&gt;





&lt;?php comments_template (", true");?&gt;





&lt;?php Endwhile; endif;?&gt;.


&lt;/article&gt;


&lt;/div&gt;


&lt;/section&gt;





&lt;?php Get_footer ();?&gt;

Create an archive page template
The archive page template displays a list of all your old articles. The template will also list all the first 30 days of the month by category.

The code is as follows Copy Code

&lt;?php


/*


Template name:archives


*/


?&gt;





&lt;?php Get_header ();?&gt;





&lt;section class= "box Grid_9 list_posts" &gt;


&lt;div class= "inner" &gt;





&lt;?php if (have_posts ()): while (Have_posts ()): The_post ();?&gt;





&lt;div &lt;?php post_class ()?&gt; id= "post-&lt;?php the_id ();?&gt;" &gt;





&LT;H1 class= "Entry-title" &gt;&lt;?php the_title ();?&gt;&lt;/h1&gt;





&lt;div class= "Entry-content" &gt;





&lt;div class= "Archive-lists" &gt;





&lt;h4&gt;&lt;?php _e (' Last Posts ', ' framework ')?&gt;&lt;/h4&gt;





&lt;ul&gt;


&lt;?php $archive _30 = get_posts (' numberposts=30 ');


foreach ($archive _30 as $post):?&gt;


&lt;li&gt;&lt;a href= "&lt;?php the_permalink ()?&gt;" &gt;&lt;?php the_title ();? &gt;&lt;/a&gt;&lt;/li&gt;


&lt;?php Endforeach;?&gt;


&lt;/ul&gt;





&lt;h4&gt;&lt;?php _e (' Archives by Month: ', ' framework ')?&gt;&lt;/h4&gt;





&lt;ul&gt;


&lt;?php wp_get_archives (' type=monthly ');?&gt;


&lt;/ul&gt;





&lt;h4&gt;&lt;?php _e (' Archives by Subject: ', ' framework ')?&gt;&lt;/h4&gt;





&lt;ul&gt;


&lt;?php wp_list_categories (' title_li= ');?&gt;


&lt;/ul&gt;





&lt;/div&gt;


&lt;/div&gt;


&lt;/div&gt;





&lt;?php Endwhile; else:?&gt;





&lt;div id= "post-0" &lt;?php post_class ()?&gt;&gt;





&LT;H1 class= "Entry-title" &gt;&lt;?php _e (' Error 404-not Found ', ' framework ')?&gt;&lt;/h1&gt;





&lt;div class= "Entry-content" &gt;


&lt;p&gt;&lt;?php _e ("Sorry, but are looking for something", "the framework") isn


&lt;?php get_search_form ();?&gt;


&lt;/div&gt;


&lt;/div&gt;





&lt;?php endif;?&gt;


&lt;/div&gt;


&lt;/section&gt;





&lt;?php Get_sidebar ();?&gt;





&lt;?php Get_footer ();?&gt;

OK, so far, here's how to create a custom page template for WordPress. Hope that you through the simple understanding of this article, you can produce a variety of beautiful page templates.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.