Category: Resources to build your website

I had created a project outline in Trello using Markdown formatting language. The project outline was inspired by questions from several clients to advance their upcoming projects.

I am experimenting with using the new Gutenberg editor tool on this website and thought it would a good opportunity to test drive the Gutenberg block support for Markdown by selecting a paragraph block and pasting outline directly into it in a new post.

Results: On my first try, I pasted the entire text from the Trello card all at one time. 9 heading blocks were created. The text I expected to be formatted as a list became paragraph blocks instead. The unexpected list format was due to my list syntax (formatting) error. After adjusting my list formatting, I pasted the entire text from the Trello card all at one time again. 9 heading blocks were created and several list blocks were properly created.

Below you can see the final text for the basic project outline.

Website URL:

Who is requesting this project?

What is the importance and purpose of this project?

Content Related:

• Text (including internal and external links)
• Visuals + Multimedia (i.e. custom images, stock images, videos, graphics, audio, custom fonts, logo)
• Interactive Elements(i.e. payment forms, contact forms)

Known functionality Issues:

• Theme
• Plugins
• Integration with external applications (i.e. email provider, payment processor-gateway, social media)

Timing:

• Desired starting week
• Requested completion week
• Payment schedule suggested (i.e. single payment, extended payment plan)

Other professionals who will be involved:

• Graphic designer (name, phone #, email address)
• Content creator (name, phone #, email address)

General Housekeeping:

• Are redirects needed for deleted content?
• Are Automatic backups happening?
• Any themes, plugins or WordPress version outdated?
• Is webhosting access available?
• Is SSL certificate active?
• Is WordPress dashboard access available?

Special Concerns:

(This post was set up using Gutenberg blocks)

As I was preparing this week for my workshop at Winter Writers Weekend  — I decided it was time to make the change on silverhoopedge.com to incorporate the new blocks system provided by the Gutenberg plugin. The Gutenberg plugin is a tool that allows site owners and content creators to try out the new editing experience coming to WordPress.

Most of my adjustments turned out to be non-dramatic. I chose to streamline the content layout of some of my pages. To replace the widgets used for Conductor Plugin and Ninja Forms, I used the available Gutenberg shortcode block as a transition tool.

There will be questions from existing site owners about how to handle the changes that will come with when the blocks from Gutenberg plugin become the normal editing experience for sites powered by WordPress.

While the new editing experience is under active development there are a few preliminary steps that existing site owners can take without changing anything which would impact the website visitor experience.

Preliminary steps:

• Learn how to create a backup of your files and database-pick an automated tool or manually copy you files regularly
• Learn how to properly restore your files and database if something goes wrong
• Ask your current webhosting vendor if a staging site is included with your plan 
• Are there any users that should no longer have a author, editor or administrator role on your site?
• Themes:
  • If you have purchased a premium theme: do you have a valid licence key to access to support?
  • If you are using a free theme: is it still actively supported?
  • If you are using a completely custom theme: is the original theme creator reachable?
• Review your installed plugins:
  • Delete plugins that are not used
  • Are your active plugins supported and compatible with the most recent WordPress version?
    
  • Ask plugin authors what the plan is for becoming "Gutenberg compatible"

post last updated: 12/12/2017

Gutenberg on GitHub
Test Gutenberg

Timeline for implementation into WordPress core software

Spring/Summer 2018

WordCamp TV videos

Event: WordCamp US
State of the Word (approx 35 minutes into the video)
Gutenberg and the WordPress of Tomorrow

Articles about Gutenberg project from various sources

Gutenberg and the Future of WordPress: Conditions for Success
The Economic Impact of the Timeline of the Gutenberg Rollout
Twitter #gutenberg
Ithemes-10 things you need to know
Storify
Boilerplate
What Lisa Linn Allen learned at WordCamp 2017
Preparing WooCommerce

Documentation

Handbook

Request training from Silver Hoop Edge

On your own-coming soon
Small Group-coming soon
One-on-One-coming soon

Desired Result:
Display a background image on one page only on your WordPress website

Get your act together:

1. Backup your files and database
2. Select an image or graphic that is suitable* to use as a background image
3. Have a working knowledge about how to control CSS for your WordPress site
4. Know where to find the area to manage the CSS for your site. It might be in one of the following areas:
   • A child theme style.css file
   • A CSS editor plugin or a Jetpack plugin’s CSS module
   • Additional CSS area built into the WordPress customizer

Make it happen:

1. Find the page-id. Use view page source for your preferred browser.
   The page-id might be located in an area that looks something like this:
   body class=”page-template page-template-template-full-width page-template-template-full-width-php page page-id-xxxxx ……
2. Customize a starter code snippet and add it to the area to manage the CSS for your site.

• Try this code snippet for Twenty Sixteen and Twenty Seventeen themes
  .page-id-xxxx .site-content{/*replace xxxx with real ID of the page*/
background-color: /*replace with any hex or rgb color code*/;
background-image: url("/*replace with the link to your selected*/");
background-repeat: no-repeat;
background-position: left top;
}
• Try this code snippet for Symphony Pro theme
  .page-id-xxxx.fluid-width .content-container {/*replace xxxx with real ID of the page*/
background-color: /*replace with any hex or rgb color code*/;
background-image: url("/*replace with the link to your selected*/");
background-repeat: no-repeat;
background-position: left top;
}
• Try this code snippet for Baton Pro theme
  .page-id-xxxx .content-wrapper-in { /*replace xxxx with real ID of the page*/
background-color: /*replace with any hex or rgb color code*/;
background-image: url("/*replace with the link to your selected*/");
background-repeat: no-repeat;
background-position: left top;
}

*Suitable is a subjective term. Not all images will work well when used as a background of a page. Some images may interfere with the important content on a page. Other images may look odd in smaller devices. Some images might need to repeat to fill the available space.

Resources
colorhexa.com
jetpack.com/support/custom-css
wordpress.org/plugins (search for CSS editor)

I have a small confession. I was not a fan of the customize area of my WordPress dashboard. I actively avoided using it. I can’t pinpoint the exact reason for my aversion, maybe just due to stubbornness and resistance to change. However, after using NOTE over the last few weeks, it has forced my hand to try to make use of the customize area and, I have to admit, it’s not as awkward as I had imagined (after I took the time to understood the workflow). Continue reading “My note-able Confession”