Return to site

Templates For Pages – Design 6 0 36

broken image


  1. Templates For Pages – Design 6 0 36 Ft
  2. Templates For Pages – Design 6 0 36 X 40
  3. Templates For Pages – Design 6 0 36 Inches
  4. Templates For Pages – Design 6 0 36 Cm
  • Page templates

To develop a template you just have to drop the blocks on the page, edit content inline & publish. Created Website will run on any Web Host Our website maker create sites and templates with latest industry recommendations and you can upload them to any standard Web Host. If a page template has a template name, WordPress users editing the page have control over what template will be used to render the page. Uses for Page Templates # Uses for Page Templates. Page templates display your site's dynamic content on a page, e.g. Design your entire website right inside the WP Customizer Colibri takes the Customizer to the next level so you can customize every aspect of your website in a single interface. This includes headers, page content, footers, navigation menus, global and individual styling.

These templates for a landing page and a documentation page are built from USWDS components. Each of these pages is flexible; you can add or remove components or subcomponents to suit your needs. These templates are great starting point for prototyping or for trying USWDS to see if it's a good fit for your project.

Landing page

Provide someone's first impression of your agency or program.

Often, site users arrive at a landing page without much context, like a search result or a colleague's email. So a landing page needs to be clear, engaging, and contextualizing.

When to use the landing page template

  • Introducing a new program. If you are introducing a new program to the public through a marketing or publicity campaign, a landing page is a good place to point links at. It can build on the minimal copy of a campaign without overwhelming readers.

When to avoid

  • Internal pages. Don't use a landing page for standard internal page content. The same things that help people understand basics quickly can become distracting for people who are looking for more depth.

Usability guidance

Templates for pages – design 6 0 36 inches
  • Remember to do your research. The landing page can be a good model for a homepage. But do some research first. What do you have to say? What do your users need to know? Figure these things out. It's important to know what you have to say about your organization before you settle on a homepage design.
  • Don't make it too complicated. Don't try to include forms or side navigation in a page like this. Those are visually complex components, and a landing page works best without too much complexity.
  • Simple pages may not need a header. If you are using the landing page to encourage users to follow a primary call to action, consider getting rid of the header. The less there is to distract people from the most important task, the more often they will do it.
  • Remove unnecessary elements. Do not create extra content just to fill the template. You can remove individual components (such as the media block) or sub-components (such as individual menu items in the header) from the template as you implement it. This version gives you a broad idea of the number of things your landing page could include. But never make a page more complex than you need to. If you're unsure, interview users to find out what they need to know.
  • See component-specific guidance. For guidance on specific components, see the pages for the individual components.

Components used in this template

  • Extended header
  • Hero feature
  • Graphic list
  • Media block
  • Grid
  • Buttons
  • Medium footer

Component definitions

Templates For Pages – Design 6 0 36 Ft

  • Hero feature: Hero features are used at the top of your landing page to help set the tone for the content of your site and to help users understand what your brand is all about. The Hero feature offers a callout which provides a high-level overview of the content on the site and will often reference the Hero image that sits behind it.
  • Graphic list: The Graphic list is used to showcase a number of related items and their respective images in a grid pattern.

Documentation page

Present information on a certain theme, topic, or idea.

People often arrive at a documentation page after visiting the landing page or after searching for a specific piece of information, so documentation pages don't need to provide as much contextualizing information as more introductory pages would. The copy should be clear, focused, and concise.

Templates For Pages – Design 6 0 36 X 40

When to use the documentation template

  • Detailed information on a specific topic. If you're presenting detailed information on a specific topic or theme that has already been contextualized by a landing page. Some topics that can be nicely represented on this type of page include guides or how-tos, technical documentation, and program descriptions — in short, any subject that requires in-depth explanation.

When to avoid

  • Introducing a new program. Don't use a documentation page to introduce your users to your agency or organization — the landing page is better suited to that purpose. The level of detail present on documentation pages can overwhelm users who are just becoming acquainted with your organization.

