WordPress Page Design: Shortcodes v Page Templates

The proliferation of WordPress sites throughout the Web has delivered some amazing  page designs that are striking in their originality, helping to create a unique web presence.

A general benefit of WordPress is that it allows people with little code experience the opportunity to load a theme, install some plugins and deliver a competent and visually appealing website.

However, if you aspire to creating a unique web page design, you can learn to customise your page designs. Today we are going to see how some of these amazing page designs are created within the WordPress themes, and help you create your own design templates to suit various situations.

How Do These Designs Work?

Each theme contains its own type of implementation for the custom page designs.

Basically, there are two main techniques for providing custom page designs.

Page Templates

There are certain type of pages for displaying categories, posts, and pages inside a default theme. We can add our own page designs using WordPress page templates. All you have to do is define the template name as a comment on top of the page. The following code contains a basic page template.

<?php

/*

Template Name: My Custom Template

*/

get_header();

?>
 
    // Content
 
<?php get_sidebar(); ?>
 
<?php get_footer(); ?>

Once the template is defined, you can assign it to a new page being added, as shown in the following screen.

Assign the template screenshot

Shortcodes

Shortcodes are reusable piece of code snippets which acts as shortcuts to provide complex functionalities and display options.

Generally, shortcode design templates  are placed inside the page editor and you can add or modify with necessary data to generate custom designs.

The following image shows a shortcode used for creating a design with tabs.

creating a design with tabs screenshot

Each of the above approaches has its own pluses and minuses in different situations. Choosing the right one for the right occasion is the challenge as a WordPress developer.

Inexperienced developers tend to misuse both of these techniques, so here we will be looking at the things to consider before choosing shortcodes or page templates to provide custom designs.

How Does Custom Design Fit into Pages?

A normal page in WordPress consists of several sub templates such as header, sidebar, content and footer.

First, we are going to look at the structure of a web page using the following screen.

web page structure diagram

Pages will contain a header, a footer and content as mandatory components. The sidebar is optional and we can align it to the right or left side depending on our preference.

Now, let’s see how custom designs created with shortcodes and page templates fit into the above page.

Shortcodes can be inserted inside the content editor in the page creation area on the admin dashboard. Therefore, any design generated from a shortcode will apply to the page content only. We cannot use shortcodes to create custom designs for header, footer and sidebar, unless we customize the template files.

Page template is placed inside the theme as a separate file. So we can customize the page template file to add different types of designs for each of the four components displayed in the above screen.

Conclusion

Page templates should be preferred over shortcodes in situations where we need a custom design for the complete page. Shortcodes are suitable for adding custom designs to the main content area.

Populating Data into Custom Designs

Theme developers can’t just create design templates with sample data and ask the users to manage their own data by changing the source files. WordPress is a CMS and users should be able to populate data for custom designs using the admin area.

WordPress provides the ability to use custom fields for adding dynamic data to pages. But non technical users will not be familiar with adding necessary keys and values to custom fields.

Therefore, most theme designers use theme’s options panel to populate data to the predefined page templates. The disadvantage of this approach is that you can only have one page per page template. Allowing data for multiple pages  will make the options panel very complex to handle.

Following is a sample options panel used to populate data to a home page.

sample options panel screenshot

On the other hand, populating data with shortcodes is much easier. In the tinyMCE editor we can create custom buttons to insert shortcodes. Once the button is clicked, shortcode will be placed inside the page editor and you can populate the shortcode with necessary data as required.

The following image shows a content editor with shortcode buttons for generating custom designs.

content editor with shortcode button

This is the most preferred and widely used technique for providing custom designs.We can create multiple pages with the same shortcode design template and populate relevant data as attributes.

Conclusion

Shortcodes are much more effective in scenarios when you need to use the same design template across multiple pages.

Adding Custom Designs to Existing Themes

Premium themes typically contain a set of built in page templates or custom page designs. However, let’s assume we want to create a new design templates that is not available by default.

Let’s look at the possible solutions with both shortcodes and page templates.

Page Templates

We can create the new design as a page template and copy it into the theme folder to get it working instantly. Each and every page template is placed inside the active theme folder. As soon as we change the theme, all the pages with our new design will fall apart since the page template is not available in the new theme.

Shortcodes

In this case we can create the new design as a shortcode and use it in a plugin instead of including in theme files, allowing us to use it across multiple themes as a shortcode.

Conclusion

Whenever you are in need of a new design template, create a shortcode inside a plugin to make templates compatible with multiple themes.

How to Choose Between Shortcodes and Page Templates

In the previous sections we discussed three different areas to be considered when choosing between shortcodes or page templates. Now let’s look at some general guidelines to make sure we use each of these techniques effectively.

Reusability

Shortcodes are much more suitable in situations where you want the same template to be used multiple times. Page templates are more suitable for single static pages.

Pages such as Home, About, Contact will be used as standalone pages on most occasions. Hence, page templates are suitable for these pages.

Dynamic pages such as Services, Portfolio, Projects are better created as shortcode templates.

Dependency

Shortcodes can be used as independent components from the theme while page templates depend on the theme and styles.  If you are creating a design template for common usage, make sure to create it as shortcode inside a plugin to make it cross theme compatible.

Portability

Shortcode templates are portable compared to page templates. You can place shortcodes anywhere in a page in any number of times. On the other hand you need a complete page to use a page template design.

Usability

Page templates are provided from the theme.  As a user, all you have to do is select the page template for any given page.

Shortcodes and the necessary data are placed inside the page content editor. So there is a strong possibility that you might get the content erased by mistake. In such cases all the data with complete design will be lost.

