Discover how to create custom WordPress shortcodes without installing any additional plugins, giving you increased website speed, better security, and full control over features. Below are detailed step-by-step instructions, with specific examples from simple to advanced, so you can easily create powerful and flexible shortcodes for your website today.
What is a WordPress shortcode and why should you create it yourself without a plugin?
Shortcode WordPress là gì? Đây là những đoạn mã ngắn gọn giúp thực thi các chức năng phức tạp, và việc tự tạo chúng không dùng plugin giúp giảm tải cho server, tăng cường bảo mật và cá nhân hóa tối đa.
Shortcode definition: Multipurpose "shortcode" in WordPress
Shortcode (hay còn gọi là mã ngắn) là những đoạn mã đặc biệt được đặt trong cặp ngoặc vuông, ví dụ như [xinchao]. Chúng hoạt động như một phím tắt, cho phép người dùng chèn các tính năng phức tạp hoặc nội dung động vào bài viết mà không cần phải am hiểu hay viết trực tiếp các đoạn code dài dòng. Hệ thống quản trị WordPress sẽ tự động dịch các mã ngắn này thành mã HTML tương ứng khi trang web được hiển thị cho người truy cập.
Outstanding benefits when writing Shortcode yourself compared to using plugins
Applying how to create shortcodes in wordpress without a plugin brings dual benefits: both eliminating redundant source code from third parties and limiting risks to wordpress security.
Here are thebenefits of creating wordpress shortcodes manually:
- Tối ưu tốc độ: Các plugin thường tải kèm CSS và JS dư thừa. Tự viết code giúp mã nguồn website nhẹ nhàng và tải trang nhanh hơn.
- Toàn quyền kiểm soát: Bạn thiết kế chức năng theo đúng ý đồ của mình, không bị gò bó bởi các thiết lập có sẵn.
- Bảo mật cao: Giảm thiểu nguy cơ bị tấn công qua các lỗ hổng từ plugin không được cập nhật thường xuyên.
At Pham Hai: Personal Blog, we find that building these small features ourselves helps the website operate extremely smoothly. Besides shortcodes, if you want to professionally extend your website's data structure, learning create custom post type wordpress code is an extremely worthwhile upgrade.
Quick Comparison: WordPress Custom Shortcodes and Block Editor
Although WordPress block editor (or Gutenberg) is very powerful in terms of visual interface, shortcodes still prevail when it comes to inserting complex PHP code or reusing content quickly.
| Criteria | Custom shortcodes | WordPress Block Editor |
|---|---|---|
| Tính linh hoạt code | Extremely high (runs PHP directly) | Limited to available blocks |
| Sự tiện lợi | Type text quickly | Needs drag and drop operations and fine-tuning |
| Tái sử dụng | Very easy everywhere | Need to create Reusable Block |
Understanding the shortcode pros and cons will help you perfectly combine the modern block editor with the power of traditional code.
Detailed instructions on how to create custom WordPress Shortcodes (A-Z)
To follow how to create custom wordpress shortcodes, you just need to prepare a child theme, write a PHP processing function and register it with the system via the Shortcode API.
Preparation work: Always use Child Theme and functions.php file
Before starting writing wordpress shortcodes with code, make sure you are working on the functions.php file of a child theme to avoid losing data when updating the parent theme.
Theme con đóng vai trò như một tấm khiên bảo vệ các tùy chỉnh của bạn. Khi theme chính (Parent Theme) có bản cập nhật mới, mọi đoạn code bạn thêm vào functions.php của theme con vẫn được giữ nguyên. Tuy nhiên, nếu bạn dự định tạo ra hàng chục shortcode với các chức năng đồ sộ, việc nhồi nhét tất cả vào file functions có thể gây khó quản lý. Trong trường hợp đó, hướng dẫn viết plugin wordpress sẽ cung cấp cho bạn một hướng đi khoa học và độc lập hơn.
Step 1: Write the PHP Callback function - "The brain" of the Shortcode
Hàm callback là một đoạn mã PHP chứa logic hoạt động của shortcode, quyết định những gì sẽ được hiển thị ra ngoài giao diện HTML của người dùng.
This is where you define what your shortcode will do. The basic structure of a callback function is as follows:
function phamhai_chao_mung_callback() {
$thong_diep = '<p>Chào mừng bạn đến với Phạm Hải: Blog cá nhân!</p>';
return $thong_diep;
}
Lưu ý quan trọng: Trong hàm callback, bạn luôn phải sử dụng lệnh return để trả về giá trị, tuyệt đối không dùng lệnh echo.
Step 2: Register the Shortcode with WordPress using the add_shortcode function
Once you have the callback function, you use the add_shortcode function of the Shortcode API to associate the shortcode name with the handler function you just created.
Cú pháp của hàm này rất đơn giản và là cốt lõi của cách tạo shortcode tùy chỉnh không dùng plugin:
add_shortcode( 'ten_ma_ngan', 'ten_ham_callback' );
Applying to the example in step 1, we have:
add_shortcode( 'loichao', 'phamhai_chao_mung_callback' );
Bây giờ, khi bạn gõ [loichao] vào bài viết, dòng chữ chào mừng sẽ xuất hiện.
Example 1: Create a simple Shortcode to display a welcome message
creating a simple wordpress shortcode only takes a few lines of code, helping you output a fixed piece of text or HTML code anywhere on the page.
Đoạn code hoàn chỉnh để dán vào functions.php:
function phamhai_simple_shortcode() {
return '<div class="welcome-box"><strong>Cập nhật 2026:</strong> Chúc bạn một ngày tốt lành!</div>';
}
add_shortcode( 'thongbao', 'phamhai_simple_shortcode' );
Example 2: Create a Shortcode with attributes to create a custom call-to-action button (CTA button)
Để tạo shortcode wordpress có tham số, bạn cần trích xuất các thuộc tính shortcode bằng hàm shortcode_atts(), giúp mã ngắn trở nên linh hoạt và có thể tái sử dụng với nhiều nội dung khác nhau.
Parameters make shortcodes smarter. Here's how to create a button that can change color and path:
function phamhai_cta_button( $atts ) {
// Thiết lập giá trị mặc định cho thuộc tính
$a = shortcode_atts( array(
'link' => '#',
'color' => 'blue',
'text' => 'Nhấn vào đây'
), $atts );
return '<a href="' . esc_url($a['link']) . '" style="background-color:' . esc_attr($a['color']) . '; padding: 10px 20px; color: white; text-decoration: none; border-radius: 5px;">' . esc_html($a['text']) . '</a>';
}
add_shortcode( 'nut_bam', 'phamhai_cta_button' );
Cách dùng: [nut_bam link="https://google.com" color="red" text="Tìm hiểu ngay"]
Example 3: Create a Shortcode that wraps the content (enclosing shortcode) to create a special notification frame
Dạng shortcode này sử dụng cú pháp shortcode dạng đóng/mở (ví dụ: [khung]Nội dung[/khung]), cho phép bạn bọc một đoạn nội dung bên trong các thẻ HTML định dạng sẵn.
function phamhai_box_shortcode( $atts, $content = null ) {
return '<div class="custom-notice-box" style="border: 2px solid #ffcc00; padding: 15px; background: #fffde7;">' . do_shortcode($content) . '</div>';
}
add_shortcode( 'khung_chu_y', 'phamhai_box_shortcode' );
Biến $content sẽ lấy toàn bộ văn bản nằm giữa thẻ mở và thẻ đóng của shortcode.
How to use and insert the newly created Shortcode into the website
After how to create a custom shortcode without plugin successfully, you can easily call it in post, page, widget or directly in the template file.
Add shortcodes to posts and pages using Block and Classic editors
Cách thêm shortcode vào bài viết wordpress rất đơn giản: bạn chỉ cần gõ mã ngắn vào block "Shortcode" trên trình soạn thảo mới hoặc dán trực tiếp vào khung soạn thảo cổ điển.
- Với Block Editor: Nhấn dấu
+, tìm block có tên "Shortcode" và nhập mã của bạn (ví dụ:[loichao]) vào ô trống. - Với Classic Editor: Bạn chỉ việc gõ trực tiếp mã ngắn vào bất kỳ vị trí nào trong phần nội dung văn bản.
How to use shortcodes in Widgets in sidebar or footer
Cách sử dụng shortcode trong widget wordpress đòi hỏi bạn thêm một block shortcode vào khu vực Text Widget, giúp hiển thị nội dung tùy chỉnh ở sidebar hoặc chân trang.
From the latest WordPress versions, the default Text Widget and Block Widget support shortcode execution. Go to Appearance > Widget, select the area you want to display (like Sidebar) and drag and drop the Shortcode block there.
Advanced technique: Call the Shortcode directly in the theme's template file with the do_shortcode function
To insert a shortcode directly into your theme's PHP files to customize your website further, you must wrap it inside the do_shortcode function.
Nếu bạn đang chỉnh sửa file header.php hoặc footer.php và muốn hiển thị shortcode, bạn không thể gõ [loichao] trực tiếp như trong bài viết. Thay vào đó, hãy sử dụng cú pháp PHP sau:
<?php echo do_shortcode('[loichao]'); ?>
This technique is extremely useful when you design dynamic interfaces. To fully exploit the power of template files and display article data professionally, mastering the wp_query wordpress loop is a must-have skill for every developer.
Important notes for using Shortcode effectively and safely
When intervening in source code, you need to pay special attention to security principles, optimize page loading speed and know how to check basic errors.
Security issues: Guidelines to follow when adding code to functions.php
To ensure wordpress security, always sanitize input data from parameters and escape output data before displaying it to the browser.
Khi nhận dữ liệu từ người dùng thông qua các thuộc tính shortcode, tuyệt đối không tin tưởng dữ liệu đó. Tại Phạm Hải: Blog cá nhân, chúng tôi luôn khuyến nghị sử dụng các hàm bảo mật tích hợp sẵn của WordPress như esc_html() cho văn bản, esc_url() cho đường dẫn và esc_attr() cho các thuộc tính HTML (như ví dụ 2 ở trên).
Optimize performance: Avoid writing overly complex processing functions in shortcode
The shortcode runs every time the page loads, so cramming heavy database queries into callback functions will slow down your website significantly.
If your shortcode needs to retrieve large data from the database (such as a list of the 100 latest posts), consider using the Transient API to cache the results, avoiding the server having to reprocess the same query multiple times.
Common errors when creating shortcodes and how to quickly fix them
Lỗi phổ biến nhất là sử dụng echo thay vì return trong hàm callback, khiến nội dung shortcode hiển thị sai vị trí (thường nhảy lên đầu trang).
Khi bạn dùng echo, chuỗi văn bản sẽ được xuất ra ngay lập tức tại thời điểm WordPress xử lý hàm, trước cả khi nội dung bài viết được sắp xếp xong. Để khắc phục, hãy luôn gán nội dung vào một biến (ví dụ $output = 'Nội dung';) và dùng lệnh return $output; ở cuối hàm.
Creating your own custom WordPress shortcodes without plugins is an extremely useful skill that will help you get rid of dependence on third-party plugins. By mastering this technique, you not only optimize the performance and security of your website, but also have maximum flexibility to customize every feature according to your ideas, enhancing the professionalism of your website.
Are you ready to create your first shortcode? Try it now and share your results or any questions you have in the comments section below!
Lưu ý: Các thông tin trong bài viết này chỉ mang tính chất tham khảo. Để có được lời khuyên tốt nhất, vui lòng liên hệ trực tiếp với chúng tôi để được tư vấn cụ thể dựa trên nhu cầu thực tế của bạn.
