Archive for the ‘WordPress’ Category

Hopkinton Lumber Launches a new Responsive WordPress Website

Monday, August 17th, 2015

Congratulations to Hopkinton Lumber of Hopkinton, MA on its new website. This is the first website for Hopkinton Lumber. Hopkinton Lumber is a friendly, family-owned establishment on Main Street, and, as far as the owners are concerned, Hopkinton’s best-kept secret!

Early in 2015, Hopkinton Lumber decided it was time to use the Internet to get the word out about itself and its products. The owners were tired of hearing, “I didn’t know you sell paint supplies.”, “I didn’t know you sell home improvement products.”, “I didn’t know you sell contractors’ supplies, automotive repair products, camping gear, backyard furniture, landscaping tools, pet grooming supplies, holiday decorations, and whatever-else-you-can-name”.

Well, Hopkinton Lumber has over 10,000 products in stock! As the name implies, it started out selling only lumber, but, the front building was converted into a hardware/home improvement store many years ago.
Responsive WordPress Website with custom WooCommerce It is conveniently located on Main Street (Rte. 135) within 1 mile of route 85 and route 495. The owners invite local home owners and contractors to stop into the store and introduce themselves.

Primary Business Goals:

  • Get the word out to local home owners and contractors about the wide array of home improvement products in stock
  • Showcase products in a catalog-like fashion
  • Allow prospective clients a convenient way to browse the online catalog of products
  • Implement solutions that make it easy for staff to update and customers to navigate

Solution:

  • Use WordPress so staff can update content on the web pages
  • Use a responsive WordPress theme so that the website visitor enjoys a pleasant experience while viewing the website regardless of the device (cell phone, tablet, laptop, desktop) used by the visitor
  • Use a shopping cart/catalog building product with an easy learning curve. The WordPress-ready shopping cart WooCommerce was installed in order to provide staff the ability to effortlessly add products and to be able to categorize each product in multiple categories.
  • WooCommerce customizations included: The Catalog viewing and Add to Cart functionality were used, and the check out, my account and related functionalities were disabled.
  • Custom WooCommerce Plugin: Custom PHP code bundled in a plugin that allows customers to print out a shopping list was developed. The shopping list prints to a PDF for easy download to a cell phone or formatted printing. The Print Shopping Cart option displays dynamically once items are added to the shopping cart.

Shopping List PDF

Click for larger image


The website is live and ready for visits. Staff are loading the products each week, so, please return to view additional products as time goes on. And…No, we did not forget to post the email or an online contact form. Hopkinton Lumber is a friendly face-to-face operation. Staff specializes in welcoming each person, taking time to help each one find the best solution for their project, assisting or keeping a distance as each customer desires.

Stop in and let Hopkinton Lumber know that the word is out. You know that there are thousands of products! Heck, the hardware store structure is an original post and beam building with a 100 year history – and – that alone is a reason for visiting!

  •  
  •  
  •  
  •  
  •  
  •  
  •  

2015 Boston WordCamp

Monday, July 20th, 2015

This weekend, I spent both days in Boston at BU attending WordCamp Boston 2015.

Boston WordPress WordCamp 2105

Saturday morning keynote speaker, Bobbie Carlton

Bobbie Carlton (@BobbieC) kicked off the 2015 version of all-things WordPress tech-fest with her presentation entitled Visibility = Opportunity. She took us to the circus to illustrate the major points of her presentation about marketing and PR of events.

  •  
  •  
  •  
  •  
  •  
  •  
  •  

eCommerce WordPress website for Marlborough Wellness Center

Friday, February 27th, 2015

Congratulations to Julie Brown Dalbec, owner of Marlborough Wellness Center (MWC) for starting 2015 off with a bang! MWC’s 2015 business plan includes adding eCommerce to its website as well as creating a new look and feel that complements its newly created logo (shown below).

Marlborough Wellness Center new logo

Since changing the design would require a total rebuild of the website, it made sense to convert the original HTML-based website to a WordPress platform at the same time so that Julie and staff (who have previous experience blogging with WordPress) could add and update content on every page of the website at will.

Key Business Objectives

  1. Add eCommerce to the website
  2. Incorporate the newly created logo
  3. Build the website using WordPress CMS tool
  4. Meld the new logo with the chosen WordPress theme
  5. Provide all contact information on the top right of each page

