How to make updates to a WordPress site


imageStudents can host a basic WordPress site on Azure for free! So in this post we’ll share some common customizations you can make to WordPress so you can create an online resume or other website using WordPress on Azure!

In this post we will show you how to make the following changes to a WordPress website. This post is part of a series that provides you with all the information you need to create an online resume and student jobs at Microsoft. If you missed the rest of the series you can check it out here

  • Accessing your site dashboard
  • Changing the site theme
  • Changing the favicon
  • Changing the site title and tagline
  • Changing the site colour scheme
  • Adding a header image or background image
  • Adding your social profiles
  • Adding extra pages
  • Adding and removing widgets
  • Hacking the HTML/CSS/PHP
  • Adding plugins
  • Useful plugins

Accessing your site dashboard

When you visit the URL for your wordpress website, you can go bring up the dashboard to log in and start editing your WordPress site by adding /wp-admin to the end of your site URL. For example if your website is called http://wordpresssitesusan.azurewebsites.net then I would specify http://wordpresssitesusan.azurewebsites.net/wp-admin.

When you specify the /wp-admin you will be prompted for your WordPress username and password

After you specify your credentials, you will be brought to the dashboard where you can start to edit your site.

You can toggle between the dashboard and the site to preview your changes using the top menu

image image

Changing the site theme

Your theme determines the basic look and feel of your WordPress website. Obviously appearance is important when choosing a theme, but there are other factors to consider as well. For example, is the theme responsive? What is a responsive website? It’s a website that looks good on different screen sizes. Websites may be viewed on a laptop, tablet, or phone. You want to be sure any user on any screen has a great experience visiting your site. Some themes also have extra features you can leverage such as social media menus to include links to your social media accounts.

Select Appearance | Themes

image

You can pick one of the preinstalled themes or select Add New to search through 100s of free themes. Once you choose a theme, select Activate to make that the active theme for your site.

For this blog post we are using the theme Twenty Fifteen which is responsive and has a lot of built-in functionality.

You can also get themes off the internet and upload the zip folder to load it onto your site. You may have to pay for some of these themes, but sometimes the investment is worth it if it saves you a lot of time and looks professional. Theme Forest and Elegant Themes are third party providers of WordPress themes. Elegant Themes has a resume template.

Warning: Changing the theme will remove customizations you made to the previously applied theme, so take your time at the beginning to pick a good theme to avoid rework later

To learn more about themes visit http://codex.wordpress.org/Using_Themes

Changing the favicon

Have you ever noticed the tiny little icon that appears on the tabs when you view a website in your browser? That’s the favicon.

Customizing the favicon for your WordPress site is a nice detail that shows attention to detail and professionalism

image

Select Appearance |Customize | Side Identity | Site Icon

To learn more about favicons visit https://codex.wordpress.org/Creating_a_Favicon

Changing the site title and tagline

The site title and tagline are like a header and subheader for your website

Select Appearance | Customize | Side Identity | Site Title/Tagline

 

image

Changing the site colour scheme

You can customize the colors for your selected WordPress theme. You can choose from a preselected colour palette, or you can select the individual colours yourself using the color picker

Select Appearance | Customize | Colorsimage

For more information on customizing the Twenty Fifteen theme, visit https://codex.wordpress.org/Twenty_Fifteen

Adding a header image or background image

The header image and background image will replace part of your colored background with an image. You can upload multiple images and WordPress can randomly load different images from your uploaded collection.

Even if you carefully try to select and crop an image so it looks perfect on your screen, when viewed on different sized screens it will be cropped differently. So make sure you pick an image that will look good no matter which part of the image is displayed.

Select Appearance | Customize | Background Image/Header Image

 

aimage

Adding your social profiles

One of the features of the Twenty Fifteen WordPress theme, is a social profile menu that will display icons for different social media landing pages.

To create your own social media menu complete the following steps:

  1. Select Appearance | Menu
  2. Select Create a new menu
  3. Give your menu a name
  4. Create a custom link for each of the social media channels you want to include (twitter, linked in, GitHub, etc…) WordPress will recognize the social media URL and insert the appropriate icon
  5. Select the Social Links Menu checkbox to indicate these are all links to social media.
  6. Select Save Menu to save your changes.

Select Appearance | Menus

 

image

image

To learn more about features in the Twenty Fifteen theme visit https://codex.wordpress.org/Twenty_Fifteen

Adding extra pages

