Customizing Your Site Using WordPress

Logging Into WordPress

  1. How to access your WordPress account: Now that you have created your website, it’s time to customize it to your specifications. To locate the WordPress login page of your website, simply enter your website address into the URL bar of your browser and add “/wp-admin” to the end, then hit ‘Enter‘. Locating WordPress Login Page
  2. Input your login information: Log into your WordPress account using the Username/Email and Password that you created your account with. If you cannot recall your password, click the ‘Lost Your Password link below. You will then provide your email that you created the account with and they will send a link that allows you to reset your password. Once you have entered the information, click ‘Log In‘. (Check the “Remember Me” box to save your login information.)

WordPress Login

Exploring Your WordPress Dashboard

  1. View the many tools of your WordPress Dashboard: Once you have successfully logged in, you will be directed to your WordPress “Dashboard”. The Dashboard page is essentially your homepage that gives you an overview of your website. You can view drafts, website activity, and WordPress related news. To the left is a side menu that lists several different categories that you can click on to customize or add content to. This menu is vital to the customization of you website.WordPress Dashboard 2

Selecting a Theme

  1. Customizing your theme: When you were installing your WordPress hosting to your domain name, you were prompted to select a theme for your website. Typically the one you choose during setup is just temporary. If you are happy with the theme you selected during setup, by all means keep it, but if you would like to search further, that is also an option. Look to the menu to the left of your Dashboard and hover over “Appearance”, then click ‘Themes‘. Appearance - Themes
  2. “Add New Theme”: You will then arrive at a page that displays your pre-installed themes. Click on ‘Add New Theme‘ to browse the many theme options. Installed Themes
  3. WordPress offers thousands of free themes. You can browse their catalog by selecting one of the categories(Featured, Popular, Latest, and Favorites.) and scrolling down until you see a theme that catches your eye. This page also contains a search bar that enables you to look up a theme by name. If you do not like any of the free theme choices, other websites such as “ThemeForest.net” offer themes for a fee. If you do download a theme from another website, simply click ‘Upload Theme and select the theme that you have downloaded. Your theme will then be uploaded and available on WordPress. Featured Themes
  4. Use “Feature Filter” to narrow down your search to a more specific theme. This will allow you to cater your search to the type of website you are trying to build. There are three sections(Layout, Features, and Subject) that list several different options that would be more specific to your website type. Check the boxes that apply below and click ‘Apply Filters‘ to view the themes that fall into those categories. Theme Filtered Search
  5. Installing your new theme: Once you find a theme that catches your eye, you are probably going to want to preview it. To do so, simply hover over the thumbnail and click ‘Preview‘. You will then be able to fully view the theme and get an idea of what your website would look like if you decide to choose this theme. Once you have found a theme that you like, click ‘Install on the thumbnail (or towards the upper, right hand corner of the preview page.). The theme will automatically be saved to your “Installed Themes”. Theme Install or Preview
  6. Activating your new theme: Now that you have installed the theme, you are going to want to click ‘Activate to apply it to your website. Congratulations! You have officially set the theme for your website. This is the foundation for the presentation of your site. Now it is time to customize it. (It is recommended to delete all inactive themes.)

Activate Theme