Working toward the Solution

  1. eCommerce – WooCommerce was chosen as the eCommerce solution. It is written especially for integration with WordPress websites. WooCommerce is a powerful eCommerce solution that enables MWC staff to create a catalog, manage inventory, sell products online, offer specials, upsell products, and more.
  2. Newly designed logo – The new logo (shown above) was created by a third party and provided to Adventures Online electronically. The logo was resized and the colors of the logo were integrated into the chosen theme.
  3. Build using WordPress – The new website was built online in a development area. The HTML pages of the original website were re-entered as WordPress pages, new WordPress pages were added, and the existing blog posts were exported from the original website and imported into the development website. When the development website was completed and approved by Julie, the entire website was re-created on the latest version of WordPress in MWC’s live hosting account.
  4. Meld the new logo with the chosen WordPress theme.
    MWC chose to base the new design on a publicly-offered WordPress theme.
  5. Provide all contact information on the top right of each page
    A special contact area was created and styled using elements of the theme. Color of links match the colors in the logo.

 

WordPress was installed at the development website, then the starter theme was installed and activated.

starting wordpress theme for MWC

Starting theme to be melded with the MWC logo and presentation requirements

Next, the new logo, the contact information, and slider images that pertain to MWC’s business were added, and the highlight and link colors were changed to match the colors in MWC’s logo.

New WordPress website home page

Home page of new website with MWC requirements

The WooCommerce plugin was installed and MWC staff loaded it with natural products that it will be selling on line.

MWC natural produt\cts online store

Portion of MWC store selling natural products online

MWC’s store is now open for business Stop by the store. Learn more about Julie Brown Dalbec and the other practicioners at MWC. Use one of the contact methods (at the MWC website) to congratulate Julie and staff on the new website!

 

  •  
  •  
  •  
  •  
  •  
  •  
  •  

How to Display Icons in a WordPress Post

Monday, February 9th, 2015

At the end of January, I tweeted about a new WordPress experience I had. Tweet about Genericon'd plugin After developing WordPress blogs and websites for 12+ years and using graphical icon representations the majority of that time, I used a WordPress icon font plugin and a shortcode, instead of graphics, to spice up the content presentation on a blog post.

Genericons and Genericon’d have opened up a whole new arena of possibilities for me. Icon fonts are my “shiny new bobble” that can enhance content presentation and, when used judicially, can highlight content without distracting the audience.

It all started when a website being developed was not behaving as expected on iPads and iPhones whenever the menu icon displayed. I fiddled with the CSS for hours. (Oh, yeah, I HAD been using genericons, but via CSS!) I have been working with WordPress blogs since 2003, so was super frustrated that I could not quickly resolve the icon behavior on those devices.

In researching the origin and behavior of the menu icon, the “Genericons” font by Automattic (creators of WordPress) came into my consciousness. Per the Genericons website,

Genericons is a free, GPL, flexible icon font for blogs!

When I did a search for ” genericons wordpress “, the Genericon’d plugin displayed at the top of the search results.  Really? It is that easy? Just install the plugin?

I installed the Genericon’d, plugin via the WordPress dashboard and started using it right away.

Install Genericond plugin

click for larger

Naturally, I created a test post and used a dozen icons interweaved with content and content with graphics. I tested invoking them via HTML and by shortcode. Shortcodes feel the most comfortable way for me to use the Genericons icon font in WordPress. You can test on your own to see which appeals to you. (There is a sample below.)

How do you find the correct icon code to use?

It is as simple as 1-2-3. After Genericon’d is installed, there is a new menu item on the Appearance menu.

  1. Hover over Appearance and click on Genericon’d.
  2. When the Genericon’d page displays, scroll down to the icon you want to use and doubleclick it.
  3. Scroll back to the top of the screen and COPY the version that you will use to display the icon; CSS, HTML, or Shortcode.

How do you add the icon HTML or shortcode to a WordPress Post or Page?

Note: For best results, add the icon code using TEXT mode. Typically, a post or page first displays in VISUAL mode.Text mode in WordPress

Click the TEXT tab next to VISUAL to change modes. You will see the content of your post/page, and maybe with some tags [] that you don’t recognize.  Ignore those.

