Install and Customize Storefront Theme
As we will note many times throughout these pages, there are multiple themes you could choose for your website. However, we have had good success with Storefront and, to streamline our instructions, that is the theme we will use. The remainder of our instructions for setting up your online farm stand will be based on functionality provided by that theme.
WordPress.org, a site for the WordPress community where you can find additional details and instructions related to WordPress, may be useful as you set up and use your WordPress site. The following information from that site provides a good explanation for what a theme is and what it does:
“A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files. A Theme modifies the way the site is displayed, without modifying the underlying software.” You can read more here: What Is a Theme?
Here are instructions for installing the Storefront theme:
INSTALLATION:
- Go to your WordPress admin panel and click on Dashboard in the left-hand navigation panel.
- Click on change your theme completely under the Customize Your Site button.
- This will take you to the Themes page, where you should click the Add New button.
- When the Add Themes page is displayed, type “Storefront” in the Search themes field. Find Storefront listed at or near the top of the search results.
- Click the Install button that will appear when you mouse over the Storefront image.
- Click the Activate link on the next page.
CUSTOMIZING YOUR SITE
- After Storefront is installed, a new page will be displayed showing Storefront as Active. Click the Customize button on the Storefront image.
- A preview of your website will be displayed in the right pane of the next page displayed, and a menu of customization options will be displayed on the left.
SITE IDENTITY
- Click on Site Identity to enter or change the Site Title and Tagline. You may already have entered these in a previous step, so there may be no need for changes here.
- The options under Site Identity also allow you to add a logo, which will be displayed in the header and a site icon that is displayed on the tab in the browser when your site is open. You can use a small square version of your logo for the site icon. We did not include the logo in the header of our demo site.http://market.fischer-clarkson.com/. Instead the demo site displays the title and tagline–and we used the logo in the sidebar below. However, you may choose to do it differently. Experiment until you find a look you like.
- When you are finished customizing Site Identity, click the Save and Publish button, then click the < button near the top left of the screen to return to the customization menu.
HEADER
- Click on Header to change the color of header background or upload a header image. You can also change the color of your menu links here. If you are not using a logo in the header, you can change the font color for the title and tagline as well.
- If you want to use a header image, you will need to have an image ready to upload. It should be 1950 x 500 pixels. It should also provide a good background (fairly uniformly dark or light) to contrast with the font color you use for your menu links. You can also use a solid color for the background. The default is black, but white provides a clean look that might suit you.
- To add a header image, click the Add new image button under “Header Background Image” and follow the instructions on the screen. To change the header background color, click the Select color button under “Background Color” and select the color you prefer. Use the same steps to change text and link colors, if desired. The text color determines the color of your tagline. The link color determines the color of your header title and the menu links. Click the Save and publish button when you are done.
OPTIONAL CUSTOMIZATIONS
- The next four items allow you to change colors for various other elements of your site. Except for the Background and Link/accent color under Typography, we did not make any changes to the default selections on these items for our demo site, but you can make whatever changes you would like. You can use the Default button to return to the original colors, if you don’t like your changes.
- Change your layout. The default layout is with the sidebar on the right. If you would prefer to have it on the left, you can switch your layout by clicking Layout.
- Skip Menus for now. We will come back to them after we are finished setting up the site structure.
CUSTOMIZING YOUR SIDEBAR
- If you didn’t include your logo in the header, you may want to include it at the top of your sidebar. First, copy the link to your logo image, which you uploaded earlier. (If you haven’t already uploaded your logo, follow the instructions in Step #14.)
- You can get the link to your logo by going to your admin panel and clicking on Media in the left-hand navigator. Click on the logo image you uploaded earlier, and copy the text in the URL field (and maybe paste it into Notepad so you have it handy). Click the X in the top right corner of the screen to close this window. Click Dashboard in the left-hand navigation panel and click the Customize Your Site button. Then scroll down the customization panel until you find Widgets and click to open.
- Click on Widgets and then on Sidebar to customize your sidebar. First delete all default widgets by clicking on each downward arrow and clicking the Remove link. After all current widgets have been removed, you can add new widgets.
- If you want to display your logo at the top of the sidebar, click the Add a Widget button. Scroll down the list of available widgets until you find the Text widget. Leave the Title field blank and enter the following in the Content field: <a href=”http://yoursite.com”><img src=”http://linktoyourlogo.com”></a You should replace http://yoursite.com with the URL for your website, and replace http://linktoyourlogo.com with the link to your logo that you copied.
- You may also want to add links on your sidebar to register, log in, and log out of your site. This can also be done using the My Account link on the main menu, but the sidebar links might make it easier for customers to see their options. If you want to add these links to your sidebar, follow instructions in the steps below, replacing yoursite.com with the URL for your website.
- To create a link to log in or create a new account, add another text widget, and enter this text:<a href=”http://yoursite.com/my-account/”>LOG IN or CREATE NEW ACCOUNT</a>
- To create a link to log out, add a text widget and enter this text: <a href=”http://yoursite.com/wp-login.php?action=logout&_wpnonce=45c56fbf84″>LOG OUT</a>
- You can also use text widgets and the instructions above to add other links, sucha as a link to your main website, facebook page, or other web page. If you want to add another image to the sidebar, you can adapt steps #19 and 21 to upload a new image. If you want to add an image without a link, use the following text instead of the text provided in step #21: <img src=”http://linktoyourimage”> Use the URL in Media after you upload the image you want to use.
Whew! That’s it for now! We will make a few additional customizations as we add functionality to your ecommerce website, so you will be back later. One quick tip . . . if you are on your website and logged in as an administrator, you can get to the customization screen quickly by clicking the Customize link on the admin bar at the top of the page.