Page templates are permanent and hard to change by mistake, compared to shortcodes. Therefore page templates are much easier and safer to use in users perspective.

Overall Conclusion

There is no clear conclusion on what’s the best method for designing custom templates. Most often, it depends on combination of factors mentioned throughout this article. You have to focus on the situation and choose what suits the best in the given situation.

I hope my reflections have left you a little more able to understand the differences in using Shortcodes and Page Templates, and which to use for your own dazzling custom page designs.

Now, you should be able to choose between shortcodes or page templates for the following three scenarios.

  1. Designing a 3 column page without sidebar
  2. Designing an advertising page for your blog
  3. Designing a pricing table to display package pricing for different products and services

I look forward to your answers – and reasons – in the comments section below.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://brianswebdesign.com brian temecula

    I just redesigned my website, and ended up making a custom plugin and also heavy customizations through functions.php. I’ve made custom plugins that use shortcodes, and have quite a bit of experience creating custom page templates. I think you just have to know everything. Good wordpress usage definitely requires PHP knowledge.

    • http://www.innovativephp.com Rakhitha Nimesh

      Hello Brian

      Definitely agree on your suggestions. Both shortcodes and page templates are suitable for different scenarios. As a developer we should have the knowledge of both techniques to choose which one suits the best.

      Thanks for the comment

  • 10-nice

    Hi, I make a lot of websites for clients under WordPress, and can imagine one second to let the final client be able to destroy website display letting him manage shortcodes directly in every post content. So I’ll ever use templates :)

    Best regards,

    • http://www.innovativephp.com Rakhitha Nimesh

      Hello

      As you mentioned it can be risky to use shortcodes with non technical or inexperienced clients in WordPress. But I have seen most of the premium wordpress themes uses shortcodes to design custom pages. So we might have to get used to it at some point.

      Its much more easier and safer to use page templates with such clients.

      Thanks for your suggestions.

  • WebGuy

    I would suggest if you like using both, get UltimatumTheme and make your life easier with creating templates and layouts.

    • http://www.innovativephp.com Rakhitha Nimesh

      Hi WebGuy

      Thanks for your suggestions.

  • http://www.paulund.co.uk Paul

    I think it comes down to the end user of the theme. For most people that don’t understand HTML I would rather use different page templates. If you allow the user to change the layout with shortcodes then most of the time the user will break the layout of site and keep coming back to you for support. Using page templates will stop them doing this which means you can control the layout and user can focus on the content.

    • http://www.innovativephp.com Rakhitha Nimesh

      Hello Paul

      Thank you for taking time to provide your suggestions. I am a big fan of your blog.

      It seems that page templates are preferred due to the possibility of breaking pages with shortcodes by inexperienced people.

      You prefer page templates. What’s is your process of adding data to page templates ? Is it custom fields?

      Looking forward to your suggestions.

  • http://www.signoriwebsolutions.com web design agency

    its certainly a more professional way to do a project using shortcodes but if cost is an issue then maybe templates, the amount of testing/breaking to be done for potential scenarios of a user would make it expensive – very informative article :)

    • http://www.innovativephp.com Rakhitha Nimesh

      Hi

      Thank you for the interest in my article and taking time to comment.

      I agree with you. Possibility of breaking designs seems to be the main issue with shortcodes.

      So do you prefer page templates? If so how do you add dynamic data to page templates?

      Looking forward to hear from you.

  • http://www.digital-artworks.gr κατασκευή ιστοσελίδας

    what’s the epanel? is it avaliable for wordpress?

    • http://www.innovativephp.com Rakhitha Nimesh

      Hello κατασκευή

      It is not available in WordPress. You can create default type of options pages with WordPress. epanel is the options panel available in elegent themese. SMOF is a similar options framework available for free.

      https://github.com/sy4mil/Options-Framework

      Thanks and let me know on any other questions.

  • http://SydneyWebsiteDesign Raw Media

    I always user custom templates and I agree its very easy for a non technical users to break the look and feel of the site specially when they have to updated main page (Home page).. But great article Thanks

    • http://www.innovativephp.com Rakhitha Nimesh

      Hello

      Thanks for sharing your suggestions.

      It seems that everyone prefers page templates over shortcodes due to the cincern of deleting the design by mistake. :)

  • Paul

    For the three column page my best guess would be to use a page template. for the advertising and the products pages I would guess that you should use the shortcodes, because for both you may need to do different type of page theming since different products and advertising campaigns are going to be unique in size quantity and colors. Yet you could do them in the same page. So there you have your answer. let me know if I’m on the right track.

    • http://www.innovativephp.com Rakhitha Nimesh

      Hi Paul

      Thank you for being the first person to answer my questions.

      There is no right solution. We can do these things using both techniques. It is about identifying whats your own preference and what suits the best.

      1. For 3 column page, I am going with your decision. Since there is no sidebar, we can use a page template easily.

      But if I included sidebar in my question, shortcodes might have been better as we can use it dynamically everywhere. Most of the professional themes provides shortcodes for creating column based templates.

      2. Advertising page is something we will use once per site, unless the site is about advertising. Also its content will not be highly dynamic compared to column based templates mentioned in previous question. So I’ll be going with page template for advertise page. You can do the same with shortcodes as its your preference.

      3. Pricing tables, products and services are designs with highly dynamic data, which needs to be used across multiple pages and posts in your site. Therefore probably shortcodes will be the appropriate solution as you suggested.

      By looking at your answers, It seems that you are either very experienced developer in WordPress or someone who read the article very well.

      Thanks again.