Understanding the WordPress File and Directory Structure

Understanding the WordPress File and Directory Structure

While it’s entirely possible to interact with your WordPress website only through the dashboard, understanding how your install is structured, and which files perform which functions, is crucial in order to attain a higher degree of control over your site. At the very least, this understanding will enable you to troubleshoot any errors that might arise much more easily.

Each WordPress install starts out with the same directory structure and core files. Every plugin or theme you install, every script you add, and every error screen that appears, is possible thanks to the CMS’s backbone. While the idea of poking around these files may seem intimidating at first, it’s much simpler than it looks.

Over the course of this article, we’ll review the contents of the most important WordPress folders, paying special attention to the core files that power your site.

Introducing the WordPress Directory Structure

The WordPress file structure is honestly pretty simple at the higher levels. You have your public_html folder, where its three key folders are located, as well as a lot of important files such as wp-config.php and .htaccess. Even if it’s your first time poking around in the back of your WordPress installation, chances are that you’ve already familiar with those names.

In order to access these files and folders, you must use either your hosting service’s cPanel file manager, or a File Transfer Protocol (FTP) client. For the purposes of this guide, we’ll be using FileZilla. Regardless of your choice, this is what the inside of yourpublic_html folder should look like:

public-html

Before we jump into those three top level folders, let’s take a look at some of the files laying around inside public_html. First of all, we have .htaccess (short for “hypertext access”). This enables you to control permalink structure, files, folders, and access to them across your WordPress installation. A pristine .htaccess file should look as follows:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Then we’ve got index.php, which will be returned as your homepage by default unless it’s superseded by either a front-page.php or a home.php file:

public-html-index-php

 

 

 

 

 

 

 

Another crucial file in this directory is wp-config.php. This handles WordPress’ base configuration, and includes your MySQL settings, secret keys, and database table prefix. This is what your database settings should look like:

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'notarealname');
/** MySQL database username */
define('DB_USER', 'notarealuser');
/** MySQL database password */
define('DB_PASSWORD', 'notarealpassword');
/** MySQL hostname */
define('DB_HOST', 'localhost');

Other notable files on this directory include wp-activate.php, wp-signup.php, and wp-signup.php, which together handle the signup, login, and user confirmation process. We’ve also got wp-comments-post.php (which handles the commenting function and prevents comment duplicates), and wp-settings.php, which sets up some common WordPress variables.

Having covered those, let’s move onto the first of the top level folders, wp-admin.

The wp-admin Folder

wp-admin

 

 

 

 

 

 

 

As its name implies, this is the folder that houses the files powering your admin tools as a WordPress user. For example, admin.php (which is at the heart of the folder), enables connection to the database, displays the WordPress dashboard, and performs any other number of key functions, such as checking whether any given user is in fact the admin in question. If they are, the script proceeds to call upon the wp-load.php file, which in turn loads the wp-config.php file:

/**
* In WordPress Administration Screens
*
* @since 2.3.2
*/
if ( ! defined( 'WP_ADMIN' ) ) {
define( 'WP_ADMIN', true );
}
if ( ! defined('WP_NETWORK_ADMIN') )
define('WP_NETWORK_ADMIN', false);
if ( ! defined('WP_USER_ADMIN') )
define('WP_USER_ADMIN', false);
if ( ! WP_NETWORK_ADMIN && ! WP_USER_ADMIN ) {
define('WP_BLOG_ADMIN', true);
}
if ( isset($_GET['import']) && !defined('WP_LOAD_IMPORTERS') )
define('WP_LOAD_IMPORTERS', true);
require_once(dirname(dirname(__FILE__)) . '/wp-load.php');

If you pay attention to the names of the files in this folder, you’ll find that most of them correspond to the functions you’ve come to know on the WordPress dashboard. For example, profile.php powers the user profile administration screen, while theme-install.php controls the theme installation panel, and plugin-install.php does the same for the plugins panel.

As for the other important folders inside of wp-admin, images is filled with images used in the WordPress administration panel, css and js are devoted to CSS code and JavaScript scripts respectively, and network houses the PHP files necessary to powerWordPress multisite.

The wp-content Folder

This is the section of the back end where you’re likely to spend most of your time during the course of your relationship with WordPress. Its two most popular functions are located inside – of course, we’re talking about themes and plugins:

file

The plugins Folder

wp-content-plugins

 

 

 

 

 

 

Each plugin you upload to WordPress will have its own subfolder within the plugins folder, as seen in the example above. The contents of each of these vary from plugin to plugin. Here, for example, is a quick look inside the Akismet plugin’s folder:

wp-content-akismet

How to Create Retina Display Image Assets for Better Looking Websites

How to Create Retina Display Image Assets for Better Looking Websites

You’ve invested a lot of time into making your new website perfect, so why does it look so fuzzy when you view it on your iPhone? You made sure to use beautiful high quality images but they don’t seem to be displaying correctly at all. Cue panic!
Many people don’t realize that newer devices – especially those from Apple – use advanced display technology that affects how images are displayed. Fortunately, there are some tricks you can use to make sure your images are optimized to ensure your website looks perfect on devices like your iPhone.
This article will introduce the topic of retina display and how it impacts your website images, then show you how to create image assets that will display well on retina screens.
Retina Display Images Explained

