How to Add Buttons in WordPress Classic Editor

Add buttonIt can enhance the visual effect and user experience of the page. This article will introduce three methods:Inserting HTML manually respond in singing CSS(math.) genusutilizationplug-in (software component)and the combination of TinyMCE Advanced pluginQuick implementation of button functionalityThe

Method 1: Insert HTML and CSS manually

This method is suitable for users who don't rely on plugins to achieve fully customized button effects by editing HTML and CSS.

Steps:

1. Switching to "Text" mode
   Open the WordPress Classic editor and click on the Text tab to go to the Text view.

2. Add HTML button code
   Insert the following code at the location where the button needs to be added:<a class="custom-button" href="https://example.com" target="_blank">Click here</a>Here:
   • href: The link address of the button.
   • target="_blank": Set the link to open in a new window.

3. Adding custom CSS
   Open "Appearance -> Customize -> Extra CSS" and add the following code:
   • These CSS properties:
   • background-color: The background color of the button.
   • color: Button text color.
   • padding: The inner margin controls the button size.
   • border-radius: Rounded corners effect.
   • :hover: Style change on mouse hover.

.custom-button { background-color: #3498db; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 5px; display. inline-block; } .custom-button:hover { background-color: #2980b9; }

4. Save and Preview
   Click the "Update" or "Publish" button to preview the page to see how the button will look.

Method 2: Add a button using a plug-in

If you're not familiar with the code, you can opt for a plugin to quickly implement the button functionality.

Recommended Plugins:Shortcodes Ultimate

1. Installation of plug-ins
   • Go to WordPress Dashboard -> Plugins -> Add New Plugin.
   • look for sth. Shortcodes UltimateThen click "Install" and activate the plugin.

2. Add button
   • To edit a post or page, on the editor toolbar, find "Insert short code"Button.
   • Select from the list "Button"Options.
   • Fill in relevant properties such as button text, link address, color, size, etc.
   • Click the "Insert" button, the plug-in will automatically generate the following short code:

[su_button url="https://example.com" target="blank" style="flat" background="#3498db" color="#ffffff" size="5" radius="5"]Click here[/ su_button]

3. Save and view results
   The plugin automatically applies styles and you can view the appearance of the custom buttons directly on the front end.

Method 3: Combine with TinyMCE Advanced plug-in

If it is required to be in the Classic Editor ToolbarTo add a button option directly to the Advanced Editor Tools Plug-ins.

1. Installation of plug-ins
   • Go to Plugins -> Add New Plugin, Search Advanced Editor ToolsThe
   • Click "Install" and activate.

2. Customized toolbars
   • Once the plugin is activated, go to "Settings -> Advanced Editor Tools".
   • Drag the "Button" related tool to the toolbar.

3. Add button
   Select the button option in the editor and edit the button text, link and style.

Notes and Tips

• responsive design: Ensure that the buttons display well on mobile devices, and that specific styles can be set for different screen sizes via media queries.
• Optimize loading speed: Minimize unnecessary CSS code to avoid impacting site performance.
• safety: Add for links rel="noopener noreferrer" attribute to increase security and prevent potentially malicious operations.

summarize

There are several ways to add buttons to the WordPress Classic editor. By manually inserting HTML and CSS, you can get a completely customized look, while using a plugin provides a convenient way to do it for those unfamiliar with thecodingusers; in combination with the TinyMCE Advanced plug-in, it is also possible to directly add a new user account in theUsing buttons in the toolbarOptions.