How to Create a Website for Your Small Business, Part 3: Customization and Sharing

Back in Part 2 of this three-part tutorial series, we set up our website, planned out the structure of our site pages, and added in our main content. Now, it’s time to start customizing our site further by going through the following:

• Adding social media integrations and feeds
• Adding a blog with a few sample posts
• Scheduled posting
• Sharing posts to social channels
• A bit about SEO
• Adding a contact form on a Contact page
• Adding a simple Payments button

If you haven’t read the previous articles in this series, click on the following links and take a few moments to read those first: Part 1, Part 2.

Adding social media integrations and feeds

Now that my main content—my homepage with address and contact information, menu of products, and a make your own website page—is in place, I’d like to add feeds of my social media accounts on Twitter and Instagram to my site. These feeds allow me to build connections with my customers by engaging them with content that they may find useful, such as special offers or events, that will hopefully encourage them to keep an eye on my feed and to become a recurring customer.

Twitter is useful because my followers can quickly and easily see my tweets in their feeds, and they can even retweet my tweets to spread the word about a special promotion or event that I’m holding. Instagram is useful to share images of my product and the various fruits and vegetables that go into our juices. Images are a bit more appetizing and visually interesting than just plain text, so I can also share special offers and things like tips or inspirational messages on here as well.

To add these two feeds to my site, I’ll go back to the Customizer by clicking on the top left “My Sites” link, and then the “Customize” button under the “Personalize” section.

Here, I’ll click on “Widgets” and add the Twitter and Instagram widgets to display small feeds for these accounts by first clicking the “Add a Widget” button.

Side note: If you find that there are extra social media options here by default, you can simply remove them by clicking on the item to expand it, then clicking “Remove” on the bottom left of the expanded box.

Clicking “Add a widget” will slide out a list of all available widgets, which you can either scroll through or search through by entering text.

I’ll choose to do the latter, and I’ll first search for “Twitter”:

I see that there is a “Twitter Timeline” widget that sounds like it’s exactly what I’d like, so I’ll click on that. Next, I’ll customize the details of my Twitter widget to fit my needs.

First, I’ll name my widget title “Twitter”. Next, I’d like my widget to be on the smaller side, and scrollable, so I’ll set the height to 400px and adjust the layout so I get rid of the header, scrollbar, and background color. I’ll leave the link and border color and leave the theme as “Light”. You can see all of my settings below:

This is what the above looks like on my live site:

Next, I’ll click on the “Add a widget” button again to search for and add the Instagram widget:

Once I add the Instagram widget, I need to first click “Publish” up top in order for the widget to be activated prior to connecting to my Instagram account.

After publishing, I can now click on the “Authorize Instagram Access” button, log into my Instagram account, and then I’ll be redirected back to this view where I can customize my Instagram settings.

The default layout for the Instagram widget shows me the last 6 images in my feed across a two column layout. Here is a preview of what that looks like:

I’d prefer to have 9 images visible and make them 1 column wide, so they’re larger images, like this:

I’ll save these settings by clicking “Publish” up top again.

Next, I’ll ensure that the two social media menu items I left on my homepage are properly linked to those accounts. To do this, I’ll go out one level in the Customizer and click on “Menus” and then click on “Social Menu”. This menu corresponds to the small social media icons on the lower left corner of my homepage.

I’ll start by editing the Twitter social media item and ensuring that the URL links to my Twitter account URL, https://twitter.com/madefreshjuice.

Next, I’ll make sure the Instagram social media item links to my Instagram account URL, https://www.instagram.com/madefreshjuice.

Lastly, I’ll click “Publish” up top to save my changes, and my new sidebar social media feeds and social menu on the homepage are all ready to be clicked on.

Adding a blog with sample posts

I don’t have many sample blog posts to display on my site, but I’ll walk you through how I would create a page that can serve as my blog page—a feed of all my blog posts—and then I’ll show you how to post individual blog posts. Also, I’ll walk you through a few useful features you can use to automate the sharing process to all your linked social channels.