Usability guidance

  • Use a precise headline. A precise headline quickly communicates your page's purpose. If the page content is especially complex, you may consider using a subheadline to further clarify its meaning.
  • Write concise copy. Favor short sentences (and paragraphs) over longer ones, and use straightforward language, avoiding jargon. Remember, copy blocks don't need to be long to be comprehensive.
  • See component-specific guidance. For guidance on specific components, see the page for the individual components.

Components used in this template

  • Basic header
  • Grid
  • Side navigation
  • Documentation layout
  • Medium footer

Topics

Page templates are a specific type of template file that can be applied to a specific page or groups of pages.

Note: As of WordPress 4.7 page templates support all post types. For more details how to set a page template to specific post types see example below.

Since a page template is a specific type of template file, here are some distinguishing features of page templates:

Templates For Pages – Design 6 0 36
  • Remember to do your research. The landing page can be a good model for a homepage. But do some research first. What do you have to say? What do your users need to know? Figure these things out. It's important to know what you have to say about your organization before you settle on a homepage design.
  • Don't make it too complicated. Don't try to include forms or side navigation in a page like this. Those are visually complex components, and a landing page works best without too much complexity.
  • Simple pages may not need a header. If you are using the landing page to encourage users to follow a primary call to action, consider getting rid of the header. The less there is to distract people from the most important task, the more often they will do it.
  • Remove unnecessary elements. Do not create extra content just to fill the template. You can remove individual components (such as the media block) or sub-components (such as individual menu items in the header) from the template as you implement it. This version gives you a broad idea of the number of things your landing page could include. But never make a page more complex than you need to. If you're unsure, interview users to find out what they need to know.
  • See component-specific guidance. For guidance on specific components, see the pages for the individual components.

Components used in this template

  • Extended header
  • Hero feature
  • Graphic list
  • Media block
  • Grid
  • Buttons
  • Medium footer

Component definitions

Templates For Pages – Design 6 0 36 Ft

  • Hero feature: Hero features are used at the top of your landing page to help set the tone for the content of your site and to help users understand what your brand is all about. The Hero feature offers a callout which provides a high-level overview of the content on the site and will often reference the Hero image that sits behind it.
  • Graphic list: The Graphic list is used to showcase a number of related items and their respective images in a grid pattern.

Documentation page

Present information on a certain theme, topic, or idea.

People often arrive at a documentation page after visiting the landing page or after searching for a specific piece of information, so documentation pages don't need to provide as much contextualizing information as more introductory pages would. The copy should be clear, focused, and concise.

Templates For Pages – Design 6 0 36 X 40

When to use the documentation template

  • Detailed information on a specific topic. If you're presenting detailed information on a specific topic or theme that has already been contextualized by a landing page. Some topics that can be nicely represented on this type of page include guides or how-tos, technical documentation, and program descriptions — in short, any subject that requires in-depth explanation.

When to avoid

  • Introducing a new program. Don't use a documentation page to introduce your users to your agency or organization — the landing page is better suited to that purpose. The level of detail present on documentation pages can overwhelm users who are just becoming acquainted with your organization.

Usability guidance

  • Use a precise headline. A precise headline quickly communicates your page's purpose. If the page content is especially complex, you may consider using a subheadline to further clarify its meaning.
  • Write concise copy. Favor short sentences (and paragraphs) over longer ones, and use straightforward language, avoiding jargon. Remember, copy blocks don't need to be long to be comprehensive.
  • See component-specific guidance. For guidance on specific components, see the page for the individual components.

Components used in this template

  • Basic header
  • Grid
  • Side navigation
  • Documentation layout
  • Medium footer

Topics

Page templates are a specific type of template file that can be applied to a specific page or groups of pages.

Note: As of WordPress 4.7 page templates support all post types. For more details how to set a page template to specific post types see example below.

Since a page template is a specific type of template file, here are some distinguishing features of page templates:

  • Page templates are used to change the look and feel of a page.
  • A page template can be applied to a single page, a page section, or a class of pages.
  • Page templates generally have a high level of specificity, targeting an individual page or group of pages. For example, a page template named page-about.php is more specific than the template files page.php or index.php as it will only affect a page with the slug of 'about.'
  • If a page template has a template name, WordPress users editing the page have control over what template will be used to render the page.

