How to Add Your Code to WordPress?

To add code snippets into your WordPress website, especially formatted code like Python or any programming language, you can follow these steps:

Method 1: Using the Code Block in Gutenberg Editor (WordPress 5.0 and above)

  1. Login to WordPress: Log in to your WordPress dashboard.
  2. Create or Edit a Post/Page:
    • Create a new post/page or edit an existing one where you want to add the code snippet.
  3. Insert Code Block:
    • Click on the + button to add a new block.
    • Search for “Code” or “Code block” and select it.
  4. Paste Your Code:
    • Paste your Python code snippet into the code block area.
  5. Publish or Update:
    • After adding your code, you can preview it within the editor.
    • Click on “Publish” or “Update” to save your changes.

Method 2: Using Plugins (for more customization)

If you need more advanced features or customization options, consider using plugins like “SyntaxHighlighter Evolved” or “WP Code Highlight” plugins. Here’s how to use a plugin like “SyntaxHighlighter Evolved”:

  1. Install the Plugin:
    • Go to Plugins > Add New.
    • Search for “SyntaxHighlighter Evolved”.
    • Click “Install Now” and then “Activate” the plugin.
  2. Create or Edit a Post/Page:
    • Navigate to the post/page editor where you want to add the code snippet.
  3. Insert Code:
    • In the editor, switch to the “Text” mode (if using the Classic Editor) or add a new block and select “Classic” (if using Gutenberg).
    • Paste your Python code directly into the editor.
  4. Apply Syntax Highlighting:
    • Wrap your code snippet with [python] Your Python code here [/python] tags (for SyntaxHighlighter Evolved).

Example:

[python]
Your Python code here
[/python]

Preview and Publish:

  • Switch back to the Visual mode (if using Classic Editor) or preview the post/page to see how the code snippet appears.
  • Click “Publish” or “Update” to save your changes.

Additional Tips:

  • Customization: Plugins like SyntaxHighlighter Evolved allow customization of syntax highlighting themes and options.
  • Verification: Always preview your post/page to ensure the code formatting looks correct.
  • Accessibility: Ensure that the code snippets are readable on both desktop and mobile devices.

Using these methods, you can effectively add formatted code snippets to your WordPress posts or pages, enhancing readability and usability for your audience.

Leave a comment

Trending