Customizing Your Website

  1. “Customize Your Site”: Now that you have a theme, it is time to customize. An easy way to get the ball rolling is to click ‘Customize Your Site on the Dashboard page. (You can also click “Customize” under “Appearance”, located on the left side menu.) Customize Website
  2. Customizing your “Site Identity”: Site Identity consists of your Website’s “Logo”, “Site Title”, “Tagline”, and “Site Icon”. You were already prompted to create a Site Title and Tagline when installing WordPress. If you ever want to change either, simply visit this page to do so. If you do not want your Site Title or Tagline to show, simply uncheck the box that reads “Display Site Title and Tagline”.Site Title and Tagline
  3. Selecting a logo: If you would like, you have the option of displaying a “Logo” for your site. This would be an image that represents your company or blog. You are going to want to make sure that the image you upload is a large high resolution photo. Make sure the image is not in any violation of any copyright or trademark laws. To upload the image, you are going to have to go through the process of adding media. The “Add Media” feature enables you to upload files from your computer to your WordPress website. This is a simple process that you will more than likely be doing on a regular basis. Start by clicking ‘Select Logo‘. Select Logo
  4. Your “Media Library”: Next, you will be presented with a window that displays your “Media Library”. Your media library consists of all the images that you have uploaded to your website. There may be images in your media library that came with the theme you activated. When your media library catalog increases, you can utilize the search bar to find a desired image (Tip: Make sure you save your media files under a descriptive name so you can find them in the future.). Click ‘Upload Files‘. Media Library
  5. Selecting Files: Click ‘Select Files to browse the files on your computer and to select which files you would like to upload. You also have the option of dragging and dropping a file into the designated upload area. Select Logo - Add Media
  6. Uploading the desired file: A window will then pop up that allows you to browse the files on your computer (the screenshot below depicts the window that pops up on a Mac, other brands of computer may vary.) Select the file that contains your desired logo image, then click ‘Open‘. Selecting Logo File
  7. Applying your image to the website: Your uploaded file will immediately be added to the top of your Media Library page. Make sure that the image is checked and click ‘Select‘. Select Logo From Media Library
  8. Cropping your logo image: Crop your image by adjusting the height and width until you get the desired size and shape. Once you have finished cropping, click ‘Crop Image‘ (or you can skip this step if you wish by clicking ‘Skip Cropping‘). Your Logo will now be displayed on your website. Cropping Logo Image
  9. View your logo displayed on the website: As you can see in the screenshot below, the logo was successfully uploaded to the homepage of the website. You can always remove or change the logo by clicking one of the two options listed below the logo section of customizing site identity. Whenever you are working on the customization of your website, you can save your progress by clicking ‘Save & Publish towards the top left corner of the screen. Finished Logo
  10. Customizing your “Site Icon”: The last portion of customizing your site identity is selecting a “Site Icon”. A site icon is a small image that is associated with your website. It is used as an application and a browser icon. It can be seen on your browser tab and it makes your website look more official. Uploading it is similar to uploading a logo. Click ‘Select Image below the “Site Icon” section. Selecting a Site Icon
  11. Requirements of a site icon image: You are then going to go through the same process of adding media that you did when uploading your logo. Your Image must be square and at least 512 pixels tall and wide to meet the criteria. Your Icon image can be the same as your logo, just make sure that you crop it to a perfect square. Once you have uploaded the Icon to your website you will see the image under the “Site Icon” section. Listed below will be the options of removing or changing the image. Icon Complete
  12. Viewing your site icon: As you can see below, the icon is now visible on my browser tab. You have now completed the Site Identity customization of your website. Icon on Browser Tab
  13. Adjusting colors: Next, I am going to show you how to modify your colors. Click ‘Colors on the side menu to the left. Customizing - Colors
  14. Color options: You will then be given the options of changing the “Site Title Color” and the “Background Color”. The background color is basically the base color of your webpage. Click ‘Select Color below “Site Title Color”. Customizing - Colors 2
  15. Selecting site title color: An array of different colors are available to choose from. Select which general color you would like below. If you would like to adjust the shade of the color, experiment by moving the circle and adjusting the bar until you get the desired look. You can always go back to the original color that you had by clicking ‘Default‘. Customizing Site Title Color
  16. Selecting a background color: Same process goes for the background. As you can see below, the “Current Color” has been adjusted and can be seen displayed on the site. If you like the changes you have made and would like to finalize your adjustments, click ‘Save & Publish above. (I am going to restore the colors of WebsiteExample.org back to the default for the remainder of the guide.) Customizing Background Color
  17. Selecting a header image: Now that you have the colors you like, it’s time to choose a header image. A header image is the primary image displayed on your homepage. Most themes come with a default header image that can be replaced or removed.  To begin, click ‘Header Image on the menu to the left. Customization - Header Image
  18. Adding your new header image: As you can see below, my header image is a photo of a bee on a flower. Considering this has nothing to do with the central theme of my website, I am going to change this image. If you do not want to have an image displayed, simply click ‘Hide Image‘ and the header image will be removed. To upload your own image from your computer, click ‘Add New Image‘. You are then going to upload your image by going through the “Add Media” process that was discussed earlier in this guide. (The suggested size of your header is 960 × 350 pixels.) Customization - Header Image 2
  19. Viewing your new header image: Once you have uploaded and selected your image, you will be able to preview it. If you like the look of the image on the webpage, click ‘Save & Publish to apply your changes. There is another option available when it comes to image headers which is “Randomize uploaded headers”. This option can be utilized if you have multiple pages and multiple headers. It makes it so that each page on your website will display a random header from your catalog. New Header Image
  20. Selecting a background image: Instead of having a flat color as the background, you can select an image. If this interests you, start by clicking ‘Background Image on the side menu to the left. Customizing - Background Image
  21. Uploading your background image: Click ‘Select Image to upload the desired image from your computer. Customizing - Background Image 2
  22. Viewing your background image: Once you have uploaded your background image, you will be able to preview and adjust the image to your specifications. Under “Present” you are provided with the following options:
  • Default
  • Fill Screen
  • Fit to Screen
  • Repeat
  • Custom

I suggest experimenting with each option to see which one looks best. You can Adjust the “Image Position” by clicking the different arrows. If you chose custom under “Present”, you will be given the option to select the image size (Original, Fit to Screen, Fill Screen). Also, you can check or uncheck the boxes for “Repeat Background Image” and “Scroll with Page”. If you decide you do not want a background image displayed, simply click ‘Remove to discard the image. To upload a different image click ‘Change Image‘. To apply the changes you have made, click ‘Save & Publish towards the top of the screen.

Custom Background

That pretty much wraps up the basics of the customization process. The following is where things get a little more advanced, but first we are going to go over some of the key factors that will need to be defined and explained.

Comments are closed.

uparrow