Archive for the ‘Blogs’ Category

Recent WordPress Upgrades

Saturday, April 25th, 2015

WordPress 4.1.1  WordPress 4.1.2, NO, Okay WordPress 4.2,  What? WordPress 4.1.3

It’s Saturday and my head is still spinning from all the WordPress upgrades I completed this week, and, for some of the websites I host vis-à-vis Adventures Online, it was WordPress upgrade upon WordPress upgrade.

As a WordPress specialist and having developed over 70 WordPress websites and blogs, a typical week includes upgrading WordPress for one client or another. And there is the business colleague of a client who calls and requests an update as well. Always room for the occasional additional WordPress update.

The original goal of the week was to upgrade all the websites and blogs to version 4.1.1, including upgrading and testing each website’s plugins, and installing 2-3 security plugins to those websites to which they had not been previously added.

No sooner had a bunch of upgrades been completed than the security release WordPress 4.1.2 was released. WordPress.org said,

WordPress 4.1.2 is now available. This is a critical security release for all previous versions and we strongly encourage you to update your sites immediately.

WordPress versions 4.1.1 and earlier are affected by a critical cross-site scripting vulnerability, which could enable anonymous users to compromise a site

upgrade-to-wordpress-4-2

WordPress 4.2 is available

So, I started all over updating WordPress websites again. While working through the list of websites and blogs to upgrade to 4.1.2, emails starting arriving in the Inbox announcing the release of WordPress 4.2 – and at the same time – that some websites had been automatically upgraded to WordPress 4.1.3. Huh?  Slow down Automattic.

WordPress 4.1.3

Why was 4.1.3 released on top of 4.2? Now, I needed to do some research. I found the most succinct answer at wptavern.com. Jeff Chandler looked into the WordPress 4.1.3 release and explains that it includes code that fixes writing to the WordPress database for some “esoteric character sets” and that highly popular character sets like UTF-8 and latin1 (used by my client base) were unaffected.

I’ve tried setting the automatic updates to “all WP components”, to core files + plugins, and core files + themes, and the only combination that works consistently without causing drop-everything-and-go-fix-this-website issues, is the “core files only” option. Then the plugins are manually updated and the website is checked after each plugin is updated, so, if a plugin “breaks the website” I know immediately which one and am able to take corrective action right away.

In the times when all WP components were upgrading automatically, when a site failed, there would be more work – and I would be starting from a place of “mystery” not knowing which update caused the issue. All updates would need to be backed out and re-applied manually until the offending component “broke” the website and I could move forward from there debugging and fixing. Too much time burnt that way.

Truth be told, I had started the week with more WP websites to update than usual because I had been on vacation for two weeks. Most of the WordPress websites in my care are set to automatically update core files. Once updated, I manually update the plugins. This helps me avoid control (when I might see) the “WordPress white screen of death“. (See the aside for more information about my experiences with automatic updating.) Other websites I manage are highly customized and/or using vulnerable files, so all WP components on those websites are upgraded manually.

So what started as the simple, “let’s make sure that all WP websites are running 4.1.1”, turned into a hair-raising WordPress frenzy. It felt like the “All-WordPress All-the-Time” radio station. AND, I am working today in order to complete updating all my clients’ WordPress installs to ensure that each is running WP 4.2!

WordPress Updates

I AM very happy about the evolution of the WordPress updates. They have become quite sleek and reliable.

Years ago, it was so time-consuming to upgrade a WordPress website, I had to charge my clients in order to be compensated for some of the time.Nowadays, the updates are so reliable that updates are included in the hosting packages.

This week, I have updated websites running WP 3.9.5 to WP 4.2 as well as versions after WP 4.1.n to 4.2.  Next week, assuming that the client gives permission, I have an update from WP 3.7.1 to 4.2. That will be interesting.

 

  •  
  •  
  •  
  •  
  •  
  •  
  •  

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 Create a List of WordPress Posts and Pages

Thursday, February 12th, 2015

If you are a WordPress power blogger, you probably have written a large number of posts and pages. If you are like me, and do a lot reading and research in addition to blogging, topics become so familiar that you confuse yourself about which ones you have already written about, which posts are in draft, and which are scheduled. Even though I use the WordPress Editorial Calendar Widget to manage my blog posts, and it gives a good monthly visual, it doesn’t show me whole picture (the pages).   Enter a simple WordPress plugin that I stumbled upon while helping a client earlier this week.

The Story

The other day, a client that hosts its website with me asked how they might be able to get a listing of all the content on their blog; pages and posts in the same list. I immediately thought of a Sitemap plugin like Google XML Sitemaps. While researching the Sitemap plugins, WP Sitemap Page came to my attention. It turned out to be the lightest plugin that met all of their criteria. In addition to generating a current list, the client wanted to view the list online in order to be able to click on the title of the post or page to preview the content. They wanted a simple list, like an indented hierarchical list, that could be printed and then use to check off posts and pages as they were reviewed.

WP_Sitemap_Page lists ALL the published posts and pages. It does not list draft posts or pages, nor scheduled posts. Pages are listed in alphabetic order by Title. Child pages are listed under the Parent page in alphabetical order by Title.

wp sitemap page

Sampling of Categories of Posts displayed by WP Sitemap Page

Posts are listed by Category. Within each Category, the posts are listed in reverse chronological order (LIFO – standard blog order). I did not test these features, but, according to the creator, the plugin will display custom post types and taxonomies, has a class assigned for styling with CSS,  and has the ability to exclude some pages, and a few more things.

WP Sitemap Page can be downloaded at the WordPress Plugins Directory. It installs like every other plugin, and to generate a list of posts and pages, you simply add a shortcode (in TEXT mode only) to the page on which you want the list to display.

Installing WP Sitemap Page Plugin

  1. In the WordPress Dashboard, roll over the master menu item Plugins
  2. Click Add New on the drop down menu
  3. When the Plugins page displays, type “WP Sitemap Page” into the search box
  4. Click Install Now in the box that shows the plugin by Tony Archambeau
  5. Once installed, activate it just like any other plugin
  6. Create the page in which you want the list to appear
  7. Switch to TEXT mode
  8. Add the shortcode [wp-sitemap-page]

Text mode in WordPress

Caution
If you have excluded some posts or pages from displaying on your website, they will be listed on this page. One way to keep them hidden is to keep the generated sitemap page in “draft” mode and only view it when logged in – Or the page can be assigned a Visibility of “Private”. If the generated sitemap page is used on the website as a sitemap for humans, then you’ll need to figure another scheme for keeping your excluded pages excluded.

 

 

  •  
  •  
  •  
  •  
  •  
  •  
  •  

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!

  •  
  •  
  •  
  •  
  •  
  •  
  •