{"id":351,"date":"2014-06-08T09:02:13","date_gmt":"2014-06-08T09:02:13","guid":{"rendered":"http:\/\/pixert.com\/blog\/?p=351"},"modified":"2014-06-10T15:36:39","modified_gmt":"2014-06-10T15:36:39","slug":"wordpress-code-editor-enhancement","status":"publish","type":"post","link":"https:\/\/pixert.com\/blog\/wordpress-code-editor-enhancement\/","title":{"rendered":"WordPress Code Editor Enhancement"},"content":{"rendered":"<p>WordPress code editor (WP-Admin &gt; Appearance &gt; Editor) does not yet have a good editor with syntax highlighting, line numbers etc.\u00a0Following plugins expand WordPress Code Editor from plain code editor to more sophisticated code editor with a lot of great features. These plugins allows administrator to edit code without accessing FTP.<!--more--><\/p>\n<p><a title=\"WPide\" href=\"https:\/\/wordpress.org\/plugins\/wpide\/\" target=\"_blank\"><strong>WPide<\/strong><\/a><\/p>\n<p><a href=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/06\/wpide.jpg\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"384\" data-permalink=\"https:\/\/pixert.com\/blog\/wordpress-code-editor-enhancement\/wpide\/\" data-orig-file=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/06\/wpide.jpg?fit=1180%2C932&amp;ssl=1\" data-orig-size=\"1180,932\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"wpide\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/06\/wpide.jpg?fit=1024%2C808&amp;ssl=1\" class=\"aligncenter size-large wp-image-384\" src=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/06\/wpide-1024x808.jpg?resize=620%2C489\" alt=\"wpide\" width=\"620\" height=\"489\" srcset=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/06\/wpide.jpg?resize=1024%2C808&amp;ssl=1 1024w, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/06\/wpide.jpg?resize=300%2C236&amp;ssl=1 300w, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/06\/wpide.jpg?w=1180&amp;ssl=1 1180w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>WPide is a WordPress code editor that could\u00a0edit any files in our\u00a0wp-content, not just plugins and themes. Code completion will help us\u00a0remember our\u00a0WordPress\/PHP commands providing function reference along the way. Main power of this plugin is \u00a0that co<strong>uld edits multiple concurrent files with the tabbed editor, this feature could save us from opening multiple files in multiple tabs.<\/strong>\u00a0 Unlike WP Editor, it doesnt&#8217;t replace default code editor so we could still use built-in editor separately. This plugin allows us to create new directory and new file. It also has following features that usually found in any code\/text editor<\/p>\n<ul>\n<li>Syntax highlighting<\/li>\n<li>PHP syntax checking before saving to disk to try and banish white screen of death after uploading invalid PHP<\/li>\n<li>Line numbers<\/li>\n<li>Colour assist &#8211; a colour picker that only shows once we\u00a0double click a hex colour code in the editor. We\u00a0can also drag our\u00a0own image into the colour picker to use instead of the default swatch (see other notes for info).<\/li>\n<li>File tree allowing us\u00a0to access and edit any file in our\u00a0wp-content folder (plugins, themes, uploads etc)<\/li>\n<\/ul>\n<p>WPide works in WordPress single installation and WordPress Network<\/p>\n<p><a title=\"WP Editor\" href=\"https:\/\/wordpress.org\/plugins\/wp-editor\/\" target=\"_blank\"><strong>WP Editor<\/strong><\/a><\/p>\n<p><a href=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/06\/wpeditor.jpg\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"383\" data-permalink=\"https:\/\/pixert.com\/blog\/wordpress-code-editor-enhancement\/wpeditor\/\" data-orig-file=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/06\/wpeditor.jpg?fit=1051%2C907&amp;ssl=1\" data-orig-size=\"1051,907\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"wpeditor\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/06\/wpeditor.jpg?fit=1024%2C883&amp;ssl=1\" class=\"aligncenter wp-image-383 size-large\" src=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/06\/wpeditor-1024x883.jpg?resize=620%2C534\" alt=\"wpeditor\" width=\"620\" height=\"534\" srcset=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/06\/wpeditor.jpg?resize=1024%2C883&amp;ssl=1 1024w, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/06\/wpeditor.jpg?resize=300%2C258&amp;ssl=1 300w, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/06\/wpeditor.jpg?w=1051&amp;ssl=1 1051w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>WordPress code editor plugin that <strong>replaces the default plugin and theme editors as well as the page\/post editor<\/strong>. This is what makes WP Editor\u00a0different from WPide. It also integrated with\u00a0CodeMirror and FancyBox. WP Editor have 5 settings that you could alter \u00a0(WP-Admin &gt; WP Editor), those are Main Settings, Theme Editor, Plugin Editor, Post Editor, Overview.<\/p>\n<p>Features that also differentiate WP Editor from WPIDE are themes,\u00a0enables files to be uploaded without the use of FTP,download the file or the entire plugin from within the editor.\u00a0It also has following features that usually found in any code\/text editor<\/p>\n<ul>\n<li>CodeMirror<\/li>\n<li>Active Line Highlighting<\/li>\n<li>Line Numbers<\/li>\n<li>Line Wrapping<\/li>\n<li>File tree allowing us\u00a0to access and edit any file in our\u00a0wp-content folder (plugins, themes, uploads etc)<\/li>\n<\/ul>\n<p>WP Editor works in WordPress single installation and WordPress Network<\/p>\n<p><strong>Summary<\/strong><\/p>\n<p>WPide and WP Editor are great plugin for developers who want to code or \u00a0for users who want to edit themes and plugins inside WordPress dashboard. These plugins really improve and enhanced WordPress code editor built-in<br \/>\nThe downside of these plugins is that it doesn&#8217;t look good on mobile or smartphones, the editor view squeeze to small view that hard to look at on mobile or smartphones. WordPress code editor built-in is more responsive on mobile or smartphones.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress code editor (WP-Admin &gt; Appearance &gt; Editor) does not yet have a good editor with syntax highlighting, line numbers etc.\u00a0Following plugins expand WordPress Code Editor from plain code editor to more sophisticated code editor with a lot of great features. These plugins allows administrator to edit code without accessing FTP.<\/p>\n","protected":false},"author":1,"featured_media":383,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5],"tags":[6,66,44],"class_list":["post-351","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-wordpress-2","tag-wordpress-plugin","tag-wp-admin"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/06\/wpeditor.jpg?fit=1051%2C907&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p1pvi1-5F","jetpack-related-posts":[{"id":546,"url":"https:\/\/pixert.com\/blog\/the-importance-of-child-theme-in-wordpress\/","url_meta":{"origin":351,"position":0},"title":"The importance of Child Theme in WordPress","author":"Pixel Insert \/ Pixert","date":"March 4, 2021","format":false,"excerpt":"I've been using WordPress for a very long time and one of the things I have and will do is customize themes. I'm writing this because I was lazy to use a child theme for my main site. As a result, I had to enter the Slideshow code every time\u2026","rel":"","context":"In &quot;WordPress&quot;","block_context":{"text":"WordPress","link":"https:\/\/pixert.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/03\/618F75E4-2D1B-4A2B-B95D-37A990FB1A7A.jpeg?fit=933%2C1200&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/03\/618F75E4-2D1B-4A2B-B95D-37A990FB1A7A.jpeg?fit=933%2C1200&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/03\/618F75E4-2D1B-4A2B-B95D-37A990FB1A7A.jpeg?fit=933%2C1200&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/03\/618F75E4-2D1B-4A2B-B95D-37A990FB1A7A.jpeg?fit=933%2C1200&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":216,"url":"https:\/\/pixert.com\/blog\/how-to-show-world-map-as-default-view-pronamic-google-maps-plugin-wordpress\/","url_meta":{"origin":351,"position":1},"title":"How to show World Map as default view using Pronamic Google Maps plugin for WordPress","author":"Pixel Insert \/ Pixert","date":"March 26, 2012","format":false,"excerpt":"Pronamic Google Maps plugin is the best WordPress plugin for Google Maps \"With this plugin a user can easily add location (latitude, longitude) meta data to a page, post or a custom post type. This plugin adds a meta box with an Google Map to the post editor. Users can\u2026","rel":"","context":"In &quot;Code Snippet&quot;","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":208,"url":"https:\/\/pixert.com\/blog\/how-to-add-a-wordpress-shortcode-outside-post-editor-php-template\/","url_meta":{"origin":351,"position":2},"title":"How to add a WordPress shortcode outside of the post editor or  PHP templates","author":"Pixel Insert \/ Pixert","date":"March 13, 2012","format":false,"excerpt":"Shortcodes were introduced back in WordPress 2.5. Shortcodes are for creating macros to be use in a posts. For instance, the following shortcode (in the post\/page content) would add a photo gallery into the page: [ \u00a0gallery \u00a0] If you want to use that shortcode outside of the WordPress post\u2026","rel":"","context":"In &quot;Code Snippet&quot;","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2011\/03\/wordpresslogo-300x68.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":227,"url":"https:\/\/pixert.com\/blog\/mp4-video-cannot-play-on-ipad-ipod-iphone-using-jw-player-shortocode\/","url_meta":{"origin":351,"position":3},"title":"MP4 video cannot play on iPad\/iPod\/iPhone using JW Player shortcode","author":"Pixel Insert \/ Pixert","date":"May 14, 2012","format":false,"excerpt":"It seems that this is a bug on JW Player for WordPress plugin We added JW Player or WordPress plugin shortcode with a mp4 video in it, the video plays on Macbooks and PCs, but it shows blank on iPad or iPod or iPhone. Although HTML5 as default mode, it\u2026","rel":"","context":"In &quot;iOS&quot;","block_context":{"text":"iOS","link":"https:\/\/pixert.com\/blog\/category\/ios\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":78,"url":"https:\/\/pixert.com\/blog\/limiting-access-to-admin-folder-htaccess\/","url_meta":{"origin":351,"position":4},"title":"Limiting Access to Admin folder via .htaccess","author":"Pixel Insert \/ Pixert","date":"March 31, 2011","format":false,"excerpt":"Some CMS have admin folder. It's an important folder because it has all the files that deal with administration. If the security of the files in it is compromised, bad things can happen. One effective option to reducing the risk of a security breach on the Admin folder is by\u2026","rel":"","context":"In &quot;Web Apps&quot;","block_context":{"text":"Web Apps","link":"https:\/\/pixert.com\/blog\/category\/web-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2011\/03\/lock-288x300.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":554,"url":"https:\/\/pixert.com\/blog\/a-micro-landing-page-for-social-media-with-wordpress-wp-mylinks\/","url_meta":{"origin":351,"position":5},"title":"A micro landing page for Social Media with WordPress, WP MyLinks","author":"Pixel Insert \/ Pixert","date":"March 22, 2021","format":false,"excerpt":"I need a micro landing page similar to Linktree but on top of WordPress. I could use Linktree but I already have a WordPress based website and my own domain which is good for my own branding. I found a plugin, WP MyLinks to make it happen. As the creator\u2026","rel":"","context":"In &quot;WordPress&quot;","block_context":{"text":"WordPress","link":"https:\/\/pixert.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/03\/AF5FD8F8-0BBF-422C-8294-335543A03248.jpeg?fit=1200%2C1045&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/03\/AF5FD8F8-0BBF-422C-8294-335543A03248.jpeg?fit=1200%2C1045&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/03\/AF5FD8F8-0BBF-422C-8294-335543A03248.jpeg?fit=1200%2C1045&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/03\/AF5FD8F8-0BBF-422C-8294-335543A03248.jpeg?fit=1200%2C1045&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/03\/AF5FD8F8-0BBF-422C-8294-335543A03248.jpeg?fit=1200%2C1045&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts\/351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/comments?post=351"}],"version-history":[{"count":0,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts\/351\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/media\/383"}],"wp:attachment":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/media?parent=351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/categories?post=351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/tags?post=351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}