You may want to have multiple pages on your website to present different information. For example for an online resume, you may want a page that lists projects you have completed.

To add a page

  1. Select Pages | Add New
  2. Give your page a title
  3. Add content to the page using the editor
  4. Select Publish to add the page to your website

 

imageYou can add hyperlinks on other pages to navigate to your new page (the URL is shown in the Permalink field of your page editor) or you can just add a Widget to allow a user to navigate to all your pages

To learn more about pages visit https://codex.wordpress.org/Pages 

Adding and Removing Widgets

Widgets allow you to add different elements to your website. For example you can add a widget that allows search, or a widget that provides the user a navigable list of your site’s pages.

Select Appearances | Widgets | Widget Area | Add a Widget

The widgets listed in the widget Area are the ones you see on your page. You can remove unwanted widgets and you can add news ones by dragging and dropping them to and from the Widget Area. Widgets listed in the Widget Area will be displayed on your website.

image

Can’t find the widget you want? Go to dashboard | Plugins | Add New and then search for plug ins that may provide what you need as a widget.

To learn more about widgets, visit https://codex.wordpress.org/WordPress_Widgets

Hacking the HTML/CSS/PHP

If you are familiar with HTML and CSS, you can access the HTML and CSS used for your theme. This allows you to change how your site lays out content.

Warning: It is strongly suggested that you back up your files before editing. Making the wrong edit can break your site

To edit your theme and WordPress files, go to Appearance | Editor. Edit the ‘Stylesheet’ (style.css) to change the appearance of your site beyond what you can modify through the different options under cutsomize. can with ‘Customize’. You can also edit other files such as ‘Header’, ‘Footer’ or ‘Sidebar’ to change the appearance of your header, footer, or sidebar.

image

If you want to change the HTML and CSS for a plugin, go to Plugins | Editor. Pick the plugin you want to edit from the picker on the top right.

Editing these pages is essentially creating your own version of the Theme. You should read through the information about the structure of themes to better understand the files used to create a theme and how they affect the appearance of a website. To learn more about themes visit https://codex.wordpress.org/Theme_Development 

Adding plugins

At some point, as you get further into updating your website, you are likely to want to do something (for example add a table to a page to display information) and you wont’ be able to figure out how to do it with the editor

There are lots and lots of plugins you can add to a page to provide additional functionality. We have listed a few useful plugins for an online resume more.

To add a new plug

  1. Select Plugins | Add New
  2. Use keywords to search for the functionality you need. For example, if you want to display Instagram images, search for Instagram.
  3. Select the one that best suits your needs and select ‘Install Now’.

image

Once installed, many plugins will have additional settings that can be configured. Usually their configuration options can be found in the ‘Installed Plugins’ section of ‘Plugins’, or on the admin menu.

To learn more about plugins, visit https://codex.wordpress.org/Plugins

Useful Plugins

Here are a few WordPress plugins you may find useful if you are creating an online resume

WP Post to PDF Enhanced

WP Post to PDF Enhanced turns any of your pages or posts into a downloadable PDF. There are a large assortment of configuration and formatting options to style the PDF without having to edit your content.

To learn more, visit https://wordpress.org/plugins/wp-post-to-pdf-enhanced/

WP Code Prettify

By default, WordPress treats all text as prose, so f you try to display code on the page it likely won’t appear the way you want it. Using WP Code Prettify, you can style any of your code  with color coding and indentation so it is easier to read.

To learn more, visit https://wordpress.org/plugins/wp-code-prettify/

WordPress SEO by Yoast

When a recruiter or manager searches for your name on a search engine, you want them to find your tailored online resume so they see you portrayed professionally. WordPress SEO by Yoast is a plugin that will help you with SEO or ‘Search Engine Optimization’. The plugin helps your posts adhere to content guidelines set forth by search engines.

To learn more, visit https://wordpress.org/plugins/wordpress-seo/

WP Super Cache

By default, everyone who visits your page causes WordPress to generate web pages on the server from PHP. This consumes processor time and slows down your site. WP Super Cache serves static HTML copies of your web pages, which are less costly than generating from PHP. This will result in improved performance of your site

To learn more, visit https://wordpress.org/plugins/wp-super-cache/

TablePress

By default, WordPress’s WYSIWYG editor doesn’t support tables. Using TablePress, you can easily add some nifty looking tables.

To learn more, visit https://wordpress.org/plugins/tablepress/

Comments (0)

Skip to main content