WORDPRESS

Question

I am learning how to code with Wordpress. Have started watching videos. Want to install wordpress onto my Mac. Have installed MAMP first. My Question is: Have got to step. Start Server which I have done then I need to open text editor. I haven't got Atom in my applications folder. Do I need to download ?

Answer 1 · 2018-02-16T15:02:35Z

February 16, 2018 3:02pm

Hi Greg,

Atom is kind of confusing when you first start it up, isn't it? I'll do my best to help.

When you first open Atom, it's showing a split screen view, with (as I remember) a menu on the right, and a welcome message on the left - or something thereabouts.

If you look at the top of the window, you'll see that there are some tabs open ("Welcome Guide" on the right side is one of them, for example). If you hover your mouse over the tab name, a little X will appear and let you close it.

My advice is to just close all of them so you're left with a blank screen - a less confusing place to start in my opinion!

Now, just for the purposes of becoming familiar with it, I suggest you try these steps...

Create a new, empty document

Select File > New File from the top menu. Or use the CMD + N shortcut on your keyboard. This will create a blank document ready for you to start typing code.

You'll notice it has the number 1 listed in there - waiting for your first line of code. Writing code in the document works in exactly the same way as Treehouse Workspaces do. You can go ahead and write a couple of lines of code just to test it out. If you like, copy and paste the code snippet I've created for you below just for now...

<html>
<head>
<title>A blank new page by Greg!</title>
</head>
<body>

<h1>Hello World!</h1>
<h2>A message to the world, from Gregory Berger</h2>
<p>Writing code is a piece of cake - and I eat it for breakfast, lunch and dinner (sometimes even for dessert).</p>

</body>
</html>

Save your document

Just like Workspaces, you'll need to save your file every time you make a change that you want to view.

Select File > Save As... > Navigate to a suitable folder

Or use the keyboard shortcut CMD + S

My advice is to create a new folder in your Documents that you can use to store your code experiments. Try to keep it well organised - mine get really messy if I don't put each new project in its own folder!

Let's just name the file we just created "greg.html"

Close your document

Now that it's saved, you can close the document we just created. Either hit the X on it's tab, or:

Select File > Close Tab

Or use the keyboard shortcut CMD + W

Open a document

It's pretty obvious, just use File > Open to locate a file you've already worked on, or to navigate to a file you want to work on in the folder you setup as your Document Root for MAMP.

Preview the file you just created in your browser

A static HTML file (unlike a tool like Wordpress) can be run from any folder on your Mac, it doesn't need to be stored in your MAMP's Document Root in order to run.

That's the beauty of the activity I suggested (creating a small 2-3 page website using static HTML / CSS as a first step), because you can get used to working with Atom etc without all the added complications of understanding MAMP, PHP and how Wordpress complicates everything.

So, just go ahead and use Finder on your Mac to find the folder that contains the "greg.html" file we just created.

By default, when you double click on an .html file it will open using Safari. The web page you just coded will be running. This is the equivalent of hitting "Preview" inside a Workspace.

Typically, I have code open in my text editor (Atom) to make changes, and I have Safari open to preview it every time I make a change and I want to see how it looks - just by Saving the html document, and hitting Refresh in the browser.

How did you find that? All pretty basic, but they're the essentials you'll need to understand to get started. Why not try using Atom now to build a simple HTML page, including some CSS styling (you'll need to create and link a style.css document to it) so you can get used to it's core functions, and then return to your Wordpress lesson in order to take the next steps but with a working knowledge of your text editor?

Hope that helps :-D Rich

Answer 2 · 2018-02-16T12:14:06Z

February 16, 2018 12:14pm

Hi Gregory,

You will need a text editor of some kind to configure some of the files required to get your Wordpress install working, and then with which to customise a theme for it, etc.

So if you haven't got one you like yet, then Atom will do fine for starters.

It's a third party app and doesn't ship with OSX, so you'll have to download and install it: atom.io

Good luck with your journey learning Wordpress! Rich

Answer 3 · 2018-02-16T14:09:41Z

February 16, 2018 2:09pm

No problem Gregory, glad you're making progress.

Out of curiosity, how far have you progressed through the HTML and CSS courses?

Personally, I'd recommend getting a good grip of those before diving too deep into Wordpress.

Getting to a point where you can build a static website using HTML+CSS, and do it well, will leave you in very good stead to take the relatively small leap involved in adapting those skills to build Wordpress sites.

Once you've downloaded Atom, my recommendation is to start a small project to build a small 2 or 3 page personal website to describe yourself, your skills and your work perhaps. It would be a good exercise in the application of any HTML + CSS you've learned so far and it will put your skills to the test a lot more thoroughly than completing any of the Treehouse code challenges through Workspaces can.

A small static project like that will give you an opportunity to learn to use Atom properly using code you're already familiar with. You may end up knee deep in PHP when you start building a Wordpress theme - which doesn't sound like something you're familiar with at all yet, and therefore might not be the most logical step to take.

But that's just my personal recommendation - I believe in learning by doing, but everyone has an individual learning style.

For me, combining Treehouse lessons with applying each piece of new knowledge to a small self-initiated project, has really helped me absorb information much faster, and it seems to stick in my mind much better than when I just blitz through the videos and quizzes and move on. Practice makes perfect, they say.

Anyway, feel free to disregard - just wanted to give a word of advice :^)

Good luck amigo! Rich

Answer 4 · 2018-02-16T15:21:51Z

February 16, 2018 3:21pm

One last thing - you said "Video says I should click on : Applications dropdown, MAMP, htdocs. I don't get the htdocs dropdown. Just a Untitled, SaveAs and where boxes? Any ideas?"

They're describing what's called the "Document Root" for MAMP. It's the folder that MAMP uses to store any files that you want it to execute as a web server.

For example, a PHP file called "test.php" will not run if you try to open it in Safari - you need to drop it into your Document Root and navigate to it through Safari's address bar, by visiting: "http://localhost:8888/test.php".

Because Wordpress is built using PHP, it requires a web server (MAMP) to run.

The default location of MAMP's Document Root, is inside your Applications folder > MAMP > htdocs.

So you can navigate to it using the File > Open route in Atom's menu bar, or you can just open the folder using Finder as normal on your Mac, and see what's inside it so far from there.

Using Finder, normally you'll see the "Applications" folder available in your left-hand sidebar. Just click it, then find the MAMP folder. Inside that, you'll see "htdocs". Imagine this is your live folder! Everything inside is what you're making available to the world.

Technically, you can change the position of your Document Root using MAMP's preference dialog. However, I suggest you stick with the default location for now, as it'll probably make things easier when you're working from tutorials and so forth.

If you've installed Wordpress already, then you'll find your Wordpress files in that htdocs folder. If you haven't taken this step yet, this is where you'll need to unzip the Wordpress install to make it executable.

NOTE - Here's a nifty time-saving trick: If you've navigated to your htdocs folder using Finder, and you've found a file that you need to edit - just click on the file using your right hand mouse button (or CTRL + Click if you only have a trackpad or something) to bring up the menu > Select "Open With..." > and then select "Atom.app"... It will open your file using Atom for you to work on.

Welcome to the Treehouse Community

Looking to learn something new?

Gregory Berger

Gregory Berger

WORDPRESS

4 Answers

I Dilate

I Dilate

I Dilate

I Dilate

Gregory Berger

Gregory Berger

I Dilate

I Dilate

Gregory Berger

Gregory Berger

I Dilate

I Dilate