![\"\"](\"https:\/\/xmission.com\/blog\/wp-content\/uploads\/2017\/08\/best-wordpress-plugins-2014.jpg\")
Many websites developed ten or more years ago worked great at the time but have slowly fell out of style and usefulness as the internet has grown and evolved. These sites lack support for mobile screens, miss expected modern features, and often show stale design that conveys a sense of an abandoned endeavor like a derelict property with boarded up windows and overgrown weeds.<\/p>\n
Fortunately, with just a little bit of time and effort, one can easily retrofit an old site to a modern user experience that tells visitors the lights are on, people are home, and the domain is open for business!<\/p>\n
The first step in this process is to add WordPress on your hosted domain. \u00a0XMission’s Plesk control panel makes this a snap with a one-click installation:<\/p>\n
![\"\"](\"https:\/\/xmission.com\/blog\/wp-content\/uploads\/2017\/08\/01-install.png\")
<\/p>\n
Click the\u00a0Install<\/strong> button and sit back while the files, folders, and database are set up. \u00a0It only takes a few moments until the control panel shows a WordPress login option:<\/p>\n Click Login\u00a0<\/strong>to access the WordPress back-end with the admin account Plesk created for you.<\/p>\n For the sake of this article, we are going to convert\u00a0http:\/\/fundgroup.com\/ from a static HTML site to WordPress. \u00a0Fundgroup.com is a nice site that fits in an 640×480 browser window. Since 2012, 1366×768 is the most common screen resolution, giving us a lot more room for nice images, bigger text, and a better user experience.<\/p>\n WordPress will automatically install and activate the latest WordPress theme upon installation. For this exercise, I choose to use the Twenty Sixteen theme instead. \u00a0To select a theme, click Appearance\u00a0<\/strong>then\u00a0Themes\u00a0<\/strong>from the back-end dashboard menu:<\/p>\n You can also browse the plethora of other available free themes from this page or at\u00a0https:\/\/wordpress.org\/themes\/<\/a>. \u00a0Top-notch professional themes are available on\u00a0https:\/\/market.envato.com\/<\/a>.<\/p>\n After installing and activating the desired theme, click Customize<\/strong>. \u00a0A preview of the website is shown with a left-column menu of options. \u00a0Let’s get right in it and customize the Site Identity<\/strong>:<\/p>\n I copied the logo from the existing site simply by dragging it from the browser onto the desktop, or you can right-click and select Save image as…<\/strong><\/p>\n Site Title and Tagline are entered, but in this case I chose to uncheck\u00a0Display Site Title and Tagline\u00a0<\/em>as the logo already contains this text. Now we’re ready to set the website pages and content. \u00a0This is done through the\u00a0Pages<\/strong> menu option. \u00a0By default, a Sample Page is already set up:<\/p>\n Click Edit\u00a0<\/strong>under the page name to revise a page, or the\u00a0Add New<\/strong>\u00a0button to create a new page. \u00a0I created the six pages from original site and cut and pasted the text. \u00a0Let’s add some visual interest to the homepage with an image. \u00a0The accompanying text mentions Robin Hood, so I jumped over to Flickr and searched Commercial use & mods allowed\u00a0<\/em>images and found a nice picture of a Robin Hood statue.<\/p>\n Click Insert into Page<\/strong> when done to do just that. Most WordPress themes have a sidebar menu, which I did not want for this project. To edit the sidebar, go to Appearance<\/strong> > Widgets<\/strong> and modify as desired. \u00a0To remove the sidebar, simply delete all the widgets in the Sidebar Widget Area<\/em> on this page.<\/p>\n <\/p>\n The last thing our WordPress website needs is a menu to allow visitors to navigate between pages. \u00a0Creating a custom menu allows you to have full control over the text and order of the links, which is done under Appearance<\/strong> > Menus<\/strong>. \u00a0I clicked the checkbox next to each page I wanted to include in the menu (all of them), clicked\u00a0Add to Menu<\/strong>, and then dragged Menu Structure items to the desired order. \u00a0The last important setting is\u00a0Display location<\/em> which is Primary Menu:<\/p>\n We now have a new, modern, responsive website! \u00a0Setting up a WordPress site may be daunting at first, but with a step-by-step guide like this you can do it yourself with a little time and only minimal computer skills.<\/p>\n Many websites developed ten or more years ago worked great at the time but have slowly fell out of style and usefulness as the internet has grown and evolved. These sites lack support for mobile screens, miss expected modern features, and often show stale design that conveys a sense of an abandoned endeavor like a […]<\/p>\n","protected":false},"author":22,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[268,180,240],"tags":[106,605,604,603],"class_list":["post-4953","post","type-post","status-publish","format-standard","hentry","category-domains","category-hosting","category-wordpress","tag-html","tag-modern","tag-responsive","tag-upgrade"],"_links":{"self":[{"href":"https:\/\/xmission.com\/blog\/wp-json\/wp\/v2\/posts\/4953","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xmission.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xmission.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xmission.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/xmission.com\/blog\/wp-json\/wp\/v2\/comments?post=4953"}],"version-history":[{"count":18,"href":"https:\/\/xmission.com\/blog\/wp-json\/wp\/v2\/posts\/4953\/revisions"}],"predecessor-version":[{"id":4992,"href":"https:\/\/xmission.com\/blog\/wp-json\/wp\/v2\/posts\/4953\/revisions\/4992"}],"wp:attachment":[{"href":"https:\/\/xmission.com\/blog\/wp-json\/wp\/v2\/media?parent=4953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xmission.com\/blog\/wp-json\/wp\/v2\/categories?post=4953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xmission.com\/blog\/wp-json\/wp\/v2\/tags?post=4953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/xmission.com\/blog\/wp-content\/uploads\/2017\/08\/02-login.png\")
<\/p>\n
\nConfiguration<\/strong><\/h3>\n![\"\"](\"https:\/\/xmission.com\/blog\/wp-content\/uploads\/2017\/08\/Screenshot_4.png\")
<\/a><\/p>\n<\/p>\n<\/p>\n
This theme allows you to set a background color. \u00a0I want to use the green from the logo, so I need to figure out the HTML color code for it. \u00a0This is a snap with a tool like Get Colors from Image<\/a>\u00a0– upload the logo image, then point at the green to see the code:<\/p>\n<\/p>\n
\nAdding Content<\/strong><\/h3>\n<\/p>\n<\/p>\nAfter downloading the image to my computer, I added it to the new homepage by clicking\u00a0Add Media<\/strong> and configured it to align to the left of the text under the Attachment Display Settings.<\/p>\n
\nNow that the pages are set up, we need to tell WordPress what we want to display as the homepage. \u00a0This is done under Settings <\/strong>> Reading –<\/strong>or-\u00a0<\/em>Apperance <\/strong>> Customize <\/strong>> Static Front Page\u00a0<\/strong>(either method works fine). \u00a0Select the desired Front Page from the dropdown of existing pages then Save<\/strong>.<\/p>\nMenu<\/strong><\/h3>\n
<\/p>\nFinished Product<\/strong><\/h3>\n
<\/a>View full site at https:\/\/fundgroup.cogfish.com\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"