View the WordPress visual editor. Although there are several standard options to specify the format and style of content, there is not much customization, because customization makes posts and pages look slightly beautiful. Now you can move back and forth between the text editor and visual editor of word press, insert some CSS to generate buttons, text blocks, etc. Text editors with code editing experience seem timid. If you can create your own custom style, will it be more convenient to place it in the drop-down menu of the word press editor and choose to use it when necessary? Yes, because it is much easier, I would like to briefly introduce this method here. Although we are trying to make this process as simple as possible, if you want to find all the advantages of custom styles, it will be helpful if you have some knowledge of CSS. The
Let’s take a look at how to add custom styles to the WordPress visual editor. If you want to use the first option, that is, add code and add custom styles to WordPress visual editor, you need to know a little about how to integrate and modify CSS, but we will provide some guidance to help you learn the basics so that you can use them later. This is a good option if you do not want to reduce the weight of your site through plug-ins. The key point is to add a new drop-down menu containing custom styles in the word press visual editor, which provides the function of selecting elements from the editor and then applying custom styles. Functions when developing new topics. If you browse a PHP file and put the following code in it, or use a built theme, you can use this code as a function of a sub theme. Paste into the PHP file. The
Function myprefix\u mce\u buttons\u 1 ($buttons) {array\u unshift ($buttons,’styleselect’); return $buttons;} Add\u filter (‘mce\u buttons\u 1′,’myprefix\u mce\buttons\u 1′); When you return to the editor from one of the word press posts, a new format button appears at the top of the editor. \
Now that the menu item has been activated, it is time to add the custom style to be used in the post. Use the code listed below to implement the function. After pasting into the PHP file, the format drop-down menu will add two new styles: \
\/\/Wrap a span around the selected content’classes’= >’text highlight’ \/ \/ class name used for CSS),)$ Init\u array[‘style\u formats’] = json\u encode ($style\u formats); Return $init\u array;} Add\u filter (‘tiny\u mce\before\u init’,’myprefix\u add\format\u Styles’); You can change the title, display different names in the drop-down menu, add \/ remove items from the array, and so on. You can modify almost all items in this code to display custom formatting styles. A detailed description of the allowed parameters and return values. The
Now that you have the new style, you can highlight the content in the editor and apply the style. Note the method of selector parameters in the topic button format. That is, the style can only be applied to a specific selector (in this case, the \
You can now use custom formatting, but it looks completely indistinguishable until you add custom CSS to your site to specify styles. You must find the style sheet for the theme (if you build your own theme) or sub theme, and paste the following CSS code into the file. Male Theme button {display: inline block; padding: 10 15px; color: \fff; background: \1796c6; text decoration: none;} Theme button: hover {text decoration: none; opacity: 0.8;} Text highlight {background: \ffff00;} Now, you can add styles to the new format in the front end and view them in real time when they are applied. Ah! However, when applying styles, is it good to view them in the actual editor? To do this, you must use the WordPress editor style sheet feature. If you are creating your own theme, you may want to create a new CSS file called \
Function myprefix\u theme\add\editor\u styles() {add\editor\u style (‘editor style. Css’);} Add\u action (‘init’,’myprefix\u theme\u add\editor\u Styles’); If you use someone else’s topic, you must add it to the sub topic. If the parent theme does not conflict, or if the parent theme already has a CSS file, you must specify a unique name. The editor can actually be copied and pasted into sub topics (without adding the PHP code above). Before loading the editor CSS file of the parent theme, WordPress first checks the sub theme and adds a new CSS after finding it. But please load it in the children’s theme. The
If you don’t have time to play with custom styles and add code in word press visual editor, or you can’t see that this is a great plug-in, then this is good news. There is a plug-in that can accurately complete the task just performed above without using code. The TinyMCE custom styles plug-in only needs to search, install, activate, and activate on the WordPress website. Male word press dash
Navigate to settings >tinymce prof.styles on the left side of the board. Where to modify plug-in settings. The
The plug-in allows you to select the location of the style sheet or the location to place it. It is recommended to create a new custom directory. Select the third option, specify the directory name, and then move down to the bottom of the page. Before continuing, click Save settings options. If you have saved the settings, scroll down and select the add new style button. Here, you can customize the custom style according to your needs. By default, this is a simple Web-based editor for generating CSS code. Enter the title to display in the drop-down menu. Select the desired selector, inline, or block type. Use the screenshot above to populate CSS classes and styles, or create your own style for the purpose of using the drop-down menu. When you are finished, click Save settings at the bottom of the page. The
It is now time to check the appearance of the new custom style in the editor. Open a new post or page and find the format drop-down menu on the left side of the visual editor. Appears on the second line. Click the drop-down menu to display the new style you just created. The big blue button option or all content generated by clicking will be displayed in the editor. To use it, highlight the text you want to format, and then click options! That’s the conclusion! You can view the word press Codex page on this topic to learn how to use the new style. The
If you have any questions about how to add custom styles to the WordPress visual editor, please let us know in the comments section. Also, in order to make the website look cooler, please freely share the unique style of production!
