{"id":34477,"date":"2022-02-07T15:00:25","date_gmt":"2022-02-07T14:00:25","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=34477"},"modified":"2022-02-07T13:19:15","modified_gmt":"2022-02-07T12:19:15","slug":"beginners-guide-to-edit-wordpress-code-css-html-php","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/beginners-guide-to-edit-wordpress-code-css-html-php\/","title":{"rendered":"How to Edit WordPress Code &#8211; CSS, HTML and PHP"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]WordPress owes a sizable chunk of its popularity to its accessibility. Everything you can do with WordPress, you can do without ever having to write a single line of code. You can <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">install plugins<\/a> without coding. <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-wordpress-theme\/\">Theme installation<\/a> happens without coding, too, and with a theme and some plugins, there are no limits to what you can do with a WordPress website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Still, WordPress is a content management system that was created using code. The things you can do easily through visually-intuitive interfaces hide an underlying layer of code that gets things done. So if you want to look under the hood and go straight to the source to make some edits, you\u2019ll need a way to edit HTML, PHP, and CSS in WordPress.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The CMS obliges, and you have more than one way to edit WordPress code. In this article, we\u2019ll show you:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#why-would-you-want-to-edit-wordpress-code\">Why Would You Want to Edit WordPress Code?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-custom-code-with-plugins\">Adding Custom Code with Plugins<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#editing-wordpress-code-using-wordpress-editors\">Editing WordPress Code Using WordPress Editors<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#editing-theme-and-plugin-code\">Editing Theme and Plugin Code<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#editing-css\">Editing CSS<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#editing-files-via-ftp\">Editing Files via FTP<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"why-would-you-want-to-edit-wordpress-code\"><\/a>Why Would You Want to Edit WordPress Code?<\/h2>\n<p>[\/vc_column_text][vc_column_text]For the most part, plugins and themes will prove to be an incredibly convenient way to change things around WordPress. If you\u2019re not a power user or someone who knows HTML, CSS, PHP, or JavaScript, you\u2019ll gravitate towards ready-made solutions.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>These types of solutions can only take you so far, and sooner or later you\u2019ll come across a problem you can\u2019t fix with a plugin.<\/strong> That\u2019s the point when you\u2019ll start wondering if there are ways to have more control over your website and do some advanced customizations.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Knowing how to edit WordPress code can help you with that. <strong>You can edit themes, plugins, add custom CSS and edit your posts and pages as HTML.<\/strong> For small additions of code, you can even use plugins that let you add snippets of code to appropriate files.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ll show you all the places in WordPress where you can edit code.<strong> You should be careful, however, when doing it \u2013 some of these methods can easily break your site.<\/strong> We\u2019ll start with the easiest method of editing code on WordPress, using a snippets plugin.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-custom-code-with-plugins\"><\/a>Adding Custom Code with Plugins<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Code-Snippets.jpg\" class=\"attachment-full size-full\" alt=\"Code Snippets\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Code-Snippets.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Code-Snippets-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Code-Snippets-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Code-Snippets-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you want to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-custom-code-to-wordpress\/\">add custom code to WordPress<\/a>, the most convenient way might be by using a plugin.<strong> The major benefit of doing it this way is that the code you add using the plugin usually survives theme updates, which otherwise obliterate such changes.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]One of the plugins that\u2019s the easiest to use to add custom code to WordPress is the <a href=\"https:\/\/wordpress.org\/plugins\/code-snippets\/\" target=\"_blank\" rel=\"noopener\">Code Snippets<\/a> plugin. The plugin is easy to install \u2013 you do it from <em><strong>Plugins &gt; Add New<\/strong><\/em>, and once you activate it, the plugin enables you to create custom snippets of HTML, CSS, or JavaScript.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"470\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Code-Editing-Snippets.jpg\" class=\"attachment-full size-full\" alt=\"Code Editing Snippets\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Code-Editing-Snippets.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Code-Editing-Snippets-300x146.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Code-Editing-Snippets-768x373.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Code-Editing-Snippets-620x301.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>The plugin also lets you toggle your snippets on and off, which can come in incredibly useful if you\u2019re trying to troubleshoot or test a piece of code.<\/strong> Overall, if you want to edit WordPress code by adding to it and you don\u2019t want to go directly to the files where you do it, using a snippet plugin is probably the best thing you could do.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"editing-wordpress-code-using-wordpress-editors\"><\/a>Editing WordPress Code Using WordPress Editors<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Gutenberg.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Gutenberg.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Gutenberg-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Gutenberg-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Gutenberg-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]WordPress has ways you can edit code in your website\u2019s posts and pages. Both Gutenberg \u2013 the block editor \u2013 and the Classic editor that\u2019s still so popular give you some options to edit code.<strong> In Gutenberg, you can add code to your pages or posts by choosing the Custom HTML block.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"535\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Custom-HTML.jpg\" class=\"attachment-full size-full\" alt=\"Custom HTML\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Custom-HTML.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Custom-HTML-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Custom-HTML-768x424.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Custom-HTML-620x342.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can edit existing blocks as code, too \u2013 <strong>that menu that appears above your block once you click on it will have three vertical dots which, when clicked, show you a menu with the option you need.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"542\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Three-Vertical-Dots.jpg\" class=\"attachment-full size-full\" alt=\"Three Vertical Dots\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Three-Vertical-Dots.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Three-Vertical-Dots-300x168.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Three-Vertical-Dots-768x430.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Three-Vertical-Dots-620x347.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, if you want to enable code editing for all the blocks on the page or post, <strong>you simply navigate to the options button \u2013 the three dots in the upper-righthand corner \u2013 and switch to code editor from the visual editor<\/strong>. You can do so with a keyboard shortcut of Ctrl+Shift+Alt+M.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"564\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Text-Editing-Mode.jpg\" class=\"attachment-full size-full\" alt=\"Text Editing Mode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Text-Editing-Mode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Text-Editing-Mode-300x175.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Text-Editing-Mode-768x447.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Text-Editing-Mode-620x361.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you\u2019re a fan of the Classic editor, things are even simpler for you. <strong>Switching between the visual and the textual editor was made easy and readily available in Classic editor.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Text-Editing-Mode-Classic-Editor.jpg\" class=\"attachment-full size-full\" alt=\"Text Editing Mode Classic Editor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Text-Editing-Mode-Classic-Editor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Text-Editing-Mode-Classic-Editor-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Text-Editing-Mode-Classic-Editor-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Text-Editing-Mode-Classic-Editor-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The placement of the toggle lets you switch between the two effortlessly and is one of the most beloved features of the Classic editor.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"editing-theme-and-plugin-code\"><\/a>Editing Theme and Plugin Code<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Edit-Themes.jpg\" class=\"attachment-full size-full\" alt=\"Edit Themes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Edit-Themes.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Edit-Themes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Edit-Themes-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Edit-Themes-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Before you start editing the theme and plugin files on your WordPress website, you should understand that the changes that you make there can seriously affect your website\u2019s functioning.<\/strong> You should only proceed if you know what you\u2019re doing, and you\u2019ve taken steps to keep the potential damage to the minimum.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Using a <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-child-theme-wordpress\/\">WordPress child theme<\/a> can help you when editing the theme files in a couple of ways. It might mitigate some of the risks of permanently damaging important theme files. <strong>Also, using a child theme ensures that the changes you\u2019ve made don\u2019t get swept away when updating the theme.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To edit the code of your WordPress theme files, you can navigate to <strong>Appearance &gt; Theme Editor<\/strong>. There you\u2019ll see a warning notifying you of the potential consequences of what you\u2019re about to do, and after that \u2013 you\u2019ll be in. <strong>The Theme Editor lets you choose the theme you want to edit, as well as the specific file with the code you want to change.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Select-Theme-to-Edit.jpg\" class=\"attachment-full size-full\" alt=\"Select Theme to Edit\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Select-Theme-to-Edit.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Select-Theme-to-Edit-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Select-Theme-to-Edit-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Select-Theme-to-Edit-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Note that the majority of theme files have a .php extension \u2013 but you might also find a style.css file. <strong>You can edit the CSS there, but there\u2019s a better way of doing it, and we\u2019ll show it to you soon. <\/strong>Functions.php is one of the most popular files for editing but be extra careful when dabbling with it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you want to edit the code of the plugins you\u2019re using, navigate to <em><strong>Plugins &gt; Plugin Editor<\/strong><\/em>. There, you\u2019ll also be able to <strong>select the plugin you want to edit and choose which of the files is the one with the code you want to change.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Edit-Plugins.jpg\" class=\"attachment-full size-full\" alt=\"Edit Plugins\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Edit-Plugins.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Edit-Plugins-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Edit-Plugins-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Edit-Plugins-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You should never edit a plugin or a theme that\u2019s currently being used. Always keep in mind that the changes you make here have consequences to the functioning of your website.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"editing-css\"><\/a>Editing CSS<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"510\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Editing-CSS.jpg\" class=\"attachment-full size-full\" alt=\"Editing CSS\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Editing-CSS.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Editing-CSS-300x158.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Editing-CSS-768x404.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Editing-CSS-620x326.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you\u2019ve skipped on editing CSS in the style.css file, as your theme might have suggested, and you still want to style your website with some custom CSS, you should navigate to <em><strong>Appearance &gt; Customize<\/strong><\/em> from your WordPress website\u2019s dashboard. <strong>This will lead you to the customizer, a great place where you can change lots of different things on your website while seeing the change manifest in real-time.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To use the Customizer to add custom CSS, navigate down to Additional CSS. <strong>You\u2019ll be able to navigate around your website in the large preview window that takes up the central and right sides of the page.<\/strong> The left side is reserved for the custom CSS you want to add to your website.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"531\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Additional-CSS.jpg\" class=\"attachment-full size-full\" alt=\"Additional CSS\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Additional-CSS.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Additional-CSS-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Additional-CSS-768x421.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Additional-CSS-620x340.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Thanks to Customizer\u2019s ability to show you the changes in real-time, you can easily see what kind of effect your additional CSS will have on your website, leading to a much more streamlined editing process. <strong>When you\u2019re done, remember to publish any additions that you\u2019ve made, and you\u2019re done.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"editing-files-via-ftp\"><\/a>Editing the Files Directly<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/htaccess.jpg\" class=\"attachment-full size-full\" alt=\"htaccess\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/htaccess.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/htaccess-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/htaccess-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/htaccess-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Your final option for editing WordPress code is to edit the files containing the code directly. <strong>You can access the files via your hosts web hosting control panel and its file manager, or<\/strong> <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-ftp\/\">using FTP<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Either way, you\u2019ll be accessing the files directly, making the change, and saving it.<\/strong> If you\u2019re not sure how to do it, you can follow our guide for <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-edit-wp-config-file\/\">editing the wp-config file<\/a>. As always, be very careful with the changes you make.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]You can spend a lifetime using WordPress without ever having to reach for a coding handbook to learn how to do things with code instead of visually, or with themes and plugins. Still, when the need to use code arises, WordPress will have ways to accommodate it, either through the use of plugins, or the various editors and customizers included with WordPress core. You can govern your own experience with WordPress, whether that means using plugins for everything you need, or constantly tweaking the code on your website.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Looking for ways to edit WordPress HTML, CSS, or PHP code? There are a couple of different methods you can do it, and we&#8217;ll show you all of them!<\/p>\n","protected":false},"author":9295,"featured_media":34675,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[20,22,21,4],"class_list":["post-34477","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-css","tag-html","tag-php","tag-tips"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/34477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=34477"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/34477\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/34675"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=34477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=34477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=34477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}