Home / Tutorials

Setting Up a WordPress Web Site

WordPress is open source content management system (CMS) software that runs on a web server and is used to create web sites. WordPress software powers around 44% of the world's websites (W3Techs 2024).

These instructions will guide you through the process of setting up a GIS portfolio on a Personal WordPress web site on WordPress.com.

WordPress.com

The WordPress software was originally developed and released in 2003 by Matt Mullenweg and Mike Little. WordPress is free, open source software that you can download from wordpress.org for installation on your own web server.

Mullenweg subsequently formed WordPress.com as a commercial hosting service for WordPress websites, and this site provides a free Personal plan that can be used for simple websites. There are also a multitude of other commercial hosting companies that will sell you hosting plans based around WordPress software.

As in life, there is no free lunch and if you use the WordPress free service there are limitations to what you can do:

• The URL for your website will be something.wordpress.com. You get to choose the something, but the WordPress.com domain name gets stuck on the end and the best somethings are taken
• Part of the way that WordPress.com pays for the costs of hosting and for its employees is that it embeds web ads. This is something that you need to consider if you're going to be using WordPress.com for a client.
• WordPress.com free accounts are limited the number of different themes and the level of customization that is available to you. If you want to make significant stylistic changes, you will need to pay for hosting.

WordPress.com does offer premium features you can pay for, such as your own domain name, removal of the web ads, or limited customization of themes. The cost of these premium features is competitive with other hosting services, with the advantage that WordPress.com's systems administrators handle keeping the software updated and functioning smoothly. If you are dealing with a client that only has limited personnel for maintaining their website, you should consider hosting with WordPress.com.

Create Your WordPress.com Site

Subdomain

A domain name is a human-readable name used to identify resources on the internet like web sites. Examples of domain names include WordPress.com, Illinois.edu, GreenPeace.org.

A subdomain name is a name attached to the start of a domain name (along with a period) to identify a set of resources within the domain identified by a domain name. Examples of subdomain names include the "ggis" in https://ggis.illinois.edu or the "maps" in https://maps.google.com.

WordPress.com uses subdomain names to differentiate websites hosted on WordPress.com. In this tutorial, "janedoegis" is the subdomain, which results in a website URL of https://janedoegis.wordpress.com.

Subdomains have to be unique to identify particular WordPress.com websites. After someone has used a subdomain, even if they close their account, that name can no longer be used by anyone else on WordPress.com.

Choose your subdomain carefully. Some variant on your name would probably be best, although you may need to add additional text if your first choice is already taken (e.g. johnsmithgispro rather than johnsmith). Since this is intended to be part of your professional web presence, choose a name that you will be comfortable sharing with potential employers or clients.

Register

1. Go to WordPress.com and click Get Started.
2. Enter an e-mail address, user name, and password. To make your credentials easier to remember, your user name should probably be your subdomain, although that is not required.
3. For security, you should use a different password from any that you use in other accounts. There is a facility to reset the password if you forget it.
4. Press Create Your Account.
5. For Choose a Domain, enter the subdomain you selected above.
6. Select the free option for subdomain.wordpress.com. You will probably not want to get a full domain (e.g. janedoegis.com) unless you are absolutely certain that you will want to keep some kind of active website in the future.
7. For Choose a Plan, select the start with a free site option. You can always upgrade later if your needs outgrow the free plan.

Site Setup

When your site is set up, you will be placed in the WordPress Dashboard for your new site. This is the administrative panel where you make additions and changes to your website.

The dashboard will give you a brief list of setup tasks on the right side. Since we will be customizing this site later, we will only do the essential tasks from this list.

1. Give your site a name: You should choose a name which will appear throughout your website. For this personal portfolio website we use the placeholder name Jane Doe.
2. You should also choose a tag line that will appear under the site name. For a portfolio site like this, the tag line should reflect your professional identity. This can be a single job title or area of expertise, or a list of professional capabilities (e.g. "data analyst, cartographer, historian"). For this example we use "GIS Professional"
3. Confirm your email address: This will confirm your identity. Check your e-mail and click on the link in the e-mail to confirm. You will then need to log in again.
4. Launch your site.

Themes

Themes are collections of styles that can be applied to a WordPress web site. Styling includes colors, basic page layout, fonts, sizes, etc. One advantage of WordPress is that themes allow you to change the styling of your website without having to manually change each page by hand when you want to change the look of your site.

The choice of what theme to use depends on what your site is being used for (function) as well as the aesthetic of the organization that it will represent (form).

Themes can introduce great complexity to your layout, so you should choose a theme that highlights your content rather than overwhelming or obscuring it. For this example we will use the Independent Publisher 2 theme, which is a simple, minimalist theme that keeps the focus on the graphics rather than the layout.

1. In the dashboard, click Appearance and Themes.
2. Review the list of available themes. You will likely want to stick with one of the free themes unless you specifically have a need for features or styling in a "premium" theme.
3. Select a theme of interest to you and Open live demo to verify that you like the design and feel it is appropriate.
4. When you have found an appropriate theme, select Activate this design.
5. If you have content, keep it, of course. Otherwise, use the boilerplate content that comes with the theme.
6. View your site to make sure the theme is what you expect.
7. You can change themes at any time.

