Insert code examples in a WordPress article

Create the article and the code

If the article and the code already exist go directly to the Insert the code example in the WordPress article you are writing section.

Create the article on WordPress without code examples

The WordPress web site has already been created and is online. You have access to the dashboard and have the rights to write articles.

The main thing is that the code must be inserted when being in the Classic editor.

1. In the dashboard, click on Post > All Post > Add new.
2. Insert the title of your article.
3. Then click on the 3 dots menu access on the top right.
4. Select Code Editor.
5. Start writing your article (only one sentence is enough).
6. Click on the Exit Code Editor link at the top right side of the article or Go back to the right menu bar (step3) and select Visual Editor.
7. Your are on the Classic Editor: Great! You can write your article and apply headings, color, bold…
8. Do not forget to Save the Draft frequently.

Before talking about inserting code, let’s talk about writing or getting code.

Get the code example from your Editor

I am used to utilize VS Code. Try the same steps on your own code editor.

Remark: copying and pasting code from a blocNote does not run because the code will consider as text not as code!

1. Open the file you want to extract code from in VS Code.
2. Control that the code is correct and correctly formatted.
3. Select and copy the extract your want to use in your article.

Okay, we have copied the code to be inserted. Now, we have to paste in the right place.

Insert the code example in the WordPress article your are writing

Until now, we have written the article and got the extract of code; the next step is to insert it in the correct place in the article.

1. Go back to the article. If you had closed it, re-open it (dashboard > Posts > All posts > Select the post > Edit.
2. Control you are in the Classic Editor (Exit the Code Editor).
3. Go to exact place you want it to be displayed.
4. Paste the extract of code.
5. If all the steps have been respected, the code appears in the article in the Visual Editor. Yes! The code is inserted: done! Not exactly: we have to control how it is displayed…
6. Do not forget to Save!
7. Click on Preview. Click Right and Select Open in a New Tab is a good way to work!
8. Oops! The code is there but… it does not look like code!

Maybe we could try to improve the final aspect…

Modify the aspect of the code examples in a WordPress article

There many solutions to improve the aspect of the code depending on:

• the attributed Role,
• the coding skills which are yours,
• whether the inserted code is a block of code or an inline code insertion.

We will start with inline code and then will study the different possibilities for blocks of code.

Modify the aspect of inline code example

Modifying the aspect of the just inserted inline code is very easy.

Apply the standard aspect

1. Go to the Code Editor.
2. Look for the inline inserted code.
3. Just before it insert an HMTL <code> tag.
4. Just after the inserted code, insert an HMTL </code> tag.
5. Save (Save Draft, Update, Schedule depending on the article status).
6. Exit the Code Editor.
7. On the Visual Editor, the inserted code is displayed with a different font on a grey background.
8. Done!
9. Control on the preview. You should obtain the standard aspect. However it is possible to customize it a little:
10. Go back to your article  editor.

Customize the inline code aspect

1. In the Classic Visual Editor, select the part of the code you want to customize.
2. You can customize it in different ways like:
   • apply another color,
   • make it bold, or italic
   • strike through.
3. Save.
4. Control the preview.

The inline code is inserted and customized; the mission has been accomplished. In case the result does not match exactly the expected aspect, modify it with the tools listed above.

If the inserted code is not an inline code but a block of code go to the next section!

Modify the aspect of a block of code example

Modifying the aspect of a block of code is a little bit more complex but not so much. The proposed solution will depend on various factors:

•  If you are the person who is developing the custom theme you can create a specific class in the CSS custom theme file and apply this class to the code. When developing you can choose the font, the color, the background color, the margin, the padding…
• If you are not the blog developer but there is an aspect to respect and you know the corresponding class: apply this class to the code.
• If you are not the blog theme developer and there is no specific class to apply, you can create a custom CSS class in the theme customizer and apply this class to the code. Warning: you must know what you are doing and have coding skills!

Apply a given class

This explanation corresponds to the three first listed situations.

1. You know the corresponding class to apply. Call it .code.
2. Save the article.
3. Switch to the Code Editor.
4. Look for the inserted code. If everything is ok every line of code should be inserted between <div></div> HTML tags and all the block of code should be inserted between <div></div> HTML tags too!
5. Go to the first <div> tag, the one enclosing all the block of code.
6. Insert class=”code” in it.
7. Save.
8. Control the preview.
9. The displayed code aspect should match the expected result.

If the result is not the expected one:

• If you are in the third situation and you have not coded this class yet, there will be no change in the preview! You must code in the customizer: go to the next section for more explanation.
• If you want to make some slight improvements which may be applied via the Visual Editor tools as for the inserted code go to the previous section.

• If you are the developer or you have respected the given class or you are in the third situation after having coded it via the customizer, refer to the given tricks at the end of the article!

Add a class via WordPress additional CSS in the customizer

1. First, think about the aspect you want the code example block have, and class name you want to use. Remark: Do not use one already used in the theme!
2. Go to the correct place to insert this additional CSS in the customizer : Dashboard > Appearance > Customize > Additional CSS.
3. Write your code in the textarea.
4. Control the result and improve your code if necessary.
5. Add the class to the code as we have seen in the previous section.

Tricks to avoid or repair the possible formatting bugs

The code has not the expected aspect

• Go to the Code Editor and control that:
  • the class attribute is correctly written,
  • the class name is the good one and is correctly written,
  • all the opening div tag have an ending tag.
• Correct the error.
• Save.
• control the preview.

The article text is formatted with code class!

When inserted the code a global <div> is created. All the text written after the code insertion will be inserted by WordPress just after the code and just before the ending div tag. As a result the .code class will be applied to the text.

To avoid the text being formatted as the code

1. Write the next paragraph or insert a “blablabla” line after the place the code should be inserted in.
2. Then insert the code.

To repair text formatting

1. Go the Code Editor.
2. Control where is the ending code </div> tag.
3. If it is not just after the code ending, move it to the correct place.
4. Save.
5. And control the preview.

If the problem persists, control first the preview has been refreshed!

If there is no change after having refreshed it, go back to the Code Editor and control every opening <div> tag have its corresponding ending tag. Correct if needed.

In conclusion

Insert code examples in WordPress articles is very easy, isn’t it?

Do not hesitate to show code examples in your next articles.

In the next episode of this series “Insert elements when writing a WordPress article”, I will give some tricks to insert quotes with caption and cite in your WordPress articles.