WordPress Page Design: Shortcodes v Page Templates

WordPress Theme Customization: Comparison of Page Template and Short Code

WordPress has a dominant position in web design with its powerful features and flexibility. Many amazing page designs are derived from WordPress’s theme customization capabilities, and page templates and shortcodes play a key role. This article will explore these two technologies in depth to help you choose the one that best suits your needs.

Core points

• WordPress mainly implements custom page design through page templates and short codes. Page templates are used to display categories, articles, and pages in the default topic; short codes are reusable code snippets that provide complex features and display options.
• When you need to customize the entire page, you should give priority to the page template; short codes are more suitable for adding custom designs to the main content area.
• Short codes are more efficient when multiple pages require the same design template. Adding shortcodes to the plugin makes templates compatible with multiple themes.
• Choose a short code or a page template depends on factors such as reusability, dependency, portability, and ease of use. Short codes are suitable for multiple purposes, independent of topics; page templates are more suitable for a single static page and rely on topics and styles.

How to work in custom design

Each theme has its own mechanism to implement custom page design. There are two main technologies:

Page Template

The default topic contains specific page types used to display categories, articles, and pages. We can add our own page design using WordPress page templates. Just define the template name at the top of the page. The following code contains a basic page template:

<code class="language-php"><?php
/*
Template Name: 我的自定义模板
*/
get_header();
?>

    <!-- 内容 -->

<?php get_sidebar(); ?>

<?php get_footer(); ?></code>

After defining a template, you can assign it to the newly added page as shown in the following figure:

Short code

Short codes are reusable code snippets that act as shortcuts that provide complex features and display options. Typically, short code design templates are placed in the page editor, and you can add or modify the necessary data to generate a custom design. The following image shows a short code for creating a tab design:

The two methods have their own advantages and disadvantages. The challenge for WordPress developers is to choose the right method for different situations. Inexperienced developers tend to misuse both techniques, so we need to consider the following before choosing a short code or page template to provide a custom design.

How to integrate custom design into the page?

A normal WordPress page contains multiple sub-templates such as header, sidebar, content, and footer. First, let’s take a look at the web page structure using the following screen:

The page must contain header, footer, and content. The sidebar is optional and we can align it to the right or left according to our preferences. Now, let's see how custom designs created with shortcodes and page templates fit into the above pages.

Short codes can be inserted into the content editor in the creation area of ​​the admin panel page. Therefore, any design generated from short code only applies to page content. Unless we customize the template file, we cannot use short code to create custom designs for the header, footer, and sidebar. Page templates are placed in the topic as separate files. Therefore, we can customize the page template file and add a different type of design to each of the four components displayed in the above screen.

Conclusion

If you need to customize the entire page, you should prioritize the page template. Short codes are suitable for adding custom designs to the main content area.

Fill data into custom design

Theme developers cannot just create templates with sample data and then ask users to manage their own data by changing the source file. WordPress is a content management system where users should be able to use the management area to populate data into custom designs. WordPress provides the ability to add dynamic data to a page using custom fields. However, non-technical users are not familiar with adding necessary keys and values ​​to custom fields. Therefore, most theme designers use the theme's options panel to populate data into predefined page templates. The disadvantage of this method is that each page template can only have one page. Allowing data on multiple pages will make the option panel very complex and difficult to handle. Here is the example options panel for populating data to the home page:

On the other hand, it is much easier to fill data with short codes. In the tinyMCE editor, we can create custom buttons to insert short codes. After clicking the button, the short code will be placed in the page editor, and you can fill the short code with the necessary data as needed. The following image shows a content editor with shortcode buttons for generating custom designs:

This is the most commonly used and effective method. We can create multiple pages using the same shortcode design template and populate relevant data as attributes.

Conclusion

Short codes are more effective when you need to use the same design template on multiple pages.

Add custom designs to existing themes

Advanced themes usually contain a set of built-in page templates or custom page designs. But, suppose we want to create a new design template that is not available by default. Let's look at possible solutions using shortcodes and page templates.

Page Template

We can create a new design as a page template and copy it into the theme folder to work immediately. Each page template is placed in the active theme folder. Once we change the theme, all content using our new design page crashes because there is no template for that page in the new theme.

Short code

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

Conclusion

Whenever you need a new design template, create a short code in the plugin to make the template compatible with multiple themes.

How to choose short codes and page templates

In the previous section, we discussed three different aspects to consider when selecting a short code or a page template. Now let's look at some common guidelines to ensure we use these technologies effectively.

Reusability

