“Buttons” w/ Classic Editor
Presented here are methods to create buttons using the Classic editor.
- These examples are aimed at advanced users who are familiar with using HTML and CSS – for the truly intrepid.
- To fully appreciate the info in these examples, be sure to view live page versions in addition to edit mode.
- Edit mode views are not the same as a published view because one can not see can’t see some of the styling in Edit mode.
- The process for creating buttons in Classic, step wise illustrated below.
- The process involves adding HTML and CSS to a link while editing in Text mode.
- Code used for the process is available in a file linked from References, below.
- The example code can be “tweaked” by adjusting values for such parameters and padding, color, etc.
Here’s a sample “button” that I created as an illustration in Tips. It is just text surrounded by a <span> to apply styling:
.View the underlying HTML and CSS in Text view. (Tip: hover over this mock icon.)
HINT: To find content of interest in Text mode, select some text immediately adjacent to the mock button, e.g., select “view.” When switching to Text mode, the relevant code will be easier to find – scrolling thru the view, one will see the selected text highlighted and near the code.
Derived from the above is this button with a link:
The steps in its creation appear below. Look at the button in live and in Text view. Note the improved appearance of the link cast as a button to a “standard” hyperlink: R’Life.
Make Button w/ Link
The above button was created by,
- Creating hyperlinked text with the Classic link tool .
- It will look like this: R’Life Home.
- The underlying code, revealed in Text mode, appears below. (An image is used to show the code – if “real” text had been used to represent the code, it would be mangled by WP into a link!)
- Note: code for these examples is linked below under References.
Add <span> with styling
- Edit the underlying HTML / CSS, for newly created link, in Text mode.
- tsyling is used to create buttons with colored text and backgrounds (“fill”) as well as borders which can be rounded and have other styling effects.
- For the code appears below. (It is not an exact representation because of display limitations – some spaces do not show.)
Deconstructing the above HTML / CSS:
- A <span> envelopes all of the link code, that is it encapsulates from <a href . . . to </a>.
- The border attribute puts an outline around all of the content.
- size is 1px
- solid line
- color black
- thickness 1px
- background-color is #ffff00 which is the hex code for a shade of yellow.
- border-radius 6px establishes the curvature of the corners so they are not 90° angles.
- padding 4px creates space around the text.
- title is the content for hover text, in this case, “Go to home page.”
- Another example appears at the top of the page. In live view, hover over “WordPress.com View” to see an implementation of the title attribute.
- The title attribute is commonly embedded in the code for the hyperlink but, in this case, is part of the <span> so that, no matter where one hovers over the button, the pop-up text appears.
- <a href . . . </a> is the link to go to.
- NOTE there are spaces before <a href . . . and after </a>. This provides additional “fill” around the text so that the border does not impinge on link text.
- These leading and trailing spaces are in the beginning of the <span>-ed content.
- As illustrated in the next example, other properties can be added to style the button, e.g., font-size, font-weight (e.g., bold), font-style (e.g., italic), font-decoration, etc. In short, there is a plethora of options available, many only by using CSS.
- rel and target are needed to make the link open in a new tab.
More Advanced Example
This button was created by changing the styling. In Text mode, we see:
- font-weight makes text bold, a matter of preference
- the border was changed to 2px and blue
- background-color is new, coded with the hex value #f6e7fb
- Most noteworthy is the padding.
- The values are in the order for top, right, bottom, left.
- They are expressed in the unit “em” – an “em” is the size of a character.
- Sizes in em are good because they expand and contract in proportion to the size of the text. Units of px are fixed sizes – non proportional.
- Most importantly, the use of padding obviates the need for using spaces as “fill” before and after the button text. This is good because WP does funny things with spaces in this context.
Make Good Choices – Colors / Font Size
- Color Choices for text and backgrounds should be chosen for good contrast and ease of reading. An example of poor choices, commonly seen on web sites, is blue or red text on a black background. It looks “snazzy” to some but there is very poor contrast between text and background – making the text nearly impossible to read.
- Font size do not try to cram a lot of text into a given space to “make it fit.” This also makes content hard to read.
– a file with the HTML / CSS used in the above examples. These examples may be used as “templates” by making minor changes to the text In such cases, update both the URL and the Title attributes. Other modifications can be made to other parameters to change the look of the button.
W3C Schools is an excellent, authoritative source of info about HTML and CSS. It is your tipster’s primary source of info for writing HTML and CSS code. Tutorials guide the user in using HTML and CSS.
- The examples, in these references linked below, present methods for styling content with CSS in the <head> of a document. In our examples, this is not possible in WP. So the CSS and other attributes, for content described in this example, are contained in the styles contained in a <span>, which wrapped around the content – a link in this case.
- A good ref on creating “‘buttons” with CSS is CSS Buttons,
Learn how to style buttons using CSS.
- Useful, related topics at W3C Schools:
- CSS Reference – an index to CSS properties
- Background Color Property
W3 Schools has several useful refs related to colors. While the color property can accept words for color names, this is only for a limited set of colors, e.g, white, black, red, etc. To get different hues, use the hex value for a color, enabling a much wider variety of colors and hues. Useful refs:
- HTML Color Picker Preferred for “fine tuning” of colors. Easier to use
- HTML Colors
- HTML Colors – Hex Ref
- Word-wrap and Line Breaks: The buttons may contain text which can be “broken” across lines induced by word-wrap forced by WP, so, be sure to view the product with various width view ports to avoid a weird look caused by breaking the link with word-wrap.
- The use of padding, as described above in the More Advanced Example, may help overcome this problem.
- In some cases line breaks caused by word-wrap can be avoided by using a non-breaking space, ( ) in place of a “real” space but, as in these examples, WP strips out non-breaking spaces.
- Precision: One must be very careful to write code very precisely. One miss-placed character can cause consternation and frustration – just like in programing in a computer language, e.g., FORTRAN.
- G’berg Not – Using these techniques with the Gutenberg / Block editor may not always work and produce strange errors, e.g., ‘attempt block recovery.” In such cases, one might need to just give up!
- Your tipster has succeeded in creating styled content with the Classic editor and pasting the HTML into a G’berg document.
Return to top-level
Tips for Writers