Device screens have continued to improve in quality over the last several years, and Apple in particular have been working on making their screens extremely clear and viewable – in fact, ‘Retina Display’ is a brand name from Apple used to describe the screens of their newer devices.
Retina screens aim to display text and images as sharp as possible, with no pixels visible to the naked eye. The challenge for designers is that retina displays is not a standard – it varies depending on the size of the device’s display (for example, a watch screen compared to a tablet), and how close a typical user would be to the screen.
When talking about retina displays we have to think about pixel density, which is the number of pixels a display can fit into a fixed distance. This is not the same as resolution, which is the number of pixels across the entire height and width of a device. A smaller screen (such as an iPhone) with the same resolution as a larger one (such as an iPad) would have a greater pixel density.
Dividing the physical width of the display by the number of pixels displayed horizontally gives us the pixels per inch (ppi, also called dpi for dots per inch). ‘High DPI’ is used to refer to any device that has over 200 pixels per inch. This includes all retina display devices from Apple, and some devices from other manufacturers. For a more in depth explanation, check out this article on the Designer’s Guide to DPI.
Traditionally, web graphics were optimized at 72dpi. An image at that density displayed on any high DPI device (especially a retina display) will be displayed in one of two ways:
As a fraction of the size if shown at the device’s DPI.
Shown at the original dimensions with extra pixels guessed (interpolated) and filled in reducing the quality of the image.

Retina-Comparison

 

This means that for the best quality image display on retina display devices, you need to be working with higher resolution images. This ensures that the image can be displayed at a pixel density appropriate for these newer screens. Let’s take a look at how you can do that within your Photoshop.

How to Use Photoshop to Create Retina Display Images

Working with images at double or quadruple the resolution means you may need to zoom in to be able to see any fine detail, but extremely large image files can create performance issues and file storage challenges.

The solution for most designers has been to either create multiple layers and groups, turning them on and off as needed using the comps feature of Photoshop, or to work at the the original resolution and export the sizes they need (using an action likeretinize.it).

The challenge with both of these methods is that you cannot see multiple images at the same time. If you need to view the differences in the images at the necessary sizes, you have to switch between them or export and then rework.

Fortunately for us Photoshop lovers, Adobe has added functionality that makes creating multiple images even easier. Now you can create multiple canvases side by side using the artboard feature, and create multiple image sizes using Generate. Let’s see how this works to create images for retina displays.

1. Create Your First Artboard

The new Artboard tool, introduced in Photoshop CC 2015, can be found hidden behind the Move tool. You can either click on the tool in the menu, or use Shift+V to switch between Move and Artboard:

Artboard-Tool1

To create an artboard, click and drag an area. The new artboard will be displayed in the Layers panel with a default name of Artboard 1.

2. Set Up Your Artboard

You can add any layers you need to your artboard, and they will be nested similar to layer groups – enabling you to create an appropriate layer structure. We would suggest adding your various assets, such as shapes and type, so that they’re positioned as you need them before moving on to the next step.

3. Duplicate Your Artboard

Once your first artboard is set up to suit your needs, you can duplicate it using the contextual menu. Right-click on Artboard 1 in the Layers panel and select Duplicate Artboard. This creates another artboard of the same size and position, containing the exact same layer structure with all the included assets:

Artboard-Duplicate1

4. Position Your Artboards

The big advantage of using artboards is being able to see all of your images at the same time. To do this, just position your artboards as needed. There are several ways to move an artboard:

  1. Use the Properties panel that displays when an artboard is selected to enter the X and Y coordinates for the top left corner of the artboard.
  2. Drag the selected artboard to any position inside Photoshop. The artboard is smart guide enabled, so you can automatically align multiple artboards and their positions will lock to the previous spacing.
  3. Use your keyboard arrow keys to move a selected artboard. An arrow key by itself will nudge the board by one pixel, while holding Shift+Arrow will move it by ten pixels.

5. Resize Your Artboards (If Needed)

If you need to adjust the size of your artboards, you again have multiple options:

  1. Resize them using the handles that appear when you select an artboard.
  2. Use the Options panel just below the File menu to choose preset sizes, set custom widths or heights, or switch between portrait and landscape orientation.
  3. Use the Properties panel that displays when an artboard is selected to change the size and access the preset sizes.

Artboard-Properties-Size1

6. Create Your Art

You can now work with your artboards, replacing image assets and making changes as needed. Assuming your original setup went well, you’ll now have pixel perfect images with all assets in the right place.

7. Set Up the Generate Tool

Generate enables you to export artboards, layers, or groups by using a special naming syntax. It acts as a Save for Web shortcut. To ensure Generate is turned on for your PSD go to File > Generate > Image Assets:

Generate-Tool1

8. Rename Your Artboards

Generate works by saving image assets as you work based on options you set in the name of the layer group – or in this case, your artboard. There are a few options you can set:

  • File format. Add an extension ( such as -opt.jpg, .gif or .png) to save the relevant file – for example, header-main.png. The image assets will be saved in the same folder as the PSD file, but with an -assets suffix.
  • File compression. After the extension, you can add a figure denoting the level compression used. For opt.jpg you can use percentages, and for .png use 8, 24,or 32 for the respective bit formats – for example, header-main.png8.
  • Output scale. You can set the scale of the output by adding either the percentage, or pixels (width by height) before the image name (e.g. 100% header-main.png8).
  • Multiple images. You can export multiple images from the same artboard by using either a comma or a plus sign to separate the image names. Each image can thus have its own options so long as each image name is unique – for example, 100% header-main.png8, 200% header-main.png8.

Combining these options enables you to consistently create complex image assets from your artboards:

Named-Artboard1

If standard images are needed for all of your artboards, the Generate tool enables you to create a default setting to apply to each one. To create this setting, add an empty layer at the top of your document with the following options:

  • Default keyword: The name must start with this to let Generate know to use it as the default.
  • Output scale: As before, set the scale of the output with a percentage or pixels (width by height).
  • Folder/suffix: Set the folder name where images should be saved, and a suffix to add to the filenames.

By adding multiple options, you can automatically create the images you need for retina displays – for example, default 100% end/@1x, 200% end/@2x, 300% end/@3x. You can then add extensions to any boards you want exported using the default option.