How to make updates to a WordPress site
Students 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 https://wordpresssitesusan.azurewebsites.net then I would specify https://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
 |
 |
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
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 https://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
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
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 | Colors
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
a
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:
- Select Appearance | Menu
- Select Create a new menu
- Give your menu a name
- 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
- Select the Social Links Menu checkbox to indicate these are all links to social media.
- Select Save Menu to save your changes.
Select Appearance | Menus
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
- Select Pages | Add New
- Give your page a title
- Add content to the page using the editor
- Select Publish to add the page to your website
You 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.
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.
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
- Select Plugins | Add New
- Use keywords to search for the functionality you need. For example, if you want to display Instagram images, search for Instagram.
- Select the one that best suits your needs and select ‘Install Now’.
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/