Browsed by
Category: Wordpress

Things I have learned about WordPress

First steps with the WordPress administration area

First steps with the WordPress administration area

WordPress 101 – First steps with the WordPress administration area

Now that you have finished installing WordPress on your desktop or server, it is time to get familiar with the WordPress administration area. I will take you through some of the basics of using the web interface and begin customising your website.

Logging in to the WordPress administration area

First step to using WordPress is accessing the WordPress administration area or the backend of your website. You can access the WordPress login page by adding “wp-admin” to the end of your URL (e.g. http://mywebsite.com/wp-admin). Now you will be presented with a form prompting you for a username and password. If you recall during the installation process we created a username and password which you will enter into this form. Please not this is not the MySQL username and password.

wordpress administration username passwordThe Dashboard

After logging into the administration page you will be greeted with the Dashboard. In WordPress a Dashboard is the main administration screen for a site.  It summarizes information about the site in one or more Widgets that you can add and remove. The Dashboard is also where you will plant the seeds of your new website – Creating pages, writing posts, designing the layout and making the website your own.

Starting at the top of this page we can see the toolbar.  The toolbar contains links to information about WordPress, as well as quick-links to create new posts, pages and links, add new plugins and users, review comments, and alerts to available updates to plugins and themes on your site. It also has a handy link to directly view your new website by clicking on your name.

wordpress administration toolbar

On the left side of the WordPress administration page is the main navigation menu, which is where you will perform most of your functions. As you move your cursor down this list you will see a number of sub lists pop out detailing further actions. You should get familiar with this menu – Poke around at the various options and sub menus available.

Viewing your posts

A post is a single article within a blog. What you are reading right now is a post. Assuming you are using the default WordPress theme then you will only have one post to work with in the beginning. This post will be visible on the front page, or the homepage of your website. Go take a look for yourself by navigating to your website using the WordPress toolbar. If you click on the title of the post it will bring you to the page of the post. Alternatively you can also view the post by clicking the ‘View’ button in the posts page:

wordpress administration postsPosts are usually stored in Categories and/or Tags so you can keep related topics together. Every Post in WordPress is filed under one or more Categories. Categories allow the classification of your Posts into groups and subgroups. Tags are the keywords you might assign to each post. The difference is that tags have no relationship to each other. They can be completely random for each post. Tags provide another means to aid your readers in accessing information on your blog. Looking at the screenshot above you can see that post is in the WordPress category, and does not have any tags.

Viewing your pages

Pages are not to be confused with posts. Pages are for content such as “About,” “Contact me”, etc.. For example I have an about me page. They live outside of your blogs home page. To look at your pages you can click on the ‘Pages’ option in the navigation menu. One thing to note is that normal web pages can be either static or dynamic. Static pages are created once and do not have to be regenerated every time a person visits the website. If you take a look at my about me page you might think that this is static – Nothing changes on this page whenever you visit it. However, almost everything in WordPress is generated dynamically including pages.

As I discussed in my previous post on WordPress installation everything published within WordPress is stored in the MySQL database. When the page is accessed the database information is queried by your WordPress template from your theme and the web page is generated. Technically this would be considered a “pseudo-static” page as static information is generated dynamically by the template. I will discuss this further in future posts.. Stay tuned.

By default you will not have any pages available to look at, so try creating one and see what happens. How does your page look?

Looking for more?

For now I would recommend taking a look at the WordPress Codex, but in future posts I aim to expand on the details behind pages, posts, templates, themes, plugins, and anything else related to WordPress that I can expand on..

Thanks for reading!

How to edit a WordPress site offline on your Windows desktop using WAMP

How to edit a WordPress site offline on your Windows desktop using WAMP

WordPress: How to edit your site offline on your Windows Desktop using WAMP

In my previous post I covered the installation of WordPress with WAMP. You might want to read that before continuing here! Now that I have wampserver and WordPress installed and running on my desktop it’s time to import my production site so I can make changes offline. Once again I have another gripe with the WordPress documentation – There isn’t enough detail on this topic. How to move your WordPress site to edit it offline should be discussed in the “Moving WordPress” section of their Codex. I tried reading the above section but it’s so generic it’s mostly unhelpful. With this post I aim to help anyone in a similar situation to me.

Backing up your online WordPress site

Your WordPress database contains every post, every comment and every link you have on your blog. If your database gets erased or corrupted, you stand to lose everything you have written. While I could go through the process of doing everything manually, I decided to make use of the various plugins available in WordPress. I started with “UpdraftPlus – Backup/Restore” but in order to make use of migrate and export options I needed to buy another plugin for that plugin – Yeah, not happening. Next up I decided to take a look at a plugin named “Backup Guard” which seems to work great so far.

First off I installed BackupGuard on the production site. After installation there is a new entry in the sidebar for “Backup Guard”. Clicking on the backup guard entry will bring you to the following GUI where you can complete a backup or import a previous backup. I performed a manual backup and you can see it completed successfully:

wordpress mage of backup guard

I connected to the production site via SFTP and transferred the backup to my local desktop. Swapping over to the offline instance of WordPress I tried to import the backup, however it told me the file was too large (67MB) but offered me an alternative:

wordpress mage of backup guard

If your file is larger than 2MB you can copy it inside the following folder and it will be automatically detected: C:\WAMP\www\wordpress\wp-content\uploads\backup-guard

Please note your directory may be different depending where you installed WordPress. So I did just that; Copied my sgbp file to the above folder and it appeared once I returned to the backup guard section again. Now I just needed to click the restore button and hope everything went to plan:

wordpress mage of backup guard

This process took approximately a minute or so and then I was brought back to the login prompt again. First I felt a little panicky because my credentials I setup in the previous installation were not being accepted. Then I realised my mistake; The credentials being requested were those of my live website rather than the offline instance – Silly me! After logging in all of my pages and posts were visible from the production website on my offline instance. The import was a success!

Much easier than I expected – Highly recommend Backup Guard!

How to install WordPress locally on your Windows desktop using WAMP

How to install WordPress locally on your Windows desktop using WAMP

WAMP Server: How we can use it to edit WordPress sites offline

Now that we have a fundamental understanding of how a WordPress theme functions, it’s time to start using WordPress.

To run WordPress on any machine there are a few requirements:
  • PHP version 5.6 or greater
  • MySQL version 5.6 or greater OR MariaDB version 10.0 or greater
  • ‘Web server software such as Apache

This may seem like an intimidating list of software to source and download one-by-one, but that won’t be necessary. This is where WAMP comes into play!

What is WAMP and why do I need it?

WampServer is a Windows web development environment. It allows you to create web applications with Apache2, PHP and a MySQL database. Alongside, PhpMyAdmin allows you to manage easily your databases. An all-in-one package which contains everything that WordPress requires so our lives had suddenly become much easier. There are other clients for Windows such as XAMPP with the biggest difference being that WAMP runs on Windows, XAMPP is multi-platform. Aside from that it’s a matter of personal preference. They both provide you with an Apache-MySQL-PHP environment that runs pretty much the same under both systems.

Installing wampserver on Windows

Before installing WordPress you will need to download and install wampserver on your Windows desktop. Double click on the downloaded file and just follow the instructions. Everything is automatic. The WampServer package is delivered with the latest releases of Apache, MySQL and PHP.

You will need to choose the installation directoy for WAMP – The recommendation being that you do not install to “Program Files” but instead install it in a folder in the root directory as there could potentially be some permissions issues. I installed it to C:WAMP which worked fine. At one point during the installation, WampServer will ask for the location of the default web browser and text editor. WampServer will automatically choose notepad.exe and Internet Explorer as the default options but these can be changed if needed.

Once the installation completes successfully you should see the ‘W’ icon in your notification area:

wamp server icon in notification area
If you don’t you will need to start wampserver by finding the entry in your start menu. On Windows 8 my entry looked like this:

wamp erserver icon in start menuCreating a database for WordPress to use

Before installing WordPress you will need to create a database that WordPress can use. To do this we will need to access one of the wampserver features named phpMyAdmin. Easiest method of accessing this is to left-click the wampserver icon and click on phpMyAdmin:

phpmyadmin entry in wamp server

This will open a new browser window to http://localhost/phpmyadmin with a login prompt (Or you can just go to this URL manually). The default credentials here are root with no password. When you log in you may notice the big warning at the bottom of the page stating “You are connected as ‘root’ with no password, which corresponds to the default MySQL privileged account. Your MySQL server is running with this default, is open to intrusion, and you really should fix this security hole by setting a password for user ‘root’.” Sounds scary but this is not a problem as long as this is only a local installation.

Click on the databases tab at the top of the page which will give you a list of the current databases and allow you to create a new database. In the ‘Create database’ menu enter a name for your database. I called mine ‘wordpress’ for simplicity sake:

wordpress database in wamp phpmyadmin

Download and install WordPress on Windows

Don’t worry we’re almost there! Now it’s time to go and grab yourself a copy of WordPress from their website. This will download a .zip file which you will need to unzip. Once unzipped you will find a wordpress folder which you will need to move to C:\WAMP\www. So my directory structure looks like C:\WAMP\www\wordpress. As soon as the copy completes you should be able to access WordPress via your web browser via http://localhost/wordpress. If you rename the wordpress folder to mysite then you would access it via http://localhost/mysite. You should be prompted to choose your language for WordPress. WordPress will then inform you that it is going to create a wp-config file using the provided information in the following steps. If for any reason this automatic file creation doesn’t work, don’t worry. All this does is fill in the database information to a configuration file. You may also simply open wp-config-sample.php in a text editor, fill in your information, and save it as wp-config.php.

One the next page you will need to enter your database details. Here is what mine looks like:

Wordpress database information using wamp

If you recall in the earlier steps I created a database named wordpress and we logged in using the default credentials of root and no password. If this works you can proceed to the next steps with a very friendly message:

All right, sunshine! You’ve made it through this part of the installation. WordPress can now communicate with your database. 

Now we can proceed with actually installing WordPress!

On the next page it will ask you for:

  • A website title – What is the name of your website? I just named mine offline.
  • A username for logging in with
  • A password for the above username
  • An email address

If the installation succeeds you should then be brought to the login prompt where you will need to enter the username and password you just created.

What now?

Whatever you want! You now have a fully functional installation of WordPress which you can use testing and offline development. Have fun!!

If you want to learn more take a look at a few of my other WordPress posts:

WORDPRESS – THE THEME HIERARCHY

HOW TO EDIT A WORDPRESS SITE OFFLINE ON YOUR WINDOWS DESKTOP USING WAMP

WordPress – The theme hierarchy

WordPress – The theme hierarchy

Theme hierarchy in WordPress – The anatomy of a theme

What is the WordPress theme hierarchy / template hierarchy? Well, let me explain..

My cousin asked me to develop a website for her Father’s business. Initially I thought this would be a great learning experience as I knew the basics of web development (HTML, CSS, PHP, and a bit of JavaScript) but had never completed a full website before. I slowly but surely realised just what I had landed myself into… !

To cut a long story short I decided it would be best to create and implement a WordPress theme. I’ve always heard this makes content management very straightforward and doesn’t require much knowledge of PHP / HTML for managing. Sounds perfect – Unless you’re the one developing the WordPress theme in which case it’s an absolute pain!

Had I known how difficult this would be I definitely would not have chosen to develop a WordPress theme for my first development job. The first hurdle I encountered was understanding the theme hierarchy. See what I did at first was simply hard code an index.php and styles.css and upload them as a “theme”. Then I tried to create a new page from within WordPress and that wouldn’t work – It kept bringing me back to index.php. I had also tried to create a contact.php with the company contact details – Now how do I get this to appear in WordPress? Hmmmm..

At this point I learned about the WordPress Theme Hierarchy. I didn’t really understand it, but I knew it was how WordPress determines which template file(s) to use on individual pages. So I kept trying numerous different implementations, none of which worked. Read multiple blog posts and just ended up confused. Until I saw the ‘template-loader.php’ being mentioned somewhere and this is what finally made me understand the theme hierarchy template. Show me in code and I’ll understand!

Let’s take a look:

wordpress theme hierarchy

Examining this file is what finally made everything click with me in terms of how pages get selected, and the reason why creating a new page in the WordPress GUI was not working. I only had an index.php! Basically, this code steps through each of the query context conditionals in a specific order, and defines the template to use for the first one that returns true. So in my case, only index.php was being found and so only the contents of index.php were being returned.

When a person browses to your website, WordPress selects which template to use for rendering that page. As we learned earlier in the Template Hierarchy, WordPress looks for template files in the following order:

  • Page Template — If the page has a custom template assigned, WordPress looks for that file and, if found, uses it.
  • page-{slug}.php — If no custom template has been assigned, WordPress looks for and uses a specialized template that contains the page’s slug. A slug is a few words that describe a post or a page. If the page slug is recent-news, WordPress will look to use page-recent-news.php.
  • page-{id}.php — If a specialized template that includes the page’s slug is not found, WordPress looks for and uses a specialized template named with the page’s ID. If the page ID is 6, WordPress will look to use page-6.php.
  • page.php — If a specialized template that includes the page’s ID is not found, WordPress looks for and uses the theme’s default page template.
  • index.php — If no specific page templates are assigned or found, WordPress defaults back to using the theme’s index file to render pages

I realise this is just the basic knowledge needed but I hope to discuss this further. Writing here helps me understand and get my thoughts clear.