{"id":6404,"date":"2019-10-14T13:17:41","date_gmt":"2019-10-14T13:17:41","guid":{"rendered":"https:\/\/www.24x7wpsupport.com\/blog\/?p=6404"},"modified":"2021-08-10T12:10:43","modified_gmt":"2021-08-10T12:10:43","slug":"guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css","status":"publish","type":"post","link":"https:\/\/www.24x7wpsupport.com\/blog\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\/","title":{"rendered":"Guide to Editing Source Code of your WordPress Website PHP, MySQL, HTML, JavaScript &#038; CSS"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p class=\"last-updated\">Last updated on August 10th, 2021 at 12:10 pm<\/p><p>[vc_row][vc_column][vc_column_text]WordPress is at the core of more than 34% of websites of the internet, and its popularity doesn\u2019t seem to reduce in the near future. What makes it amazing is its power to adapt changes and grow. That\u2019s the cause why everyone \u2013 from small bloggers to startups, medium-sized businesses, e-commerce businesses, and enterprises \u2013 is satisfied with its -performance and capabilities.<\/p>\n<p>While launching or updating a website, developers and business owners want to customize its functionality and appearance suitably. Well, it\u2019s easy in the case of WordPress. You can do it using free, premium and custom-developed plugins\/themes, or by updating the PHP, MySQL, CSS, JavaScript and HTML code\/script.<\/p>\n<p>In this article, we are going to cover the same in-depth. However, please keep it in mind that doing so is only possible in case of self-hosted WordPress websites. So, if your digital entity is running on WordPress.com, this how-to guide won\u2019t help you.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_custom_heading text=&#8221;Tutorial Prerequisites&#8221; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]Before we get into the more technical stuff, we would like to tell you a few things that need not editing the source code of your WordPress or WooCommerce website.<\/p>\n<ul>\n<li><span style=\"color: #99ccff;\"><strong>When Updates arrive<\/strong><\/span><\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\">So sometimes, your WordPress website starts showing warnings related to plugin update, theme update or PHP version update. The older version of any of these may cause missing functionalities, error messages or broken elements. In such a scenario, you need not touch the source code, but update the desired module from your dashboard itself.<\/p>\n<ul>\n<li><strong><span style=\"color: #99ccff;\">Theme Customization<\/span><\/strong><\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\">Most of the WordPress themes come with advanced editing capabilities and need no editing in the source code when you\u2019ve to change their appearance. So, before thinking of making changes in the WP source code, do explore the <strong>Appearance &gt; Customization<\/strong> and <strong>Appearance &gt; Theme Options<\/strong> tabs of your WordPress admin panel. Changes are that your layout-related concern will be sorted out from any of these options itself.<\/p>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_custom_heading text=&#8221;When Do You Need to Change Source Code in WordPress?&#8221; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<ul>\n<li>When you need to add the HTML code to a page, which is not as per your theme.<\/li>\n<li>When you want your website to have differently-designed elements and sections than your theme\u2019s elements.<\/li>\n<li>When you want to change the database\u2019s strings or values.<\/li>\n<li>When you want to extend your website\u2019s capabilities or change the way of posts, pages, etc.<\/li>\n<\/ul>\n<p>And, so on\u2026<\/p>\n<p><strong><span style=\"color: #99ccff;\">So, the next question that arrives in your mind is&#8230; what all can be changed?<\/span><\/strong><\/p>\n<p>The most precise answer to it will be \u2013 EVERYTHING. Yes. From the PHP code to CSS, JavaScript, HTML scripts and MySQL files \u2013 WordPress lets you update everything. So, the customization flexibility of this super-powerful CMS is 100% undoubtedly.<\/p>\n<p>Now, we are about to begin by telling you how to edit the source code in WordPress using PHP, MySQL, HTML, and JavaScript. However, before beginning to edit these files, you must learn \u2013<\/p>\n<p style=\"padding-left: 40px;\">1. Updating\/uploading files using an FTP solution.<br \/>\n2. Creating a Child theme.<\/p>\n<p>These are mandatorily for you to learn if you don\u2019t want to avoid mishaps. Remember that it\u2019s your website. Any wrong step will break the code and render sections weirdly, which you won\u2019t want. [Skip the next 2 sections in you know these 2 things already]<\/p>\n<p><strong><span style=\"color: #99ccff;\">Updating the Core Files of your WordPress website \u2013 The right way<\/span><\/strong><\/p>\n<p>Remember: You can also use your <span style=\"color: #0000ff;\"><a style=\"color: #0000ff;\" href=\"https:\/\/www.24x7wpsupport.com\/wordpresshosting.php\"><span style=\"color: #ffcc00;\">hosting<\/span><\/a><\/span> login for updating and uploading the files to the WordPress website, but it\u2019ll be a troublesome thing to do.<\/p>\n<p>WordPress Editors and options assure enough flexibility for the designers, but it doesn\u2019t grant you the freedom of editing all the files. For editing any file you want, or to add new files manually to your website, you will need an FTP client. <span style=\"color: #ffcc00;\"><a style=\"color: #ffcc00;\" href=\"https:\/\/filezilla-project.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">FileZilla Client<\/a><\/span> is the best option for this, as it\u2019s free, open-source and pretty easy to use.[\/vc_column_text][vc_single_image image=&#8221;6406&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]Once you\u2019ve downloaded the software, you\u2019ll need credentials to get access to your website\u2019s files. Therefore, open your cPanel and find the \u2018FTP Connections\u2019 (or a similar option) under the \u2018Files\u2019 section.[\/vc_column_text][vc_single_image image=&#8221;6408&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]From here, you will be able to fill this form \u2013[\/vc_column_text][vc_single_image image=&#8221;6409&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]Create an FTP account using this and go back to the FileZilla window.<\/p>\n<p>Next step is to add a site by clicking on \u2018New Site\u2019 and filling the credentials alongside the site details in this form \u2013[\/vc_column_text][vc_single_image image=&#8221;6410&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]Click on \u2018connect\u2019 to establish the connection. If everything went well, you will see your hosted files &amp; folders rendering in FileZilla.<\/p>\n<p>Note: Always upload a file from your local system to the server after renaming the file on the server. This way, you will get a backup ready to be restored, in case something went wrong. Not doing so with replace the original file on the server and hence, the previous version will get deleted.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_custom_heading text=&#8221;Creating a Child Theme in WordPress&#8221; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]While a lot can be done from the front panel of WordPress, custom code should always be added to child themes.<\/p>\n<p>Why?<br \/>\nThe reason is simple. You don\u2019t want to lose your capability to update your theme when new versions arrive, right?<\/p>\n<p>Updating a theme sometimes restores its core files, removing all the changes you\u2019ve added to these files. So, in order to keep updating the core theme and tweaking its code or other files, adding a child theme is the best way. This theme inherits the core theme\u2019s functionalities and keeps you customizations untamed when main theme is updated.<\/p>\n<p><strong><span style=\"color: #99ccff;\">To create a child theme for your existing WordPress theme \u2013<\/span><\/strong><\/p>\n<ol>\n<li>Go to \u2018wp-contents\/themes\/\u2019 folder and add a folder here. Name it anything, let\u2019s say \u2013 X \u2013 Child Theme. [We are considering that DemoTheme is our main theme here.]<\/li>\n<li>Now, create a file named \u2018style.css\u2019 in any text editor and add this code to it \u2013<\/li>\n<\/ol>\n<p style=\"padding-left: 40px;\">\/*<br \/>\nTheme Name: X \u2013 Child Theme<br \/>\nTheme URI:<br \/>\nDescription:<br \/>\nAuthor:<br \/>\nAuthor URI:<br \/>\nTemplate:<br \/>\nVersion: 1.0.0<br \/>\n*\/<\/p>\n<p>@import url(&#8220;..\/DemoTheme\/style.css&#8221;);<\/p>\n<p><strong>Note:<\/strong> Add the required details in every field after the colon. In front of the template section, we have to add the name of the parent theme. So, add DemoTheme here.<\/p>\n<p>3<strong>.<\/strong> Upload this file (style.css) to the X \u2013 Child Theme folder and check Appearances &gt; Themes section of your admin dashboard.<\/p>\n<p>It should appear in the list of themes, available for use.[\/vc_column_text][vc_single_image image=&#8221;6412&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]4. Now, add a \u2018funtions.php\u2019 file to your theme folder. Functions.php is for adding the extended functionality related code to your child theme. For the time being, just add an opening PHP tag i.e. \u2013<\/p>\n<p>&lt;?php<br \/>\n<strong>Note:<\/strong> These 2 files (style.css and functions.php are mandatory for your child theme as they inherit the style and functionality of parent theme for your website, respectively.)[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_custom_heading text=&#8221;Guide to Editing Source Code in WordPress&#8221; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]All the prerequisites that you needed to know are over now. So, at this point, we are considering that you\u2019ve read all the tricks and processes we covered above. The tutorial will cover direct steps for the source code editing of your WordPress website from here \u2013 Using the dashboard, as well as, using FTP login.<\/p>\n<h3><strong><span style=\"color: #99ccff;\">Editing HTML in WordPress<\/span><\/strong><\/h3>\n<p><strong><span style=\"color: #99ccff;\">When you need to edit HTML Code of any of your Pages<\/span><\/strong><\/p>\n<p>There are 2 ways to open the pages of your WordPress website in the editor, from where the HTML code can be edited \u2013<\/p>\n<p><strong>Method 1<\/strong><br \/>\nLogin to your WordPress admin dashboard and open the URL of the page to be edited. Let\u2019s say, you want to edit the home page itself, then open it in the same browser. You will see an option, named \u2018Edit page\u2019, in the top bar. Click on it.[\/vc_column_text][vc_single_image image=&#8221;6415&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]<strong>Method 2<\/strong><br \/>\nClick on the \u2018All Pages\u2019 link from the \u2018Pages\u2019 section.[\/vc_column_text][vc_single_image image=&#8221;6416&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]Now, you must have a paginated list of all the website pages opened in front of you. Either search for the desired page manually or use the search box, present on the right screen of your screen.<\/p>\n<p>The row, containing the page\u2019s name, will resemble this screenshot \u2013[\/vc_column_text][vc_single_image image=&#8221;6417&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]Click on the \u2018Edit\u2019 button.<\/p>\n<p>Both these methods will take you to either WYSIWYG editor or the latest, Gutenberg editor.<\/p>\n<p><strong>For WYSIWYG Editor<\/strong><br \/>\nIf your site is still using WYSIWYG editor, you will see an editor section, similar to this \u2013[\/vc_column_text][vc_single_image image=&#8221;6418&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]Now, you can edit the HTML of this page visually or make changes in the raw code.<\/p>\n<p>For visual editing, click on the tags\u2019 names, add\/change the text simultaneously and remove\/change the parts as per your needs.<\/p>\n<p>For editing the raw HTML code, switch to \u2018Text\u2019 [see the right corner] and make the desired changes and additions on the page.<\/p>\n<p>Once you\u2019re done, save the changes. Now, on opening this page, your website should render the changes live.<\/p>\n<p><strong>For Gutenberg Editor<\/strong><br \/>\nGutenberg is the updated WordPress editor for simplifying your work. For editing your existing content through Gutenberg editor, click on the three dots that appear on hovering the section.[\/vc_column_text][vc_single_image image=&#8221;6419&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]Next, click on \u2018Edit as HTML.\u2019<br \/>\nDoing this will let you make changes in the HTML code of the opened page. Save the updated version of this page to reflect the edits on your live website.<\/p>\n<h3><span style=\"color: #99ccff;\"><strong>Editing CSS in WordPress<\/strong><\/span><\/h3>\n<p>WordPress CSS is responsible for the visual appeal of your website, and therefore, making any change in it modifies the appearance of your site to an extent \u2013 depending upon which element is being touched. We\u2019ve given whole this explanation to make you aware of the fact that editing CSS may have an adverse effect on your website\u2019s design too, if done wrongly.<\/p>\n<p>Now, these are the 2 methods for Editing WordPress CSS \u2013<\/p>\n<p><strong>Method 1 \u2013<\/strong><br \/>\nFor making minor changes in the text color schemes, fonts, height or width of sections, etc., you will find a few options, directly on the frontend of your WordPress website. Most of the famous WordPress themes (premium ones, at least) come with these options nowadays. If your theme has this option, you won\u2019t need putting in any extra effort. To figure out the same, go to\u00a0<strong>Appearance &gt; Customize or Appearance &gt;<\/strong>\u00a0<strong>Theme Options<\/strong>\u00a0section.[\/vc_column_text][vc_single_image image=&#8221;6421&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]<strong>Method 2 \u2013<\/strong><br \/>\nLook for the Appearance Tab and check if it has a sub-menu named Edit CSS.[\/vc_column_text][vc_single_image image=&#8221;6422&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]Once you\u2019ll click this link, you will be redirected to a page with space for adding the extra CSS code. The look of this editor page varies with themes, and may differ from the screenshot we\u2019re adding \u2013[\/vc_column_text][vc_single_image image=&#8221;6423&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]<strong>Method 3 \u2013<\/strong><\/p>\n<p>This is the typical web designer\u2019s way of editing the CSS of WordPress websites. And the process is simple. All you need to do is \u2013\u00a0<strong>Go to the Child Theme Folder you\u2019ve created and add your CSS script file to \u2018style.css<\/strong>\u2019.<\/p>\n<p>While creating the style.css file above, we\u2019d added this code \u2013<\/p>\n<p>@import url(\u201c..\/DemoTheme\/style.css\u201d);<\/p>\n<p>Do not forget to add it in your style.css file if you haven\u2019t, because otherwise, it will override the style.css file of your theme. It means, only the child folder\u2019s CSS will be considered. Hence, the importing of your old \u2018style\u2019 file needs to be done manually.<\/p>\n<p><strong>Method 4 \u2013 [Read it if you use Visual Composer Plugin, or planning to use it]<\/strong><\/p>\n<p><a href=\"https:\/\/visualcomposer.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color: #ffcc00;\">Visual Composer<\/span><\/a>\u00a0is a comprehensive visual editing solution for those, who prefer working on the layout without touching the code. It has a powerful frontend that lets WordPress or WooCommerce website owners design and modify their pages.<\/p>\n<p>You can add or modify CSS using the visual composer; it\u2019s pretty easy.<\/p>\n<p>The plugin lets you add two types of custom CSS to your elements \u2013<\/p>\n<p><strong>1. Local CSS<\/strong><br \/>\nLet\u2019s say you have a button and you want to apply the design changes through CSS to that button only. Local CSS will be used in this case. You can consider it a way of adding inline CSS to your pages.<\/p>\n<p><strong>2. Global CSS<\/strong><br \/>\nFor applying changes to an element or a section through the website, global CSS will be used. It is similar to adding CSS script in your style.css file.<\/p>\n<p>To add CSS to your sections\/elements\/pages, open them in the Visual Composer editor and go to the section you want to add CSS to. Now, hover over the section and click on the \u2018 \u2013 \u2019 sign. From dropdown, choose \u2018Edit\u2019.[\/vc_column_text][vc_single_image image=&#8221;6424&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]Now, search for \u2018Extra Class Name\u2019, and add a phrase here. This phrase will direct to the class, you\u2019ll create for your element, so keep in reasonable.[\/vc_column_text][vc_single_image image=&#8221;6425&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]Now, go to the settings (see the \u2018settings\u2019 icon in left sticky sidebar of your page) and scroll to Custom CSS section.[\/vc_column_text][vc_single_image image=&#8221;6426&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]Here, add the CSS as per your need and save changes before exiting the web page.<\/p>\n<p>Apart from Visual Composer plugin, there are many\u00a0<span style=\"color: #ffcc00;\"><a style=\"color: #ffcc00;\" href=\"https:\/\/www.wpexplorer.com\/wordpress-css-live-editor-plugins\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS live editor WordPress plugins<\/a><\/span>\u00a0that could be used for the same purpose. You may try these, or other free plugins, for CSS editing too.<\/p>\n<p><strong>Note \u2013<\/strong>\u00a0Yes, we have not explained how to edit the main CSS file of your WordPress theme, as it\u2019s not the optimal method of adding website CSS. Each theme update will restore the theme CSS, causing the loss of your customized code. You don\u2019t want that, right?<\/p>\n<h3><span style=\"color: #99ccff;\"><strong>Editing MySQL in WordPress<\/strong><\/span><\/h3>\n<p>Have you switched from an old domain name to a new domain name?<\/p>\n<p>If yes, you might need to change the URLs in multiple places for your WordPress website. The easiest way to do so is making suitable changes in the MySQL database of your WordPress website.<\/p>\n<p>Let\u2019s explain the procedure of editing MySQL in WordPress for you here so that you could do it all smoothly \u2013<\/p>\n<ol>\n<li>Open\/download to the wp-config.php file using FileZilla and search for \u2018DB_NAME\u2019 in this file.<\/li>\n<li>In the line where you\u2019ll find the \u2018DB_NAME\u2019 string, there must be the name of the WordPress database of your website. Copy this name.<\/li>\n<li>Now, go to your cPanel and click on PHPMyAdmin under the Databases section.<\/li>\n<li>Search for the copied name, in order to find the Database.<\/li>\n<li>Now, paste this query (where your old website URL is \u2018old.com\u2019 and new website URL is \u2018new.com\u2019) \u2013 UPDATE wp_options SET option_value = replace(option_value, \u2018old.com\u2019, \u2018new.com\u2019) WHERE option_name = \u2018home\u2019 OR option_name = \u2018siteurl\u2019;UPDATE wp_posts SET guid = replace(guid, \u2018old.com\u2019,\u2019new.com\u2019);UPDATE wp_posts SET post_content = replace(post_content, \u2018old.com\u2019, \u2018new.com\u2019);UPDATE wp_postmeta SET meta_value = replace(meta_value,\u2019old.com\u2019,\u2019new.com\u2019);<\/li>\n<li>To run it, click on \u2018go\u2019.<\/li>\n<\/ol>\n<p>This action\/process updates all the links redirecting to your old URL towards the new URL, making many things easy for you.<\/p>\n<p><strong>Note:<\/strong>\u00a0You can run queries according to your required. We just gave an example here, in order to help you understand how MySQL is edited for your WordPress website. In the case of\u00a0<span style=\"color: #ffcc00;\"><a style=\"color: #ffcc00;\" href=\"https:\/\/www.24x7wpsupport.com\/wordpressdatabaseconnectionerror.php\">Database connection errors<\/a><\/span>, prefer reaching out to experts.<\/p>\n<h3><span style=\"color: #99ccff;\"><strong>Editing JavaScript in WordPress<\/strong><\/span><\/h3>\n<p>Many times, we want to add custom JavaScript to our WordPress website. There are several ways of doing so. There also are ways to hook JavaScript and PHP code, but that\u2019ll be too technical and we would suggest that you\u00a0<span style=\"color: #ffcc00;\"><a style=\"color: #ffcc00;\" href=\"https:\/\/24x7wpsupport.com\/\">hire a professional team<\/a><\/span>\u00a0for that. We\u2019re listing a very few of them here \u2013<\/p>\n<p><strong>Method 1 \u2013 Using Visual Composer<\/strong><br \/>\nJust as we added CSS using Visual Composer in a previous section, it can also be used for adding custom JavaScript to your website too. Again, go to settings and scroll to custom JavaScript section. From here, you can add local or global JavaScript easily.[\/vc_column_text][vc_single_image image=&#8221;6428&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]<strong>Method 2 \u2013 Using JS Editing Plugins<\/strong><br \/>\nNot just Visual Composer, there are plenty of plugins, such as\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/header-and-footer-scripts\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color: #ffcc00;\">Header and Footer Scripts Plugin<\/span><\/a>, through which you can add custom JavaScript to your files. As the name suggests, you can add JavaScript code in header and footer on your website.<\/p>\n<p>For loading the script before the page loads, include the code in the section for header. And for loading it once the page is loaded, include it in the section for footer.[\/vc_column_text][vc_single_image image=&#8221;6429&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]If there is a lot of code to add, you should create external JavaScript file, upload it in the WordPress folder and include it using this code \u2013<\/p>\n<p>&lt;script type=\u201dtext\/javascript\u201d src=\u201djsfile.js\u201d&gt;&lt;\/script&gt;<\/p>\n<p>Here, jsfile.js is the name of your JavaScript file.<\/p>\n<p>Note: You can also create your JavaScript files and include them in header or footer of your website manually. For this, just upload your JS code in WP directory and call it from the header or footer, as per the suitability. It is better to use plugins because you won\u2019t need to use FTP or play with raw code of your website.<\/p>\n<h3><span style=\"color: #99ccff;\"><strong>Editing PHP Source Code in WordPress<\/strong><\/span><\/h3>\n<p>For any kind of functionality related change or modification in the way how sections\/variables\/dynamic parts are being rendered on your pages\/posts, editing the PHP source code becomes essential in WordPress.<\/p>\n<p>Alternatively, you may use plugins for making this happen. However, small changes or custom requirements cannot always be fulfilled by installing WordPress or WooCommerce plugins. So at one point in time or another, you will need to change the source code of your WordPress website.<\/p>\n<p><strong>Tip:<\/strong>\u00a0If not using the frontend, avoid updating the core PHP files directly. Instead, copy those files in the child theme\u2019s folder. For figuring out the location of this file\u2019s placement, follow the same hierarchy as the parent theme for these files in the child theme. Now, you can edit the file without hassles.<\/p>\n<p><strong>Using Frontend Code Editor<\/strong><\/p>\n<p>Not all, but many commonly-updated files can be edited from your website\u2019s admin dashboard itself. For doing so, you need to click on the \u2018<strong>Editor<\/strong>\u2019 link under the\u00a0<strong>Appearance section<\/strong>. Look at this image for your reference \u2013[\/vc_column_text][vc_single_image image=&#8221;6431&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]Opening the editor will take you to a new page. This page will have a list of filenames on the right side, a dropdown for choosing the theme to be updated above it, and a file opened for editing in the main section. Different themes give access to different files. However, main files, such as stylesheet file, theme functions file, header file, index file, posts file, single post file, pages file, single pages file, and so on can be edited from here.[\/vc_column_text][vc_single_image image=&#8221;6432&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]From here, you can switch between the files and edit them as per your need. Again, editing the files through the WordPress frontend <span style=\"color: #0000ff;\"><a style=\"color: #0000ff;\" href=\"https:\/\/www.24x7wpsupport.com\/blog\/top-15-best-code-editors-for-programming-coding\/\">code editor<\/a><\/span> does not create any backup of these files and could be updated if the theme is updated.<\/p>\n<p><strong>Using WordPress File Manager Plugin<\/strong><\/p>\n<p>The\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/file-manager\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color: #ffcc00;\">File Manager Plugin<\/span><\/a>, present in WordPress directory can save you from the hassles on file uploading, downloading and more, in case FTP looks a complex thing to you.<\/p>\n<p>Once installed, it lets you upload, download, rename, delete, edit, create, move and archive your directories and files.<\/p>\n<p>For using it, check for the \u2018File Manager\u2019 link on your WordPress admin dashboard in the left sidebar. Click on the link and you will see the file manager.[\/vc_column_text][vc_single_image image=&#8221;6433&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]While the plugin\u2019s dashboard is self-explanatory and do not require explanation, do keep in mind to create backup [duplicate] of your files before editing them.<\/p>\n<p>Remember that it\u2019s risky using this plugin, because you are making edits to your website\u2019s files from this. So, use it carefully. Do not touch the files that you do not understand. Edit only when you are sure that it won\u2019t break things.<\/p>\n<p>Additionally, you may checkout\u00a0<span style=\"color: #ffcc00;\"><a style=\"color: #ffcc00;\" href=\"https:\/\/www.formget.com\/file-manager-wordpress-plugins\/\" target=\"_blank\" rel=\"noopener noreferrer\">these file manager plugins<\/a><\/span>\u00a0too. These can also be used for making edits in the PHP, JavaScript, CSS and media files from the frontend of your WordPress website.<\/p>\n<p><strong>Using FTP Client<\/strong><\/p>\n<p>So, you already have the FileZilla client installed on your system if you were following our tutorial from the very beginning. For changing or editing the source code in WordPress using PHP, you will need it. Whether you make changes in the files of parent theme or child, using an FTP client is probably the best method.<\/p>\n<p>Here are our steps to edit the PHP source code in WordPress using FTP client \u2013<\/p>\n<ol>\n<li>Download the File to be Edited<\/li>\n<\/ol>\n<p>First things first, we would suggest you learn a bit about the WordPress directory structure, in case you are na\u00efve to it. Understanding the WP directory structure will give you a clear cut idea of which file needs to be edited in which scenario.<\/p>\n<p>Now, go to the location of the file you want to edit and download it.<\/p>\n<p>2. Make the necessary changes in the code<\/p>\n<p>Edit the file offline and save it.<\/p>\n<p>3. Rename your Old File<\/p>\n<p>First, rename your old version of the file you are editing. You can decide a format or pattern for this renaming. For example \u2013 Add \u2018-\u2019 or \u201801\u2019 or anything similar to these patterns in the files you are keeping as a backup. It is always good to add a postfix to the file names, because your backup file will remain near the newest file in the directory, making the backup process easy whenever required.<\/p>\n<p>4. Upload the Edited PHP File in the WordPress Directory<\/p>\n<p>Upload the edited file in the same location, from where you downloaded its old version before. Using the FTP client, it takes a few seconds or less.<\/p>\n<p>Once the file is uploaded, test your WordPress website for the changes you are expecting in it.<\/p>\n<p>An Example for Editing PHP Source Code of WordPress website<\/p>\n<p>There could be hundreds of use cases for explaining how to edit the source code of a PHP file of your WordPress website. Let\u2019s show you one example here \u2013<\/p>\n<p><em><strong>When you\u2019ve to change\/add\/remove some text\/graphics in your WordPress Website<\/strong><\/em><\/p>\n<p>Sometimes, you want to make minor changes in your WordPress theme, for example, changing the text, appearing in the footer. How will you do that?<\/p>\n<p>Well, for a WordPress website, this task isn\u2019t really complicated. The process is \u2013<\/p>\n<ul>\n<li>Find out the header.php file in the frontend code editor or in the WordPress directory.<\/li>\n<li>Open the file or download it (as per the choice made at the previous step).<\/li>\n<li>Search for the section of code to be edited. For example \u2013 if you want to change the footer text, search for that particular string appearing in the footer (or the variable, responsible for rendering that string).<\/li>\n<li>Make the desired changed and save the file.<\/li>\n<li>Upload the file on the live site, in case you were using FTP for this.<\/li>\n<li>Now, open the website in a browser and check if it worked.<\/li>\n<\/ul>\n<p><strong>Final Word<\/strong><\/p>\n<p>WordPress is a powerful CMS, and its power comes from the flexibility and extendibility it adds to your website. Using WordPress frontend editor and raw files, you can make small and big modifications in your websites easily. However, a bit of coding knowledge and understanding of WordPress is important for this so that you could handle the issues which arrive it the process.<\/p>\n<p>On the other hand, editing source code of a WordPress Website \u2013 be it PHP, MySQL, HTML CSS or JavaScript \u2013 could look like a tough task for those who do not understand the technical side of WordPress much.<\/p>\n<p>Though we\u2019ve explained the procedures for editing the source code of your website, we would not suggest you make changes to the website if you are not confident about the same. Always, always hire WP experts for this purpose. You may reach out to\u00a0<span style=\"color: #ffcc00;\"><a style=\"color: #ffcc00;\" href=\"https:\/\/24x7wpsupport.com\/\">our WordPress developers and support specialists<\/a><\/span>\u00a0too. We are available for assisting the WordPress and WooCommerce website owners 24\u00d77.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Last updated on August 10th, 2021 at 12:10 pm[vc_row][vc_column][vc_column_text]WordPress is at the core of more than 34% of websites of &#8230;<\/p>\n","protected":false},"author":2,"featured_media":6437,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[350],"tags":[849,847,846,850,848],"class_list":["post-6404","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to-wordpress","tag-code-editor","tag-edit-wordpress-website-source-code","tag-editing-source-code","tag-wordpress-code-editor","tag-wordpress-website-source-code"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to edit WordPress Source code PHP,MySQL,HTML,JavaScript &amp; CSS<\/title>\n<meta name=\"description\" content=\"Learn the basics of how to edit WordPress source code PHP,MySQL,HTML,JavaScript &amp; CSS.We will explain to you step by step with screenshots and code example.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.24x7wpsupport.com\/blog\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to edit WordPress Source code PHP,MySQL,HTML,JavaScript &amp; CSS\" \/>\n<meta property=\"og:description\" content=\"Learn the basics of how to edit WordPress source code PHP,MySQL,HTML,JavaScript &amp; CSS.We will explain to you step by step with screenshots and code example.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.24x7wpsupport.com\/blog\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\/\" \/>\n<meta property=\"og:site_name\" content=\"24x7WPSupport Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/24x7wpsupport\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-14T13:17:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-10T12:10:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.24x7wpsupport.com\/blog\/wp-content\/uploads\/2019\/10\/Edit-WordPress-source-code.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Dev\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wpsupport24x7\" \/>\n<meta name=\"twitter:site\" content=\"@wpsupport24x7\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dev\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"22 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\\\/\"},\"author\":{\"name\":\"Dev\",\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/#\\\/schema\\\/person\\\/e6415d472a2e6bbe2a01279a0224f4d4\"},\"headline\":\"Guide to Editing Source Code of your WordPress Website PHP, MySQL, HTML, JavaScript &#038; CSS\",\"datePublished\":\"2019-10-14T13:17:41+00:00\",\"dateModified\":\"2021-08-10T12:10:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\\\/\"},\"wordCount\":4318,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/Edit-WordPress-source-code.jpg\",\"keywords\":[\"Code Editor\",\"edit wordpress website source code\",\"Editing Source Code\",\"WordPress Code Editor\",\"Wordpress website source code\"],\"articleSection\":[\"How To Wordpress\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\\\/\",\"url\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\\\/\",\"name\":\"How to edit WordPress Source code PHP,MySQL,HTML,JavaScript & CSS\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/Edit-WordPress-source-code.jpg\",\"datePublished\":\"2019-10-14T13:17:41+00:00\",\"dateModified\":\"2021-08-10T12:10:43+00:00\",\"description\":\"Learn the basics of how to edit WordPress source code PHP,MySQL,HTML,JavaScript & CSS.We will explain to you step by step with screenshots and code example.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/Edit-WordPress-source-code.jpg\",\"contentUrl\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/Edit-WordPress-source-code.jpg\",\"width\":1200,\"height\":600,\"caption\":\"Edit WordPress source code\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Guide to Editing Source Code of your WordPress Website PHP, MySQL, HTML, JavaScript &#038; CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/\",\"name\":\"24x7WPSupport Blog\",\"description\":\"WordPress Theme Update | WordPress Blog\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/#organization\",\"name\":\"24x7 WP Support\",\"url\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/wpsupportlatestlogo.png\",\"contentUrl\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/wpsupportlatestlogo.png\",\"width\":269,\"height\":64,\"caption\":\"24x7 WP Support\"},\"image\":{\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/24x7wpsupport\",\"https:\\\/\\\/x.com\\\/wpsupport24x7\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/#\\\/schema\\\/person\\\/e6415d472a2e6bbe2a01279a0224f4d4\",\"name\":\"Dev\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2279ad7c06143ec3d9993f3a47410189667d39a1d3d3ba17932e370f594894df?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2279ad7c06143ec3d9993f3a47410189667d39a1d3d3ba17932e370f594894df?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2279ad7c06143ec3d9993f3a47410189667d39a1d3d3ba17932e370f594894df?s=96&d=mm&r=g\",\"caption\":\"Dev\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to edit WordPress Source code PHP,MySQL,HTML,JavaScript & CSS","description":"Learn the basics of how to edit WordPress source code PHP,MySQL,HTML,JavaScript & CSS.We will explain to you step by step with screenshots and code example.","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:\/\/www.24x7wpsupport.com\/blog\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\/","og_locale":"en_GB","og_type":"article","og_title":"How to edit WordPress Source code PHP,MySQL,HTML,JavaScript & CSS","og_description":"Learn the basics of how to edit WordPress source code PHP,MySQL,HTML,JavaScript & CSS.We will explain to you step by step with screenshots and code example.","og_url":"https:\/\/www.24x7wpsupport.com\/blog\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\/","og_site_name":"24x7WPSupport Blog","article_publisher":"https:\/\/www.facebook.com\/24x7wpsupport","article_published_time":"2019-10-14T13:17:41+00:00","article_modified_time":"2021-08-10T12:10:43+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.24x7wpsupport.com\/blog\/wp-content\/uploads\/2019\/10\/Edit-WordPress-source-code.jpg","type":"image\/jpeg"}],"author":"Dev","twitter_card":"summary_large_image","twitter_creator":"@wpsupport24x7","twitter_site":"@wpsupport24x7","twitter_misc":{"Written by":"Dev","Estimated reading time":"22 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.24x7wpsupport.com\/blog\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\/#article","isPartOf":{"@id":"https:\/\/www.24x7wpsupport.com\/blog\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\/"},"author":{"name":"Dev","@id":"https:\/\/www.24x7wpsupport.com\/blog\/#\/schema\/person\/e6415d472a2e6bbe2a01279a0224f4d4"},"headline":"Guide to Editing Source Code of your WordPress Website PHP, MySQL, HTML, JavaScript &#038; CSS","datePublished":"2019-10-14T13:17:41+00:00","dateModified":"2021-08-10T12:10:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.24x7wpsupport.com\/blog\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\/"},"wordCount":4318,"commentCount":0,"publisher":{"@id":"https:\/\/www.24x7wpsupport.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.24x7wpsupport.com\/blog\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.24x7wpsupport.com\/blog\/wp-content\/uploads\/2019\/10\/Edit-WordPress-source-code.jpg","keywords":["Code Editor","edit wordpress website source code","Editing Source Code","WordPress Code Editor","Wordpress website source code"],"articleSection":["How To Wordpress"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.24x7wpsupport.com\/blog\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.24x7wpsupport.com\/blog\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\/","url":"https:\/\/www.24x7wpsupport.com\/blog\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\/","name":"How to edit WordPress Source code PHP,MySQL,HTML,JavaScript & CSS","isPartOf":{"@id":"https:\/\/www.24x7wpsupport.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.24x7wpsupport.com\/blog\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\/#primaryimage"},"image":{"@id":"https:\/\/www.24x7wpsupport.com\/blog\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.24x7wpsupport.com\/blog\/wp-content\/uploads\/2019\/10\/Edit-WordPress-source-code.jpg","datePublished":"2019-10-14T13:17:41+00:00","dateModified":"2021-08-10T12:10:43+00:00","description":"Learn the basics of how to edit WordPress source code PHP,MySQL,HTML,JavaScript & CSS.We will explain to you step by step with screenshots and code example.","breadcrumb":{"@id":"https:\/\/www.24x7wpsupport.com\/blog\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.24x7wpsupport.com\/blog\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.24x7wpsupport.com\/blog\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\/#primaryimage","url":"https:\/\/www.24x7wpsupport.com\/blog\/wp-content\/uploads\/2019\/10\/Edit-WordPress-source-code.jpg","contentUrl":"https:\/\/www.24x7wpsupport.com\/blog\/wp-content\/uploads\/2019\/10\/Edit-WordPress-source-code.jpg","width":1200,"height":600,"caption":"Edit WordPress source code"},{"@type":"BreadcrumbList","@id":"https:\/\/www.24x7wpsupport.com\/blog\/guide-to-editing-source-code-of-your-wordpress-website-php-mysql-html-javascript-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.24x7wpsupport.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Guide to Editing Source Code of your WordPress Website PHP, MySQL, HTML, JavaScript &#038; CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.24x7wpsupport.com\/blog\/#website","url":"https:\/\/www.24x7wpsupport.com\/blog\/","name":"24x7WPSupport Blog","description":"WordPress Theme Update | WordPress Blog","publisher":{"@id":"https:\/\/www.24x7wpsupport.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.24x7wpsupport.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/www.24x7wpsupport.com\/blog\/#organization","name":"24x7 WP Support","url":"https:\/\/www.24x7wpsupport.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.24x7wpsupport.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.24x7wpsupport.com\/blog\/wp-content\/uploads\/2018\/11\/wpsupportlatestlogo.png","contentUrl":"https:\/\/www.24x7wpsupport.com\/blog\/wp-content\/uploads\/2018\/11\/wpsupportlatestlogo.png","width":269,"height":64,"caption":"24x7 WP Support"},"image":{"@id":"https:\/\/www.24x7wpsupport.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/24x7wpsupport","https:\/\/x.com\/wpsupport24x7"]},{"@type":"Person","@id":"https:\/\/www.24x7wpsupport.com\/blog\/#\/schema\/person\/e6415d472a2e6bbe2a01279a0224f4d4","name":"Dev","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/2279ad7c06143ec3d9993f3a47410189667d39a1d3d3ba17932e370f594894df?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2279ad7c06143ec3d9993f3a47410189667d39a1d3d3ba17932e370f594894df?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2279ad7c06143ec3d9993f3a47410189667d39a1d3d3ba17932e370f594894df?s=96&d=mm&r=g","caption":"Dev"}}]}},"_links":{"self":[{"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/posts\/6404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/comments?post=6404"}],"version-history":[{"count":21,"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/posts\/6404\/revisions"}],"predecessor-version":[{"id":10438,"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/posts\/6404\/revisions\/10438"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/media\/6437"}],"wp:attachment":[{"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/media?parent=6404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/categories?post=6404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/tags?post=6404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}