How to display code in WordPress manually?
An open-source website creation tool is written in PHP. It’s probably the simplest and most powerful blogging and website content management system today.
In case you are working with WordPress to publish on the web, it proves that you are in good company you’re in good company. Several familiar blogs, news outlets, music sites, Fortune 500 companies, and celebrities are working with WordPress.
The famous users of WordPress are Mashable and TechCrunch and the News outlets like The New York Times’ blogs and CNN’s on-air personality blogs.
It is an accomplished website foundation for different websites. It is a skilled CMS from blogging to e-commerce to business and portfolio websites.
Few websites built with WordPress:
To customize or to adopt a WordPress website the possibilities are endless. Themes and plugins of WordPress can add new design options and insert purpose.
Reasons for using WordPres
There are six reasons for using WordPress
· WordPress is Free as in Freedom
· It is Easy to Customize with Themes and Plugins
· Can Handle Different Media Types
· Make a business website
· Build a membership website
How to display code in WordPress manually?
There are three methods to display code manually. They are
· Display Code Using The Default Editor in WordPress
· Display Code in WordPress Using a Plugin
· Display Code in WordPress Manually
Method 1. Display Code Using The Default Editor in WordPress
· This is suitable for beginners and users who don’t need to display code very often.
· At first, if you want to display the code, you have to edit that particular blog post.
· Add a new code block which is displayed on the post edit screen
· In the text area, type the code fragment.
· Now save your blog post and preview it to see the code block in action.
· Based on the theme of WordPress, the code block may be varied.
Method 2. Display Code in WordPress Using a Plugin
Here we are using a plugin to display code. This is for users who often display code in their articles.
It permits to display any code in any programming language in an easy manner.
· It shows the code with syntax highlighting and line numbers
· At first, install and activate the SyntaxHighlighter Evolved plugin.
1. Insert the ‘SyntaxHighlighter Code’ block to your post displayed on the post edit screen.
2. Now the new code block is displayed on the post edit screen. add the code and select the block settings from the right column.
3. Initially select the language for your code. Then turn off line numbers, provide first line number, highlight any line you want, and turn off the feature to make links clickable.
4. Once it gets finished, save your post and click on the preview button to see it in action.
5. The plugin consists of several color schemes and themes. If you want to change the color theme, visit Settings » SyntaxHighlighter page.
6. From the settings page, choose a color theme and modify SyntaxHighlighter settings. Now save your settings to see a preview of the code block at the bottom of the page.
Using SyntaxHighlighter with Classic Editor
This is used to add code to your WordPress blog posts. Just coat the code around square brackets with the language name. For example, if you are going to add PHP code, then do this below method.
private function get_time_tags() {
$time = get_the_time(‘d M, Y’);
Likely, to add an HTML code, then wrap it around the HTML shortcode like this:
<a href=”example.com”>A sample link</a>
Method 3. Display Code in WordPress Manually
This advanced method because it needs more work and does not always work as intended.
It is suitable for users with the old classic editor and wants to display the code without using a plugin.
Initially pass the code through an online HTML creature encoder tool. It will modify code markup to HTML entities, which will permit you to insert the code and bypass the WordPress cleanup filters.
In the text editor copy and paste code and wrap it around <pre> and <code> tags.
And the code seems to be:
<p><a href="/home.html">This is a sample link</a></p>
Save the post and preview the code in action. Finally, the browser will convert the HTML entities and users will be able to see and copy the correct code.
We hope that this article will be helpful to the display the code manually. For more information, like us on social media such as Facebook and Twitter. For video tutorials, subscribe to our YouTube channel “Server Firm India”.
