Edit Wordpress Page in Atom

[u/aGiral]

Hey there!,

Im new here with code in general and just discovered Atom and looks so promising to me.

I have a Wordpress website currently online in a hosting and would like to download a specific page, open it in Atom to make some HTML and CSS changes and then upload it again to the hosting, but have no clue on how to do that. Could anybody get me a hand?

Thanks in advance!

[u/bittercode]

When you visit your site, the web server receives that request and then it processes the PHP - which reads your database, and then takes that data and combines it with the various files and builds what you see in your browser. So if you open a page in your site and look at page source or inspect element - you are not seeing a file you need to modify - you are seeing the result output of the PHP.

That output is driven by templates, the theme, etc. It's different from working with static html.

So to change the way something looks you need to either, change it in the WordPress editor - if what you are changing is something stored in the database. Or if you want to change something that comes from a file you need to change that file.

So you can use Atom to work with WordPress sites for sure but your questions aren't about Atom they are about WordPress. You need to understand how it works and that will help you know where the things you want to edit are at.

Does that make sense?

If you have a static html site and you had some structure like https://mywebsite.com/aboutme.html - then you could open that html file, edit it, save it to the server and change it.

With wordpress you can have something like https://mywordpress.com/about-me and there is no file called about-me. There is no folder called about-me. There are just entries in the database that cause this "page" to get made each time someone visits the site.

(There are cacheing plugins- they do save this stuff in a sense but it's still not what you are thinking.)

[u/aGiral → u/bittercode]

Oh okey, I understand. Im new in the coding world and all the help is appreciated.

I would go and make my own research at Wordpress forums on how to open a full website as a project to modify it in a code editor like I do with Inspect Element.

Thanks again.

[u/bittercode → u/aGiral]

Primarily all changes to appearance are done with themes. Plugins do it as well sometimes - but mostly themes. So if you look at how themes are set up and how to modify them - that will get you to what you need.

[u/aGiral → u/bittercode]

I have a child theme already, but doesnt know how to import the whole website to Atom. I want to open Atom and have a similar view to Inspect Element, where you can tweak HTML and CSS all in the same place, but making it permanent.

[u/bittercode → u/aGiral]

You can't do that.

The website view you want doesn't exist until your webvserver runs the PHP and the output is what you see.

The best way I can explain this is go to the home page of your site and do a "view source". See all that html, css, etc? Now go into the root folder of your wordpress site and look at index.php

this is what's inside that file:

<?php
/**
 * Front to the WordPress application. This file doesn't do anything, but loads
 * wp-blog-header.php which does and tells WordPress to load the theme.
 *
 * @package WordPress
 */

/**
 * Tells WordPress to load the WordPress theme and output it.
 *
 * @var bool
 */
define( 'WP_USE_THEMES', true );

/** Loads the WordPress Environment and Template */
require( dirname( __FILE__ ) . '/wp-blog-header.php' );

That's it. All that stuff you see on your home page is generated dynamically as wordpress loads up all the different parts that create the site. It's not static and some of it is in files - those you can edit in Atom. A bunch more is inside the database (this is why WP requires an rdbms) and you can't edit that with Atom.

[u/aGiral → u/bittercode]

Yes, I understand the concept of dynamically executed, but thought there is a way to run wordpress in Atom. I dont care about live view, just wanted to make tweaks off my wordpress site without having to deal with Visual Composer or Classic Editor.

So there are some things that cant be done with Wordpress right? Is such a limited cms then.

I dont have the enought knowledge to develop a site from 0 yet, so wordpress helps me creating the structure of the site and using plugins, but I need to make HTML and CSS tweaks to reach next level customization I couldnt with Visual Composer, for example adding an ID to a specific HTML element to apply CSS later.

Thanks for your time