Uses for Page Templates #Uses for Page Templates

Page templates display your site's dynamic content on a page, e.g., posts, news updates, calendar events, media files, etc. You may decide that you want your homepage to look a specific way, that is quite different to other parts of your site. Or, you may want to display a featured image that links to a post on one part of the page, have a list of latest posts elsewhere, and use a custom navigation. You can use page templates to achieve these things.

This section shows you how to build page templates that can be selected by your users through their admin screens.

For example, you can build page templates for:

  • full-width, one-column
  • two-column with a sidebar on the right
  • two-column with a sidebar on the left
  • three-column

Page Templates within the Template Hierarchy #Page Templates within the Template Hierarchy

When a person browses to your website, WordPress selects which template to use for rendering that page. As we learned earlier in the Template Hierarchy, WordPress looks for template files in the following order:

  1. Page Template — If the page has a custom template assigned, WordPress looks for that file and, if found, uses it.
  2. page-{slug}.php If no custom template has been assigned, WordPress looks for and uses a specialized template that contains the page's slug.
  3. page-{id}.php If a specialized template that includes the page's slug is not found, WordPress looks for and uses a specialized template named with the page's ID.
  4. page.php If a specialized template that includes the page's ID is not found, WordPress looks for and uses the theme's default page template.
  5. singular.php If page.php is not found, WordPress looks for and uses the theme's template used for a single post, irregardless of post type.
  6. index.php If no specific page templates are assigned or found, WordPress defaults back to using the theme's index file to render pages.

Alert: There is also a WordPress-defined template named paged.php. It is not used for the page post-type but rather for displaying multiple pages of archives.

Page Templates Purpose & User Control #Page Templates Purpose & User Control

If you plan on making a custom page template for your theme, you should decide a couple of things before proceeding:

  • Whether the page template will be for one specific page or for any page; and
  • What type of user control you want available for the template.

Every page template that has a template name can be selected by a user when they create or edit a page. The list of available templates can be found at Pages > Add New > Attributes > Template. Therefore, a WordPress user can choose any page template with a template name, which might not be your intention.

For example, if you want to have a specific template for your 'About' page, it might not be appropriate to name that page template 'About Template' as it would be globally available to all pages (i.e. the user could apply it to any page). Instead, create a single use template and WordPress will render the page with the appropriate template, whenever a user visits the 'About' page.

Conversely, many themes include the ability to choose how many columns a page will have. Each of these options is a page template that is available globally. To give your WordPress users this global option, you will need to create page templates for each option and give each a template name.

Dictating whether a template is for global use vs. singular use is achieved by the way the file is named and whether or not is has a specific comment.

Note: Sometimes it is appropriate to have a template globally available even if it appears to be a single use case. When you're creating themes for release, it can be hard to predict what a user will name their pages. Portfolio pages are a great example as not every WordPress user will name their portfolio the same thing or have the same page ID and yet they may want to use that template.

File Organization of Page Templates #File Organization of Page Templates

As discussed in Organizing Theme Files, WordPress recognizes the subfolder page-templates. Therefore, it's a good idea to store your global page templates in this folder to help keep them organized.

Alert: A specialized page template file (those created for only one time use) cannot be in a sub-folder, nor, if using a Child Theme, in the Parent Theme's folder.

Creating Custom Page Templates for Global Use #Creating Custom Page Templates for Global Use

Sometimes you'll want a template that can be used globally by any page, or by multiple pages. Some developers will group their templates with a filename prefix, such as page_two-columns.php

Alert:Important! Do not use page- as a prefix, as WordPress will interpret the file as a specialized template, meant to apply to only one page on your site.

For information on theme file-naming conventions and filenames you cannot use, see reserved theme filenames.

Tip: A quick, safe method for creating a new page template is to make a copy of page.php and give the new file a distinct filename. That way, you start off with the HTML structure of your other pages and you can edit the new file as needed.