Disable Comments

WordPress was originally designed to support blogging. The term blog is short for weB LOG and emerged around 1999. A blog is a website that contains a personal online journal as well as reflections and often reader comments and links to sites that the blog author finds interesting.

For the purposes of this example portfolio website, comments are not appropriate, so they should be turned off.

1. Go to Settings and Discussion.
2. Turn off everything, especially Allow people to post comments on new articles.

Adding Content

Adding a Blank Page

The content in this tutorial is added to blank pages.

1. Go to the Pages page in the dashboard.
2. Click Add new page.
3. Select Blank page unless you specifically want one of the complex pre-defined layouts.
4. Give the new page a title.

Image Blocks

Pages consist of blocks of content, which can be chunks of text, simple single images, or complex tabular layouts.

Simple image blocks can be created by uploading an image from your local machine.

If posting camera images, leave them full size rather than reducing them in size to save space. When you upload a large image to WordPress, the software handles creation of smaller images that will be more suitable to mobile devices.

If the image does not contain content that clearly indicates what it is, you should add a caption describing the image, preferably with a date. Even if the image is self-documenting, you may want to consider adding a caption anyway so that search engines will know what the image shows and can direct people interested in this type of image to your web page.

1. Click the plus sign (+) to add a block.
2. Click the image icon.
3. Click Upload to add a new image.
4. Add a caption.
5. When you are done, Preview the page to verify that it appears as you expected.
6. Publish or Update the page so the content is visible to website visitors.
7. Click the WordPress logo at the top left of the screen to return to the dashboard.

Map Images

Images of maps can be inserted as image blocks on pages.

The layout Export facility of the desktop GIS software ArcGIS Pro provides multiple options for map image files. There are three types of image files supported by almost all web browsers:

• JPEG (joint photographic experts group) files are a "lossy" format that trades off smaller size for a reduction in quality. JPEG files are best for photographs where continuous tones predominate and the quality loss will be largely unnoticeable. JPEG files are commonly used for storing photos taken with smartphones.
• PNG (portable network graphics) files are a "lossless" format that involves no reduction of quality when you create it, although the files can be large. PNG files are best for images that contain sharp edges and / or small text.
• GIF (graphics interface format) files are a "lossy" file format used for simple animated images. These involve a significant loss in color resolution, so they should only be used for animation.

The video below shows how to export a simple map layout from ArcGIS Pro.

1. After you create your map layout, go to Share and Export Layout.
2. For File Type, choose JPEG.
3. Select an output file Name. Use a meaningful name that clearly but succinctly specifies what the map contains. Including a year of creation or content can also be helpful for organizing your files as you update the website in the future.
4. Adjust the Resolution so the longest side is around 1200 pixels.
5. Click Export.
6. From the WordPress dashboard, select Pages and Add new page, if a new page is needed.
7. In the page editor, click the plus sign (+) to add a block and select the image icon.
8. Upload the exported map image.
9. Give the image a caption so that search engines can find it.
10. Save Draft.
11. Preview the page to make sure everything appears as expected.
12. Publish or Update the page so the content is visible to website visitors.

Image Blocks with PDF Links

If you are posting maps that are highly detailed, or large PDF documents of any kind that are designed for printing, you will want to show a preview image of the map on the website, but modify the image link so you can download a PDF for printing.

1. Share and Export Layout a JPEG of the map layout from ArcGIS Pro as described above.
2. Export Layout a PDF of the map from ArcGIS Pro. Use the same name as the JPEG file, but use the .pdf suffix so it is clear when looking at your media files that these two files are related.

From the Dashboard go into Media and upload both files.

1. Edit the PDF document and copy the link to the PDF file.
2. From Pages, edit the page and add an Image block with the preview image.
3. Click the Insert Link icon and copy the link to the PDF file from the media library.
4. Add a Caption.
5. Update and Preview the page to make sure everything appears as expected.

Web App Link Pages

Web apps can be promoted on a website by previewing and linking using the same technique shown above for large PDF files.

Most content management systems support the addition of iframes to pages that embed one website in another. However, WordPress.com prohibits iframes for security reasons. Iframes are also usually only appropriate for simple content that scales to a small size without degrading the layout. Mapping web apps usually look better on their own, unless they are specifically designed for embedding.

1. View the web app in a full-sized window and take a screenshot of the web app.
   • On Windows machines, you can take a screenshot by pressing the Print Screen button on your keyboard. This is commonly abbreviated PrtSC. This will copy the contents of your screen onto the system clipboard.
   • On Macintosh machines, you can take a screenshot by pressing the shift, command, and 3 keys simultaneously.