In TEXT mode:

  1. Go to the place where you want to add the icon.
  2. Paste the HTML or shortcode
  3. Click Update/Save draft
  4. View the Post or Page to ensure that the results are what you intended

The Genericon’d plugin is a breath of fresh air for this WordPress developer. I just need to learn to constrain myself!

Note to self: Just because you can use icons, doesn’t mean you should

Got it!

I the Genericon’d plugin!

HTML (instead of a shortcode) was used to display this icon. Notice that the font does not match the font in my blog, the content is centered, and the icon is larger. I prefer that the tool do the work for me, so, I’ll stick with shortcodes that automatically style the icons to match the styles in my blog.

Happy Blogging, my friends!

  •  
  •  
  •  
  •  
  •  
  •  
  •  

Custom WordPress Plugins with Responsive Website Redesign

Thursday, January 29th, 2015

Congratulations to Your Gift Certificate (YGC) who recently launched its redesigned website! YGC, located in Southborough, MA, is the brainchild of Ken Kahn and Steve Brideau. YGC offers unique marketing programs that put businesses in front of homebuyers at peak purchase time as homebuyers transition into their new homes. Late in 2014,  YGC chose Adventures Online to redesign and develop its website.

Key Business Objectives

  1. Present consistent branding across Your Gift Certificate’s websites
  2. Provide a familiar user experience across platforms (desktops, laptops, tablets, and cell phones) aka a “responsive design”
  3. YGC staff to update website content including clients and industries
  4. Website visitors to view the list of clients sorted by their choice, either by client name or industry, with just one click

Working toward the solution…

(Click images to see larger versions.)

1. Design requirement: Make the .COM website look more like the .BIZ website.

(A major portion of the re-design  had been completed in 2013 when Adventures Online developed YGC’s sister website for consumers.)

before website redesign
.COM website BEFORE redesign
dot-biz-website-design-250Target design similar to .BIZ website

2. Working Mock Up

redesign mockup

  • Logo top left
  • Menu strip below logo and across the page
  • Green strip for header consuming ¾ of the page
  • Right sidebar consuming ¼ of the page
  • Page Title in header on the left
  • Subject-appropriate image in header area
  • Content consuming white space below header area

3a. Final Redesign (desktop version)

During development/client review, the client requested that the header images be right-justified to abut the right sidebar. The orange portion of the top menu bar (right) was abandoned in anticipation adding more pages. Once added, the links to the pages will use the green/white combination of the menu items in order to maintain consistency and balance. The sidebar was filled with at-a-glance contact information, client testimonials and links to whitepaper downloads.

desktop view of redesigned website

3b. Final Redesign Demonstrating Responsive Design

On tablets and cell phones the top menu collapses to the generic menu symbol (of three horizontal lines )

LG G2 with Android version of menu
AFTER redesign: Condensed menu on LG G2 Android cell phone
Cell phone menu overlayAFTER redesign: Menu overlay on LG G2 Android cell phone

Solutions to Satisfy the Business Objectives

The first two business objectives were accomplished via the design as demonstrated above.

To satisfy objective three (YGC staff to update website content including clients and industries),WordPress was chosen as the foundation on which to build the redesigned website. YGC staff were familiar with the ease-of-use of WordPress as a content management system. Further, custom WordPress plugins were developed in order for staff to maintain the list of their clients and industries. The maintenance screens are accessible via the WordPress Dashboard menu.

To satisfy objective four (Website visitors to view the list of clients sorted by client name or by industry with just one click), custom programs were written. Each time the Client page displays, the client-industry combinations are extracted from the WordPress database so that the most up-to-date list is always displaying. There are buttons in the Client and Industry columns. When one of the buttons is clicked, the list of clients re-sorts itself without the page re-loading.

Dynamic Sort Inside WordPress Post

Technology note: Programming included PHP, jQuery and Ajax with MySQL views. The programming is invoked via a custom shortcode on the Client page.

The website recently launched and staff has attended a refresher WordPress training session.
~~~~~~~~~~~~
Thank you, Ken and Steve of Your Gift Certificate for once again trusting Karen Callahan of Adventures Online with your website work! It was wonderfully challenging with a good mix of components!

  •  
  •  
  •  
  •  
  •  
  •  
  •