To create a global template, write an opening PHP comment at the top of the file that states the template's name.


It's a good idea to choose a name that describes what the template does as the name is visible to WordPress users when they are editing the page. For example, you could name your template Homepage, Blog, or Portfolio.

This example from the TwentyFourteen theme creates a page template called Full Width Page:


Once you upload the file to your theme's folder (e.g., page-templates), go to the Page > Edit screen in your admin dashboard.

On the right hand side under attributes you'll see template. This is where users are able to access your global page templates.

Tip: The select list has a maximum width of 250px, so longer names may be cut off.

Creating a Custom Page Template for One Specific Page #Creating a Custom Page Template for One Specific Page

As mentioned in the Template Hierarchy page, you can create a template for a specific page. To create a template for one specific page, copy your existing page.php file and rename it with your page's slug or ID:

  1. page-{slug}.php
  2. page-{ID}.php

For example: Your About page has a slug of ‘about' and an ID of 6. If your active theme's folder has a file named page-about.php or page-6.php, then WordPress will automatically find and use that file to render the About page.

Templates For Pages – Design 6 0 36 Inches

To be used, specialized page templates must be in your theme's folder (i.e. /wp-content/themes/my-theme-name/ ).

Creating page templates for specific post types #Creating page templates for specific post types

By default, a custom page template will be available to the 'page' post type.

To create a page template to specific post types, add a line under the template name with the post types you would like the template to support.

Example:


Alert: This ability to add page templates to post types other than 'page' post type is supported only from WordPress 4.7

When at least one template exists for a post type, the ‘Post Attributes' meta box will be displayed in the back end, without the need to add post type support for ‘page-attributes' or anything else. The ‘Post Attributes' label can be customzied per post type using the ‘attributes' label when registering a post type.

Backward Compatibility:

Let's say you want to publicly release a theme with support for post type templates. WordPress versions before 4.7 will ignore the Template Post Type header and show the template in the list of page templates, even though it only works for regular posts. To prevent that, you can hook into the theme_page_templates filter to exclude it from the list. Here's an example:


That way you can support custom post type templates in WordPress 4.7 and beyond while maintaining full backward compatibility.

Note that theme_page_templates is actually a dynamic theme_{$post_type}_templates filter. The dynamic portion of the hook name, $post_type, refers to the post type supported by the templates. E.g. you can hook into theme_product_templates to filter the list of templates for the product post type.

Using Conditional Tags in Page Templates #Using Conditional Tags in Page Templates

You can make smaller, page-specific changes with Conditional Tags in your theme's page.php file. For instance, the below example code loads the file header-home.php for your front page, but loads another file (header-about.php) for your About page, and then applies the default header.php for all other pages.

Templates For Pages – Design 6 0 36 Cm


You can learn more about Conditional Tags here.

Identifying a Page Template #Identifying a Page Template

If your template uses the body_class() function, WordPress will print classes in the body tag for the post type class name (page), the page's ID (page-id-{ID}), and the page template used. For the default page.php, the class name generated is page-template-default:


Note: A specialized template (page-{slug}.php or page-{ID}.php) also gets the page-template-default class rather than its own body class.

When using a custom page template, the class page-template will print, along with a class naming the specific template. For example, if your custom page template file is named as follows:


Then then rendered HTML generated will be as follows:


Notice the page-template-my-custom-page-php class that is applied to the body tag.

Page Template Functions #Page Template Functions

These built-in WordPress functions and methods can help you work with page templates:

  • get_page_template() returns the path of the page template used to render the page.
  • wp_get_theme()->get_page_templates() returns all custom page templates available to the currently active theme (get_page_templates() is a method of the WP_Theme class).
  • is_page_template() returns true or false depending on whether a custom page template was used to render the page.
  • get_page_template_slug() returns the value of custom field _wp_page_template (null when the value is empty or 'default').If a page has been assigned a custom template, the filename of that template is stored as the value of a custom field named '_wp_page_template' (in the wp_postmeta database table). (Custom fields starting with an underscore do not display in the edit screen's custom fields module.)




broken image