2. Edit the screenshot to crop out everything except the core content.
• On Windows machines you can edit a screenshot by opening Paint and pasting the screenshot (ctrl-V).
• On Macintosh machines you can double-click the screenshot image saved to your desktop.
3. Reduce the size of the image so the width is 700px, which will be large enough to show detail, but small enough to load into the browser quickly. Make sure to preserve the aspect ratio so the image is not flattened or stretched.
4. Save the image as a JPEG preview image file.
5. Add the image as a block to the WordPress page.
6. Copy the URL for the web app.
7. Insert Link with the URL on the preview image.
8. Update and Preview the page to make sure everything appears as expected.

Embedded PDF File Blocks

If you have small or medium-sized PDF documents (1mb or less), you can embed them directly in pages so they appear on the page in a PDF reader.

If your PDF files are large, you should use the preview image and link technique given in the Map PDF section above. Embedding large PDF files can slow the performance of your website, which will dissuade visitors from staying and looking around.

For this example, we will post an embedded PDF of a resume on its own page.

1. Prepare a resume with appropriate formatting privacy protection:
• Documents like this should be PDF files rather than Word documents so you can be assured that the viewer sees the document formatting as you indended it.
• Resumes posted online should be stripped of non-essential personal information like home addresses and personal cell phone numbers.
• Because e-mail addresses can be harvested by spammers, you should probably use an institutional e-mail address (like a school e-mail address) or an "alias" address rather than a e-mail address that you use for personal communications.
• Birthdates or social security numbers should never be anywhere on a public website.
2. From the dashboard, to to Media.
3. Go to Documents and click Add new.
4. Select the file from your local computer.
5. Once the PDF file has uploaded, go to Pages and select the page where yo want to embed the PDF.
6. In the editor, select the + Block Inserter and search for the File block.
7. On the File block, select the Media Library link.
8. Choose the PDF file and click Insert.
9. Publish or Update the page so the content is visible to website visitors.

Contact Page

WordPress.com provides the ability to add a contact form that users can use to contact you. Contact forms are often preferred to directly posting e-mail addresses or phone numbers in order to protect you from spammers and scammers.

1. From the Dashboard, select Pages and Add new page.
2. Find the Contact form with address layout.
3. As with the resume above, you should generally avoid placing direct personal contact information on a website like.
• Posting an e-mail address or phone number can subject you to additional unsolicited e-mail (spam).
• Posting physical home addresses can result in threats to your physical security, although although organizational contact information is expected for a business.
4. Update the social media links or remove them so they are not "dead links" that clutter the page and indicate carelessness.
5. Save Draft.
6. When you Preview the page, you should see the page displayed in a PDF reader.
7. Try contacting yourself to verify the form works.
8. Publish or Update the page so the content is visible to website visitors.

Finalize the Overall Design

Mobile Compatibility

In 2020, mobile devices accounted for 61% of visits to US websites, vs. 36% from desktop computers (Perficient 2021). Therefore, it is important that you always view your website on a mobile device (and preferably multiple kinds of devices) to make sure it looks acceptable to as many different types of viewers as possible.

Delete Unneeded Pages

Remove any unneeded pages. For this example, we remove the boilerplate home page that was created when we created the web site.

Set the Home Page

When visitors to your site go to the main URL for your site, they land on the home page.

For a personal website, home pages commonly provide some biographical information and / or provide thumnail images that link to the main pages on the site.

For a portfolio website, a biographical home page may be unnecessary and you might just consider

You can change the home page under Appearance, Customize and Homepage Settings.

Add a Menu

Websites have menus to facilitate navigation among the different site pages.

Some templates automatically add a menu that cannot be modified, but if yours has an option to turn it on or off:

1. From the dashboard, go to Appearance, Menus, and Primary.
2. Remove any unneeded items.
3. Add Items for all pages you want in your menu.
4. Save Changes.
5. Preview the page to make sure everything appears as expected.

The Website Life Cycle

A life cycle is "a series of stages through which something (such as an individual, culture, or manufactured product) passes during its lifetime" (Merriam-Webster 2022). All websites have a life cycle:

• Initial setup and beta testing
• Deployment
• Content and software maintenance
• Migration and/or decommissioning

Note that WordPress is not something that you can just install once and forget about. All software has bugs and security vulnerabilities, and there are frequent new releases of WordPress that fix these bugs. If you install WordPress on your own server, you need to periodically update the software - which can be done with one click in the WordPress dashboard. However, this is something that many non-technical administrators may not remember to do or be aware that they need to do on a regular basis. This is an advantage of using managed WordPress hosting or WordPress.com, where systems administrators are responsible for software upgrades.

The last phase is also one that many folks running small websites do not consider. You should not leave a dormant website hanging around on the web, especially if it contains personal information or is a demo site for your client that may get stuck in the search engines. Many hosting providers have auto-renew and will happily continue to take your money to host a forgotten site until you actively cancel your account. Free WordPress.com websites will continue to linger indefinitely unless actively decommissioned.

If you are decommissioning your WordPress.com website, you may wish to make the site private rather than deleting it permanently so that you can recover the contents or subdomain if you need them in the future. If you delete a WordPress.com website, you not only lose the content but also lose the subdomain since WordPress.com does not allow deleted subdomains to be reused.

You can set a website to private from the dashboard under Settings and Privacy.