{"id":24,"date":"2021-12-17T08:26:14","date_gmt":"2021-12-17T08:26:14","guid":{"rendered":"https:\/\/amitgusain.com\/blog\/?p=24"},"modified":"2022-05-20T11:24:52","modified_gmt":"2022-05-20T05:54:52","slug":"display-code-on-your-wordpress-site","status":"publish","type":"post","link":"https:\/\/hostkicker.com\/blog\/display-code-on-your-wordpress-site\/","title":{"rendered":"How To Display Code On Your WordPress Site"},"content":{"rendered":"<p>This article will discuss how to display Code on your WordPress site. New members on WordPress may find it challenging to display code snippets. Here are some easy and stepwise methods to display Code on WordPress or blogpost. In WordPress, if you want to add Code like other regular text, WordPress will not show it correctly.\u00a0 \u00a0 WordPress is an HTML-based editor, so it processes the Code you enter and prints it.<\/p>\n<p>So here are some step-by-step methods that will help you display Code in WordPress or your blog posts.<\/p>\n<p><strong>How To Display Code On Your WordPress Site.<\/strong><\/p>\n<p>There are the following methods to display Code in WordPress &#8211;<\/p>\n<ol>\n<li>Using the WordPress editor\n<ol>\n<li>Classic Editor<\/li>\n<li>Gutenberg<\/li>\n<\/ol>\n<\/li>\n<li>Using a WordPress plugin<\/li>\n<li>Inserting the Code manually<\/li>\n<\/ol>\n<h2><strong>1<\/strong>. <strong>Displaying Code by using the WordPress editor<\/strong><\/h2>\n<p>The WordPress editor is the easiest way to display Code. This method is for beginners who do not need to display Code frequently. It is of two types-<\/p>\n<h3><strong>1.1 Classic Editor<\/strong><\/h3>\n<p>Classic Editor is an official plugin maintained by the WordPress team that restores the previous (&#8220;classic&#8221;) WordPress editor and the&#8221;Edit Post&#8221; screen.<\/p>\n<p>&nbsp;<\/p>\n<p>If you&#8217;re using the Classic Editor, you can display code snippets using the preformatted text option.<\/p>\n<ul>\n<li>\u00a0Open the post where you want to include the Code.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2021\/05\/sidebar-css.png\" data-wpel-link=\"internal\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-169027\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2021\/05\/sidebar-css-1024x486.png\" alt=\"sidebar css\" width=\"840\" height=\"399\" \/><\/a><\/p>\n<ul>\n<li>\u00a0 Then, Select the code snippet and choose the <strong>preformatted<\/strong> text option.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2021\/05\/preformatted-text.png\" data-wpel-link=\"internal\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-169028\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2021\/05\/preformatted-text-1024x533.png\" alt=\"preformatted text\" width=\"840\" height=\"437\" \/><\/a><\/p>\n<ul>\n<li>Here You will observe how the text changes.<\/li>\n<li>Then, publish the article and check the page.<\/li>\n<li>\u00a0The Code is inside a custom box, as shown below.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2021\/05\/sample-css.png\" data-wpel-link=\"internal\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-169029\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2021\/05\/sample-css-1024x570.png\" alt=\"sample css\" width=\"840\" height=\"468\" \/><\/a><\/p>\n<p>This way, you can display any code in the classical editor on your WordPress.<\/p>\n<h3><strong>1.2 Gutenberg Editor.<\/strong><\/h3>\n<p>Gutenberg is the code name for the new block-based editor introduced in WordPress, known as the &#8220;WordPress block editor.&#8221; To display Code in WordPress by using Gutenberg editor, follow the steps.<\/p>\n<ul>\n<li>First, log in to your WordPress website.<\/li>\n<li>\u00a0Open the post where you want to display the Code.<\/li>\n<li>Search for a block called <em><strong>Code <\/strong><\/em>and select it.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2021\/05\/code-block.png\" data-wpel-link=\"internal\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-169022\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2021\/05\/code-block.png\" alt=\"gutenberg code block\" width=\"837\" height=\"324\" \/><\/a><\/p>\n<ul>\n<li>\u00a0Write your Code there, and publish the post.<\/li>\n<li>In the end, you will see the Code.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2021\/05\/gutenberg-block-code.png\" data-wpel-link=\"internal\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-169025\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2021\/05\/gutenberg-block-code-1024x523.png\" alt=\"gutenberg code\" width=\"838\" height=\"428\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Like this, you can use the Gutenberg editor to display Code on your site.<\/p>\n<h2><strong>2. Displaying Code by using a plugin<\/strong><\/h2>\n<p>In this method, we will be displaying code by using a plugin. This method is for the users who frequently want to display code in their blog posts.<\/p>\n<p>We will be using a WordPress plugin to display code in our blog post. There are different types of plugins. Here we&#8217;ll use<a href=\"https:\/\/wordpress.org\/plugins\/syntaxhighlighter\/\"> SyntaxHighighter Evolved plugin.<\/a><\/p>\n<ul>\n<li>First,\u00a0 go to the plugin, then add new.<\/li>\n<li>Search for SyntaxHighighter Evolved plugin.<\/li>\n<li>Install the SyntaxHighighter Evolved plugin and activate it. Use <a href=\"https:\/\/hostkicker.com\/blog\/how-to-install-a-wordpress-plugin\">our step-wise guide<\/a> for more help.<\/li>\n<li>Now edit the blog post where you want to display code.<\/li>\n<li>On the post edit screen, Add the \u2018SyntaxHighlighter Code\u2019 block to your post.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-62239 lazyloaded\" title=\"SyntaxHighlighter code block - WPBeginner\" src=\"https:\/\/www.wpbeginner.com\/wp-content\/uploads\/2019\/04\/shcodeblock.gif\" alt=\"SyntaxHighlighter code block \" width=\"550\" height=\"301\" data-ll-status=\"loaded\" \/><\/p>\n<ul>\n<li>You will see a new code block in the post editor, enter your code.<\/li>\n<li>After adding the code, you need to select the block settings.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-62240 lazyloaded\" title=\"SyntaxHighlighter code block settings - WPBeginner\" src=\"https:\/\/www.wpbeginner.com\/wp-content\/uploads\/2019\/04\/codeblocksettings.png\" alt=\"SyntaxHighlighter code block settings\" width=\"550\" height=\"358\" data-ll-status=\"loaded\" \/><\/p>\n<ul>\n<li>Now select the language for your code.<\/li>\n<li>After this, you can turn offline numbers, provide the first line number, or highlight any line you want<\/li>\n<li>Then turn off the feature to make links clickable.<\/li>\n<li>Now, save your post and click the preview button to see it in action.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-62241 lazyloaded\" title=\"Code displayed with syntax highlighting - WPBeginner\" src=\"https:\/\/www.wpbeginner.com\/wp-content\/uploads\/2019\/04\/syntaxhighlighter-codeblock.png\" alt=\"Code displayed with syntax highlighting\" width=\"550\" height=\"323\" data-ll-status=\"loaded\" \/><\/p>\n<ul>\n<li>You can also change the color and theme in this plugin.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-62242 lazyloaded\" title=\"SyntaxHighlighter settings - WPBeginner\" src=\"https:\/\/www.wpbeginner.com\/wp-content\/uploads\/2019\/04\/shsettings.png\" alt=\"SyntaxHighlighter settings\" width=\"550\" height=\"367\" data-ll-status=\"loaded\" \/><\/p>\n<ul>\n<li>\u00a0Select a color theme from the settings page and change SyntaxHighlighter settings.<\/li>\n<li>Now, save your settings to see a preview of the code block at the bottom of the page.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-62243 lazyloaded\" title=\"Code block preview - WPBeginner\" src=\"https:\/\/www.wpbeginner.com\/wp-content\/uploads\/2019\/04\/codeblockpreview.png\" alt=\"Code block preview\" width=\"550\" height=\"291\" data-ll-status=\"loaded\" \/><\/p>\n<h2><strong>3. Inserting the Code Manually<\/strong><\/h2>\n<p>for displaying code on the WordPress site, this is an advanced method for users good at coding.<\/p>\n<p>To display code manually , we will use <em>&lt;pre&gt;<\/em>\u00a0and\u00a0<em>&lt;code&gt;<\/em> tags .<\/p>\n<ul>\n<li>firstly, we will need a tool to convert text into HTML.<\/li>\n<li>Now copy and paste your code in the text editor tool<\/li>\n<li>cover it around &lt;pre&gt;and &lt;code&gt; tags.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-62248 lazyloaded\" title=\"Adding code manually in classic editor - WPBeginner\" src=\"https:\/\/www.wpbeginner.com\/wp-content\/uploads\/2019\/04\/texteditorcode.png\" alt=\"Adding code manually in classic editor\" width=\"550\" height=\"203\" data-ll-status=\"loaded\" \/><\/p>\n<ul>\n<li>Your code will look like this &#8211;<\/li>\n<\/ul>\n<p><code>&lt;pre&gt;&lt;code&gt;<br \/>\n&amp;lt;p&amp;gt;&amp;lt;a href=&amp;quot;\/home.html&amp;quot;&amp;gt;This is a sample link&amp;lt;\/a&amp;gt;&amp;lt;\/p&amp;gt;<br \/>\n&lt;\/pre&gt;&lt;\/code&gt;<\/code><\/p>\n<ul>\n<li>save the post and view the code in action.<\/li>\n<li>The browser will convert HTML entities, and users will see and copy the code.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-62247 lazyloaded\" title=\"Manually displaying code in WordPress - WPBeginner\" src=\"https:\/\/www.wpbeginner.com\/wp-content\/uploads\/2019\/04\/manualcode.png\" alt=\"Manually displaying code in WordPress\" width=\"550\" height=\"184\" data-ll-status=\"loaded\" \/><\/p>\n<p><strong>To conclude-<\/strong><\/p>\n<p>These were the three methods you can use to display code on WordPress. You can choose the WordPress editor method, the plugin method or the manual code method whichever suits you best.<\/p>\n<p>We hope this has helped you!<\/p>\n<p>You can also check our another post on <a href=\"https:\/\/hostkicker.com\/blog\/how-to-display-related-posts-in-wordpress\/\">how to display related post in WordPress.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article will discuss how to display Code on your WordPress site. New members on WordPress may find it challenging to display code snippets. Here are some easy and stepwise methods to display Code on WordPress or blogpost. In WordPress, if you want to add Code like other regular text, WordPress will not show it [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":180,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-24","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wp-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v19.3 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How To Display Code On Your WordPress Site - Hostkicker<\/title>\n<meta name=\"description\" content=\"want to display code on your WordPress site ? Here are 3 different methods- WordPress editor, plugin and manual coding.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hostkicker.com\/blog\/display-code-on-your-wordpress-site\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Display Code On Your WordPress Site\" \/>\n<meta property=\"og:description\" content=\"want to display code on your WordPress site ? Here are 3 different methods- WordPress editor, plugin and manual coding.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hostkicker.com\/blog\/display-code-on-your-wordpress-site\/\" \/>\n<meta property=\"og:site_name\" content=\"Hostkicker\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-17T08:26:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-20T05:54:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/how-to-display-code-in-wp-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"693\" \/>\n\t<meta property=\"og:image:height\" content=\"511\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Olivia Smith\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Olivia Smith\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-code-on-your-wordpress-site\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-code-on-your-wordpress-site\\\/\"},\"author\":{\"name\":\"Olivia Smith\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#\\\/schema\\\/person\\\/f06306b595baa96c90a0491b941d7660\"},\"headline\":\"How To Display Code On Your WordPress Site\",\"datePublished\":\"2021-12-17T08:26:14+00:00\",\"dateModified\":\"2022-05-20T05:54:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-code-on-your-wordpress-site\\\/\"},\"wordCount\":743,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-code-on-your-wordpress-site\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/how-to-display-code-in-wp-01.jpg\",\"articleSection\":[\"Wp tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-code-on-your-wordpress-site\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-code-on-your-wordpress-site\\\/\",\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-code-on-your-wordpress-site\\\/\",\"name\":\"How To Display Code On Your WordPress Site - Hostkicker\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-code-on-your-wordpress-site\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-code-on-your-wordpress-site\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/how-to-display-code-in-wp-01.jpg\",\"datePublished\":\"2021-12-17T08:26:14+00:00\",\"dateModified\":\"2022-05-20T05:54:52+00:00\",\"description\":\"want to display code on your WordPress site ? Here are 3 different methods- WordPress editor, plugin and manual coding.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-code-on-your-wordpress-site\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-code-on-your-wordpress-site\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-code-on-your-wordpress-site\\\/#primaryimage\",\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/how-to-display-code-in-wp-01.jpg\",\"contentUrl\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/how-to-display-code-in-wp-01.jpg\",\"width\":693,\"height\":511},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-code-on-your-wordpress-site\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Display Code On Your WordPress Site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/\",\"name\":\"Hostkicker\",\"description\":\"Blog\",\"publisher\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#organization\",\"name\":\"Hostkicker\",\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/hostkicker-logo-01.png\",\"contentUrl\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/hostkicker-logo-01.png\",\"width\":940,\"height\":218,\"caption\":\"Hostkicker\"},\"image\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#\\\/schema\\\/person\\\/f06306b595baa96c90a0491b941d7660\",\"name\":\"Olivia Smith\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g\",\"caption\":\"Olivia Smith\"},\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/author\\\/olivia\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How To Display Code On Your WordPress Site - Hostkicker","description":"want to display code on your WordPress site ? Here are 3 different methods- WordPress editor, plugin and manual coding.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hostkicker.com\/blog\/display-code-on-your-wordpress-site\/","og_locale":"en_US","og_type":"article","og_title":"How To Display Code On Your WordPress Site","og_description":"want to display code on your WordPress site ? Here are 3 different methods- WordPress editor, plugin and manual coding.","og_url":"https:\/\/hostkicker.com\/blog\/display-code-on-your-wordpress-site\/","og_site_name":"Hostkicker","article_published_time":"2021-12-17T08:26:14+00:00","article_modified_time":"2022-05-20T05:54:52+00:00","og_image":[{"width":693,"height":511,"url":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/how-to-display-code-in-wp-01.jpg","type":"image\/jpeg"}],"author":"Olivia Smith","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Olivia Smith","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hostkicker.com\/blog\/display-code-on-your-wordpress-site\/#article","isPartOf":{"@id":"https:\/\/hostkicker.com\/blog\/display-code-on-your-wordpress-site\/"},"author":{"name":"Olivia Smith","@id":"https:\/\/hostkicker.com\/blog\/#\/schema\/person\/f06306b595baa96c90a0491b941d7660"},"headline":"How To Display Code On Your WordPress Site","datePublished":"2021-12-17T08:26:14+00:00","dateModified":"2022-05-20T05:54:52+00:00","mainEntityOfPage":{"@id":"https:\/\/hostkicker.com\/blog\/display-code-on-your-wordpress-site\/"},"wordCount":743,"commentCount":0,"publisher":{"@id":"https:\/\/hostkicker.com\/blog\/#organization"},"image":{"@id":"https:\/\/hostkicker.com\/blog\/display-code-on-your-wordpress-site\/#primaryimage"},"thumbnailUrl":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/how-to-display-code-in-wp-01.jpg","articleSection":["Wp tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hostkicker.com\/blog\/display-code-on-your-wordpress-site\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hostkicker.com\/blog\/display-code-on-your-wordpress-site\/","url":"https:\/\/hostkicker.com\/blog\/display-code-on-your-wordpress-site\/","name":"How To Display Code On Your WordPress Site - Hostkicker","isPartOf":{"@id":"https:\/\/hostkicker.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hostkicker.com\/blog\/display-code-on-your-wordpress-site\/#primaryimage"},"image":{"@id":"https:\/\/hostkicker.com\/blog\/display-code-on-your-wordpress-site\/#primaryimage"},"thumbnailUrl":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/how-to-display-code-in-wp-01.jpg","datePublished":"2021-12-17T08:26:14+00:00","dateModified":"2022-05-20T05:54:52+00:00","description":"want to display code on your WordPress site ? Here are 3 different methods- WordPress editor, plugin and manual coding.","breadcrumb":{"@id":"https:\/\/hostkicker.com\/blog\/display-code-on-your-wordpress-site\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hostkicker.com\/blog\/display-code-on-your-wordpress-site\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hostkicker.com\/blog\/display-code-on-your-wordpress-site\/#primaryimage","url":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/how-to-display-code-in-wp-01.jpg","contentUrl":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/how-to-display-code-in-wp-01.jpg","width":693,"height":511},{"@type":"BreadcrumbList","@id":"https:\/\/hostkicker.com\/blog\/display-code-on-your-wordpress-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hostkicker.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Display Code On Your WordPress Site"}]},{"@type":"WebSite","@id":"https:\/\/hostkicker.com\/blog\/#website","url":"https:\/\/hostkicker.com\/blog\/","name":"Hostkicker","description":"Blog","publisher":{"@id":"https:\/\/hostkicker.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hostkicker.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hostkicker.com\/blog\/#organization","name":"Hostkicker","url":"https:\/\/hostkicker.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hostkicker.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/hostkicker-logo-01.png","contentUrl":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/hostkicker-logo-01.png","width":940,"height":218,"caption":"Hostkicker"},"image":{"@id":"https:\/\/hostkicker.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hostkicker.com\/blog\/#\/schema\/person\/f06306b595baa96c90a0491b941d7660","name":"Olivia Smith","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g","caption":"Olivia Smith"},"url":"https:\/\/hostkicker.com\/blog\/author\/olivia\/"}]}},"jetpack_featured_media_url":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/how-to-display-code-in-wp-01.jpg","_links":{"self":[{"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/posts\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":7,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/posts\/24\/revisions"}],"predecessor-version":[{"id":2064,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/posts\/24\/revisions\/2064"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/media\/180"}],"wp:attachment":[{"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/media?parent=24"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/categories?post=24"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/tags?post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}