First, I’ll click on the “My Sites” link up top and then go down to “Site Pages”, and click the “Add” button. I’ll name this page “Blog” and ensure the slug matches that under the “More Options” section in the side menu on the right and is also “blog” (a slug is the part of the website address that follows after your domain name, like http://www.juicebardemo.com/blog).

Next, I’ll open the “Sharing” side menu options and uncheck “Show sharing buttons” and “Show like button”, since I don’t need these to appear on the parent level page that only shows the blog feed. To save my settings and publish this page, I’ll click the blue “Publish” button on the top right.

Next, I’ll click “Close” on the upper left to close this page and then go back to my Customizer by clicking on the “My Sites” link up top and then select the “Homepage Settings” item. Here, I can see the homepage is set to “Welcome”, but the “Posts” page is not yet set to anything yet. I’ll click the dropdown menu and select my new page I just created, “blog”.

I’ll now click “Publish” and start creating some sample blog posts by clicking the “x” in the top left corner to exit out of Customizer and then clicking on the “Add” button next to “Blog Posts”. I’ll create three sample posts with placeholder content just to show you what the blog page looks like after I publish all three.

The first sample post will be a basic text post with a title and some body text.

The second post will be a “Quote” style post, which I’ll designate by clicking on the “Post format” option in the right side menu and selecting “Quote”.

The third sample post will be a gallery style post with some photos I found in the free stock photo gallery provided in the media library.

To find and add these images, I first clicked on the “Add” link right above the text editor:

A menu will pop up, where I can select from many options: adding my own media from my computer, adding media from Google, searching photos in the Free photo library, adding a contact form, or even adding a payment button. For now, since I’d like to add photos from the Free photo gallery, I’ll select that option.

A window will pop up where you can search for specific search terms in the top search field.

I’m interested in finding some sample fruit pictures, so I’ll type in “fruit”.

I’ll click on as many photos as I want, here I’m only selecting four, and then I’ll click on “Copy to my media library”, where they’ll become part of my existing library of pictures that I already have uploaded to my site:

Next, I’ll click “Continue” and choose a layout for these four photos that I like. I’m happy with the default “Tiled Mosaic”, so I’ll click “Insert”.

Inserting the gallery into my post looks like this:

I’ll click “Publish” in the upper right corner and then preview my site’s blog page to see what all three posts look like. But before I do that, I’ll first need to add a link to my blog to my navigation, so I can navigate to it easily. To do this, I’ll go back to my Customizer by clicking on “My Sites” and then “Customize”, then I’ll select “Menus” and select the “Primary” menu. I’ll click on the “Add items” button, which pops up a list of my existing pages as well as other types of items I can link to from my primary menu.

I can see that my “blog” page has been added to my Pages list, so I’ll go ahead and select that. It automatically gets added to the list of items in my menu:

I’ll now click “Publish” and take a step back to look at what my site looks like with the new “blog” page link added to the primary menu.

I’ll click on the new “blog” page I just added and see what the feed of my three sample posts looks like:

I can see that the Gallery and Quote type of posts look really nice and formatted compared with the standard text post. I am noticing that I forgot to add a background image (or a “Featured image”) to the blog page, so I’ll go back and do that by navigating to “Site Pages”, clicking on my new “blog” page, and then clicking on “Set Featured Image” in the right side menu item “Featured Image”.

This opens up my media library, so I’ll just select one of the images I recently selected from the Free image library.

Clicking “Set Featured Image” takes me back to my post where I can see the preview and thumbnail of the featured image in my post editor.

I’ll press “Update” in the top right to save these changes, and then I’ll go back to my main live blog page and refresh the page to see the changes.

I’m very happy with the way things are looking, so I’ll keep things as is for now.

Next, I’d like to introduce you to a few handy tools you can use while creating your site.

1. Scheduled posting
2. Sharing posts to social channels
3. SEO descriptions
4. Contact form on a Contact page
5. Simple Payments button

Scheduled Posting

With scheduled posting, you can create as many posts as you’d like ahead of time and plan out when you’d like them automatically published for you. Simply prepare your post as you usually would, and then click on the “Status” section in the right side menu.

Here, you’ll see a dropdown menu at the top that offers “Publish Immediately” or a calendar where you can choose a date to schedule (along with a timestamp). Once you click “Schedule”, you’ll need to confirm your scheduled settings once more:

Once I’ve reviewed my settings and clicked “Schedule”, I’ll see a notice in the upper right corner of my page confirming my post has been successfully scheduled. (If you’re skeptical, keep an eye out for my post called “Sample scheduled post” which will automatically be posted three days from today on April 20th at exactly 10:20am MT or UTC-6)

Because my site is set to my current timezone, UTC-6, my scheduled post will be published at 10:20am in my local timezone. You or your business may choose to edit these settings based on your needs. You can easily do this in “Settings” here:

Under the “General” tab, you can see under the “Site Profile” that there is a dropdown menu for “Site Timezone”. I have mine set to Denver because it was automatically detected based on my location, but you can also select another region or manual UTC offset (e.g., Denver is in Mountain Daylight Time, would is equivalent to UTC-6).

Sharing posts to social channels

Back in my main My Sites menu, under “Sharing”, I can see a full list of connections to social channels under the “Connections” tab, where I can automatically share my WordPress.com blog posts:

If I click on the dropdown arrow for the first channel, Facebook, I can see an example of what my posts may look like in Facebook as well as what the social sharing buttons can look like.

If I click over to the “Sharing buttons” tab, I can see the options I have for displaying these buttons across pages and posts:

Here’s a peek at what clicking through some of the options looks like:

A bit about SEO

SEO, or Search Engine Optimization, is a topic that seems daunting but is simple in concept. The basic idea is that when people search for specific, relevant keywords in search engines (like Google and Bing), you want your website to appear higher up on the list of results, so people will click on your site first. For example, some relevant words that relate to my hypothetical juice bar small business would be “juice”, “juice bar”, “natural”, “organic”, “cafe”, “smoothies”, and especially more specific “long-tail keywords”, like “juice bar in San Diego, CA”. If a person searched for “juice bar in San Diego, CA”, I’d like my website to appear at the very top of their search results, so that there’s a greater likelihood of them clicking on my website and visiting my business to buy a juice.

These features are only available to WordPress.com Business plans, so I’d need to upgrade from my Premium plan level to use this feature and help my business’s site rank higher. To do this, I’d simply go to my “Plan” page and then view “Plans” and click on the blue “Upgrade” button under the Business plan.

For more information on SEO, please visit our official SEO support page. Here, you can also find useful links to in-depth tutorials, such as our free WordPress.com Business SEO e-course.

Contact form on a Contact page

To add a contact form to my site, I’ll first create a new page called “Contact” and then click on the “Add” button in my text editor and select “Contact form”.

I’ll be presented with some options for Form Fields. I don’t need to get websites from my site visitors, but I would like to ask them what they’re contacting me about, so I’ll delete the Website field and add a new field by clicking “Add a new field” in the lower left.

I’ll call this field “What are you contacting us about?” and make it a dropdown with four options, which I’ll type into the Options text field separated by spaces.

I’ll click “Insert” and see my form has been inserted into my Contact page. Next, I’ll be sure to remember to add a Featured Image so the left side of this page has a nice background.

Before I preview what this looks like, I’ll be sure to first add a link to this new contact page in my primary menu. Here’s a short clip of what that process looks like:

And here is my new contact form on my contact page:

Simple Payments button

If you have a Premium or Business WordPress.com plan level, you can add a simple payment button to your site. As an example, I’d like to create a promotion on my “menu” page where I offer a dollar off regular prices for customers who purchase a drink ahead of time on my website and pick up their drink in store.

To add the Payment button, I’ll simply go back to my “menu” page and add a section at the bottom of my menu called “Order now, pick up later” and add a description paragraph below it. Next, I’ll click on the “Add” button above my text editor and select “Payment button”:

I’ll fill out my product details, such as the product name, description, and price, and then enter the email address that I have associated with my PayPal account, which is how I’d like to accept payment from customers.

To save these changes, I’ll click “Insert” and this will be inserted into my menu page. I can now click “Update” in the upper right corner of my page editor and view my changes on my live site at the bottom of the “juice menu” page.

To test things out, I can click on the “Pay with PayPal” button and see what happens:

Since I see the regular PayPal login or pay with a credit/debit card screen, I know things are looking good. I’m all set to start accepting payments directly from customers.

Wrapping it all up with a demo

Now that we’ve gone through all the parts of setting up a website for a hypothetical small business, we’ll wrap things up with a visual recap of everything we’ve created:

You can take the demo site for spin at https://juicebardemo.com. Please note that the PayPal button is not linked to a live account and that Made Fresh Juice Bar is not a real business. Everything created here was for the purposes of this website demo, including the Twitter and Instagram accounts and placeholder business address.

If you recall my site plan in Part 2 of this series, I hadn’t initially planned to create a blog or add a contact page, but since it was only a few easy steps, I was able to add them as I wrote out this third installment of the series. The best part of working with WordPress.com is that you can easily add or remove things like these whenever you’d like. You can even roll back your site to a previous state or upgrade your plan level to get more advanced features, like the SEO features I described earlier. As a special offer for all readers of this series, you can use coupon code juicebardemo when purchasing a WordPress.com Business plan for 25% off your first year. This offer expires December 24, 2018.

All of the aforementioned features are brought to WordPress.com by Jetpack. Jetpack is a service made by the creators of WordPress.com that provides website builders with the best design, marketing, and security features for their self-hosted WordPress websites. All WordPress.com sites are powered by Jetpack and are automatically hosted and backed up by WordPress.com, whereas self-hosted websites that use the free Open Source WordPress software need to host their site on a hosting service, such as Bluehost or SiteGround. On its own, Jetpack is a full-featured, modular service for these self-hosted WordPress website creators with tiered plan levels that offer more advanced features, like premium themes, daily backups, and real-time threat scanning, but combined with WordPress.com, Jetpack is what’s powering this very site and all the useful features you can use on your own without touching any code files.

Please leave a comment below if you have any questions or if you’re interested in specific topics for future articles. I’d love to hear from you.

Good luck in your website journey!