Short codes are more suitable when you want to use the same template multiple times. Page templates are more suitable for a single static page. Pages such as home page, about, contact are used as independent pages in most cases. Therefore, page templates are suitable for these pages. It is best to create dynamic pages such as services, portfolios, projects, etc. as shortcode templates.

Dependence

Shortcodes can be used as theme-independent components, while page templates rely on themes and styles. If you are creating a common design template, make sure to create it as shortcode in the plugin to make it compatible with cross-themes.

Porability

Short code templates are easier to port than page templates. You can place shortcodes anywhere on the page and can be used multiple times. On the other hand, you need a complete page to use the page template design.

Easy to use

Page templates are provided by the topic. As a user, you just need to select a page template for any given page. The short code and necessary data are placed in the page content editor. Therefore, there is a good chance that you delete the content by mistake. In this case, all data with a complete design will be lost. Compared with short codes, page templates are permanent and not prone to errors. Therefore, from a user's perspective, page templates are easier and safer to use.

Overall conclusion

There is no clear conclusion on which custom template design method is better. In most cases, this depends on the combination of various factors mentioned in this article. You must pay attention to the specific situation and choose the method that best suits the specific situation.

I hope my analysis will help you better understand the difference between using short codes and page templates, and which method is better for your own custom page design. Now you should be able to select a shortcode or page template for the following three scenarios:

1. Design a 3-column page without a sidebar
2. Design an advertising page for your blog
3. Design a price list to show package prices for different products and services

Looking forward to sharing your answers and reasons in the comment section.

WordPress Page Design FAQ: Short Codes and Page Template

• What are the main differences between short codes and page templates in WordPress?

The short codes and page templates in WordPress are used differently. Short codes are small pieces of code that can be inserted into your posts and pages to add specific features or design elements, such as buttons, forms, or sliders. Page templates, on the other hand, are files that determine the layout and design of specific pages or page groups on a WordPress website. They can be used to create unique layouts for different parts of a website, such as portfolio pages, blog pages, or contact pages.

• How to create custom page templates in WordPress?

To create a custom page template in WordPress, you need to create a new PHP file in the theme directory. You can name this file as you like, but it should end with ".php". At the top of this file, you need to include a comment that WordPress will use to identify this file as a page template. This comment should look like this: /* Template Name: 我的自定义页面 */. After this, you can add any HTML, PHP, or WordPress functions you want to use in the template.

• Can I use shortcodes in my custom page template?

Yes, you can use shortcodes in custom page templates. To do this, you need to use the do_shortcode function provided by WordPress. This function allows you to execute short code in a PHP file. For example, if you have a shortcode that shows a contact form, you can include it in your page template like this: echo do_shortcode('[contact-form]');.

• How to assign custom page templates to pages in WordPress?

To assign a custom page template to a page in WordPress, you need to edit the page to which you want to assign a template. In the Page Editor, look for the Page Properties box on the right. In this box, you will see a drop-down menu marked "Template". Click this menu and select the template you want to use. Then, save your changes and view your page to see the new template.

• Can I use both shortcodes and page templates on the same page?

Yes, you can use both shortcodes and page templates on the same page. You can insert short codes into the content of the page and use page templates to control the overall layout and design of the page. This provides you with a lot of flexibility in designing and building pages.

• What are the restrictions on using short codes or page templates?

The main limitation of using short codes is that if you have many short codes on your website, they can sometimes be difficult to manage. If you change the theme or disable the plugin that provides shortcodes, the shortcode will no longer work and will be visible on your website. Page templates, on the other hand, are topic-specific. If you change the theme, you need to recreate the page template in the new theme.

• Can I create a custom page template without writing code?

Yes, there are several WordPress plugins that allow you to create custom page templates without writing any code. These plugins provide a drag-and-drop interface that you can use to design page templates. Some popular options include Elementor, Beaver Builder, and Divi.

• How to update custom page templates?

To update the custom page template, you need to edit the PHP file of the template in the theme directory. Make the required changes and save the file. Changes will be applied to all pages using the template.

• Can I use shortcodes in my gadget?

Yes, you can use short codes in your gadgets. To do this, just add the Text widget to your widget area and insert your shortcode into the widget's content area.

• How to create shortcodes in WordPress?

To create a short code in WordPress, you need to add the function to the theme's functions.php file or custom plugin. This function should use the add_shortcode function provided by WordPress to register new shortcodes. The add_shortcode function takes two parameters: the name of the short code and the callback function that defines the short code function.

The above is the detailed content of WordPress Page Design: Shortcodes v Page Templates. For more information, please follow other related articles on the PHP Chinese website!