One perk of working remotely by default is that not much has changed since the pandemic started.
Rereading the last line is a bit unsettling. It’s like the beginning of a bad horror fiction starring Jesse Eisenberg.
But the strangeness of this year’s current events aside, the full impact of social distancing and quarantining doesn’t appear to have affected me as much as it would someone who works daily from an office with other people, or perhaps people with small children.
Most of my work is done online already. My work place relationships are via Slack and Zoom. If anything, our in-person meetups are the only real ‘normal’ interactions my colleagues and I have – and they aren’t really that normal since they take place in amazing places.
Since all work related travel has been suspended I’ll likely be working from Philadelphia for the near future. That being said, I’ve put together a few projects to keep myself centered and to distract myself from reading too much into the crisis coverage.
Building a 2D game in Unity
Over the summer in 2019 I began learning to code in the Unity game engine. I originally began a tutorial by Gamesplusjames, but considering it was recorded in 2015, some of the concepts were a little outdated. I still recommend it as a lot of solid principles are there.
My first attempt at building a game
While working through this tutorial I also had my eye on a more recent tutorial by Mister Taft Creates. I switched over to this one because, one, who doesn’t love a Zelda clone, and two, it was made in the last two years so the methods employed are pretty modern.
I like this a lot.
It’s fun to work through a tutorial like this because it helps you realize what game mechanics can be applied to your own game. Going from “I have no idea how to make this” to “okay this seems plausible with some work” is pretty empowering especially when trapped inside your apartment.
Complete JavaScript course
JavaScript is a coding language I’ve attempted to learn for…five years now? My first few attempts landed me squarely in the ‘fuck it, lets use jQuery’ camp. But since beginning the Teamtreehouse Full Stack JavaScript course I have actually begun to get a foothold in learning this thing.
My issue has always been one of persistence. I would begin a tutorial, get two thirds of the way through it, then get distracted and put it down.
Without actually applying the concepts on a regular basis, I would forget everything and essentially start again from scratch. The irony is that if I had only just continued despite being fatigued I’d have accomplished a lot more with less effort.
Implement JS lessons in WoW Calculator project
Once the above tutorial is completely finished, my immediate goal is to implement it in a few personal projects. The first is to complete my World of Warcraft Talent Calculator.
The idea behind this project is to build out a three tier talent system for eight World of Warcraft classes.
Dynamically build out the talent grid from a JavaScript object containing class data
Provide controls that unlock superior talents as inferior talents reach the allotted point requirements
Refactor project to ensure expedient load times and good performance across devices
Perhaps the ability to save and share builds within a profile (or without)
JS and React
Another project to implement my newfound JavaScript knowledge is to try and build within my company’s open source Calypso codebase. I’d love to learn more about how the product I work with everyday actually works underneath its smooth veneer.
Workout from home according to Arnold Schwarzenegger
The Governator has posted his ‘workout from home’ routines on Reddit, and a lot of them are purposefully accessible to the average person. Hey, I’m average! I already began the 100 Pushup Challenge, so adding this to my home routine should be a welcome change.
Hopefully, the above activities aren’t too much to work on at one time. I like to think a lot of these are complimentary projects that provide valuable insight into one another.
Code one project, implement that learning into another, take a break and do some sit ups, repeat.
I thought, this would be pretty cool to try and recreate in Javascript.
I spent a little time sketching out the possibilities, the logic, and the requirements in Adobe XD.
Then I took to Codepen to try and build out a basic three column CSSGrid.
The resulting grid works nicely. It stacks on mobile and alots the correct amount of space for each talent.
A plan
As I began reverse engineering the logic in the ClassicDB talent calculator, I realized this project was a bit more complicated than I first thought. I knew I would use jQuery to build out the project. I knew I would use Codepen to document the work and also help share it on Stackoverflow if I got stuck.
But as I worked through the logistics I came across a couple realizations:
The calculator’s points need to stem from the same total, but apply separately per each talent tree
There are a number of things that occur as a talent is incremented such as adding points to the tree ‘points’ counter, and subtracting points from the overall ‘points total’ counter
Each maxed out talent will need a gold border (new class) to represent ‘full’
As new tiers are unlocked, previous talents cannot lose (decrement) points
This is important since without this condition talents would remain ‘active’ while the inferior conditions are no longer met
Adding tool tips to each item seemed easy enough, but, the content of those tooltips change depending on how many points are in the talent
Some tooltips call for other talents to be activated first before a superior talent is able to be activated
Lastly, this needs to scale dynamically for all classes otherwise building it out by hand would become untenuable
As you can see, the list is long but approachable once written down.
I broke the above into a few sections:
Create the tree ‘grid’ which would suffice for all classes. Make it responsive.
Create the counter logic for incrementing and decrementing the points for each talent
Create the tier progression logic for stepping through each tier
Create a pool of points to pull from and individualized ‘point sums’ per tree
Add tooltips for each talent and adjust their values based on JSON table of values
Create a way to save builds and share them with friends
Journeys are easier to navigate once you draw a map. The map above is a living document so it can be changed as the requirements and blockers call for it. But for now, it is the map I choose to follow.
More to come…
Notes from the future:
While working on this project I managed to get a working draft of the point progression working here:
https://codepen.io/jjchrisdiehl/pen/xxKgwdm
While working on this project I resumed my JavaScript coursework and realized this can be achieved much more efficiently with better event delegation and propagation.
This provides a great opportunity to parse the ‘class data’ and iterate through the icons dynamically, but that is for a future refactoring of this project.
The beauty of the Gutenberg project is it is not just an editor, but a coding component system. What at first appears to be an infringement on ‘artistic license’ for developers is alternatively liberation from the TinyMCE editor and its trappings.
Gutenberg serves as a standardization for the WordPress software that is long overdue. The new editor provides a toolkit. This toolkit empowers the individual WordPress user by increasing recognition of common features in the WordPress interface, standardizing how content is added, and unlocking site layout from the theme files.
These changes move the project towards its goal of democratizing publishing.
It’s blocks all the way down
Atomic Blocks
A collection of beautiful, customizable Gutenberg blocks for the new block editor.
CoBlocks
CoBlocks is powerful but lightweight: it adds functionality to the WordPress editor without bloat. This is the plugin you’ve been waiting for, and it will make you rethink what WordPress is capable of.
Kadence Blocks
This plugin adds custom blocks to extend Gutenberg’s editing capabilities to better build custom layouts and make Gutenberg able to do more closely what popular page builders can do.
Design Library
We are creating a design library for Gutenberg that will include all the possible layout variations for your next WordPress project.
Our plugin uses default Gutenberg block only. It will not pollute your WordPress installation with extra blocks or any custom code.
ACF Blocks
Manually creating custom blocks means digging through endless mounds of JavaScript. ACF Blocks, on the other hand, does all the hard work for you so you can sit back, relax and continue writing simple PHP and HTML.
The WordPress Block Editor transforms your way of writing from a single document to a collection of meaningful elements (blocks), with explicit structure. Jetpack includes some blocks of its own, which can help you create your pages exactly the way you want them.
2019 Roadmap
Matt Mullenweg announced during the State of the Word that the focus for the Gutenberg project would revolve around nine projects this year. Let’s take a look:
One
Creating a block for navigation menus. #
Two
Porting all existing widgets to blocks. #
Three
Upgrading the widgets-editing areas in wp-admin/widgets.php and the Customizer to support blocks.
Four
Providing a way for themes to visually register content areas, and exposing that in Gutenberg.
Five
Merging the site health check plugin into Core, to assist with debugging and encouraging good software hygiene.
Six
Providing a way for users to opt-in to automatic plugin and theme updates.
Seven
Providing a way for users to opt-in to automatic updates of major Core releases.
Eight
Building a WordPress.org directory for discovering blocks, and a way to seamlessly install them.
Nine
Forming a Triage team to tackle our 6,500 open issues on Trac.
Where we are now
In Progess
Complete
Block in Nav
X
Widgets as Blocks
X
Blocks in Customizer
X
Theme block regist.
X
Site Health Check
X
Auto Theme Update
X
Auto Core Update
X
Block Library
X
Triage
X
About 33% of the way there with about nine months to go.
Growing pains
With the rollout of the new editor, a couple issues were unearthed (if not predicted).
Themes
Many theme developers chose not to provide compatibility with the new editor, simply chosing to allow the theme to gracelessly fall into obscurity.
Plugins
Compatibility for plugins depended on whether the plugin interacted with the editor. Popular plugins like ACF built out support for the new editor before its launch. The push for an increase in the minimum version of PHP is likely a bigger blocker for older plugins than the new editor.
Upgrading an old layout to the new editor
A couple things to keep in mind when moving to the new editor.
Do you use a site builder that uses shortcodes?
Many page builders are working on support for the new block editor. But some are still a bit defiant of having their niche taken away by core.
For instance, the Gridable plugin built into Pixelgrade themes does not work with the new editor and must be disabled if you choose to use the block editor.
Can your content be created as blocks?
In a recent project, I had to replace a grid plugin that wasn’t compatible with Gutenberg. My solution was to use a columns block by Kadence. I figured this block would have a bit more longevity than a bespoke grid plugin, as it is built for the new editor.
Same look, new parts.
The process was relatively painless, with a little bit of a learning curve. I created two columns, placed an image in one and a couple paragraph, list, headings, and button blocks in the other.
The list section is simply a nested two column layout within the parent column.
I made sure to give the parent column a CSS selector under the block editor’s Advanced tab, ensuring that I could easily style the block group later on.
Shortcodes ought to be compatible with the new editor, but I have run into instances where many shortcodes may end up being wrapped incorrectly, resulting in a broken layout.
What plugin functionality can be replaced by the block editor?
Many TinyMCE plugins will not work with the block editor, or, will only be available in the Classic Block.
Are you using a column’s plugin? A grid plugin? Can these be replaced by the built in column block? Can you duplicate this functionality with a block plugin like Kadence blocks?
You may find that an incompatible plugin is essential to your site and doesn’t currently have a block editor counterpart. This may be a good enough reason to hold off.
Use a staging branch
Whether you test the changes on your local machine or use a staging service (often provided by your host at extra cost), you should make all of your compatibility testing from a non-production copy of your site.
Once you’re sure the new editor is for you, make a backup of your live site, make a second backup, then push the new changes to your live site.
As I began the new year, I decided it was finally time to dust off my FTP client and rethink my website.
Past iterations of my site were mostly just tinkering and devoid of any real substance. Yes, lessons were learned, but some things just need to be burnt to the ground and built from a new foundation.
About 50 lines of CSS (roughly 1000 characters minified)
Not bad! Let’s look a little closer. I’ve divided the homepage into three sections.
Section one
The top section is rather straight forward. I simply added my initials as the Site Title, my full name as the Site Description and then set the site description as its own block with some CSS:
.site-description{
display: block; /* Sets the description on its own line */
padding-left: .25em; /* Just to line up the left edge nicely */
}
All of which was done directly from the WordPress customizer. Nice.
I also hid the site navigation in favor of embedded links in the body of the site.
Section two
The content section uses the new Gutenberg editor along with a few custom blocks by Kadence Themes.
What’s great about Gutenberg is that all sorts of block libraries are being developed. The benefit of a Javascript framework is that it creates a foundation that WordPress features can build off of, using one unified component system.
Another awesome benefit of the new Javascript framework is that is can be used outside of WordPress. The Drupal community adopted the Gutenberg editor for their open source project, and blocks built for Drupal can be used in WordPress!
Mixing and matching block libraries is simple and since blocks share a common component system and structure, every block should work seamlessly together.
Kadence has taken the rather lackluster columns block and extrapolated on it, providing rich UI controls and prebuilt column templates.
Pretty cool.
I used an H2 header for the quote, because I like how it stood out, though a quote block would likely be a bit more semantic with a bit of styling.
I then used a Kadence row block to create the fifty-fifty column layout.
Kadence does provide a few prebuilt layouts, which is a really nice feature. This cut my development time down quite a bit since it took some of the guess work out.
Section three
One of the options found in the Kadence row block is the divider setting. This option lets you embed a fancy svg image or bezier curve.
SVGs
At first, I used one of the dividers because I liked how it looked like a mountain range. But as I tinkered with this, I realized that I would essentially need to leave an empty row at the bottom of every page in order to have these mountains appear in the footer consistently.
This is not a very elegant solution, especially since Gutenberg doesn’t support global blocks yet. This can be overcame with reusable blocks, but that still requires you to manually enter them.
The best solution (for now) was to modify the footer.php template file and embed the SVG into the template itself.
Removing layout from the editor and sticking it in the template files sort of defeats the purpose of Gutenberg. Granted, as more core elements of WordPress are brought into the Gutenberg framework, we should see less and less of this.
The first step is to go into the page editor and select the Code Editor from the editor settings in the upper right corner (beside Publish).
Next, copy the separator code, along with its SVG and path elements.
Make sure to select the correct wrapper div.
Now, using a child theme, you can paste the separator code just above the footer section.
This effectively moves the separator out of the content body and into the footer, letting you display the SVG on every page.
The last bit is to modify the SVG’s CSS so that the section is relatively positioned, this allows you to set the SVG to the bottom edge of the content section, just along the top of the footer.
/* Footer Separator */
.kt-row-layout-bottom-sep {
position: relative;
height: 250px; /* Adjust the height of the SVG for more stoic mountains */
}
A note on widgets
Twentynineteen lets you add widgets to the footer, but doesn’t offer a sidebar widget area. In my case, this is alright.
In this particular build, I chose to add the Jetpack subscription widget to my footer, which only required a little bit of CSS tweaking to have it sit where I wanted.
Summary
I really liked building out this homepage with Gutenberg, especially when I started to add in custom block libraries. As the editor evolves over time, I believe it will serve as a robust alternative to TinyMCE.
Plenty of WordPress users ask, “why not just use one of the standard page builders like Divi or Elementor.”
That is an option. But Gutenberg aims to solve a more pernicious issue — developers designing user experience. Developers and designers are separate disciplines, usually for a good reason. Not to mention, every page builder is built in a unique and different way. This can be nice, since it gives you many options, but then you run into having too many options.
With Gutenberg, a component system is implemented that says “do this, don’t do that.” The importance of this is that it can create synergy across rich media features on the WordPress platform, something that was never possible before.
I found I wasn’t a huge fan of the large Twentynineteen headers, they just weren’t for me. But the beauty of WordPress is I could just simply remove them.
As I work with more and more websites, I am increasingly looking to cut out bloat and feature creep wherever possible. This approach creates a couple benefits:
Decreased page load times
Cleaner typography driven design
Better accessibility across devices and browsers
Less development overhead
I hope this overview inspires you to get under the hood of this year’s latest core theme and create something really special for your own blog.
The 38th Annual Northern Short Course (NSC) will be held March 7-9, 2019, at the Renaissance Woodbridge Hotel in Iselin, NJ.
The Northern Short Course is a three day event for professional journalists that offers lectures and workshop series to help foster professional development.
I’ll be leading a workshop titled Why An Opensource Website Matters.
I work everyday with users on WordPress.com. Implementing Gutenberg into such a large project is vastly different than implementing it alongside an individual website.
When working on personal projects, any issue can become a major issue pretty easily. I can see why some of the community isn’t too thrilled with the changeover.
I know that a lot of the angst over Gutenberg involved implementing the new editor into older themes and existing content. What would break? Will plugins or custom post types be supported?
I admit, I rolled my eyes at first. The new editor does have a lot going for it, such as a standardization of rich content, but could it really be that difficult to shim an older theme into the new editor?
The Project
Back in 2017, just before I began working for Automattic, I worked for my parent’s catering company. I wore many hats, from bartender to marketer, and even sought to redesign our WordPress website.
The project seemed simple enough:
Pick a quality theme geared for restaurants and food service
Pull over our content and format it for the new layout
Redirect domain and old permalinks to the new site
And it was! It took me a good amount of time over the course of a month or two to put together the material and make it into something great.
I chose to go with the theme Osteria by Pixelgrade, as I knew they built pretty great themes for WordPress.com.
Pretty spiffy.
Osteria uses a couple of custom plugins built by Pixelgrade for their themes. These plugins consisted of:
Customify – A Theme Customizer Booster
PixCodes – WordPress shortcodes plugin everywhere. Loaded with shortcodes, awesomeness and more.
Pixelgrade Care – We care about giving you the best experience with your Pixelgrade theme.
PixTypes – Custom post types and meta-boxes needed by your themes.
And of course, one plugin I learned to loathe:
Gridable – A simple and intuitive tool for organizing your content into columns and rows.
To be perfectly honest, a lot of these plugins provided great value.
Customify made the customizer experience wonderful and feature rich.
Pixelgrade Care is a great solution to manage your theme subscription and also provides a list of changes you can make on the theme.
PixTypes provided some interesting meta box options that let you customize the themes parallax headers to your liking.
But two plugins stood out as not particularly…good.
PixCodes is indeed feature rich, providing lots of great icons and the like, but in my mind the byline ‘Loaded with shortcodes, awesomeness and more’ puts a major exclamation point on the reason why Gutenberg was devised in the first place.
Gridable, well, is simply not good at all. I found it constantly buggy and very unintuitive.
But all of that being said, I do really like Osteria a lot! I think the style and emotion of the theme is spot on, and it wasn’t bulky or cumbersome to use.
Enter Gutenberg
As 2018 flew by, the site was delayed and yet to launch. I was eager to see what Pixelgrade would do with the new block editor, and thought “wow, all of these cool layouts in Osteria would work great as gutenblocks.”
In terms of theme compatibility, our portfolio is split in two: themes that used the regular editing experience without any custom fields; these themes have already been updatedto be compatible with the Gutenberg editor and the transition should be painless.The themes in this category are Patch, Hive, Gema, Noto, Vasco, Julia, Felt, Jason, and Silk.
Hmm. Not a great start.
Themes that use custom editing experiences with multiple custom fields and meta boxes; these themes will be much harder to be made compatible and we will tackle them to the best of our abilities; some of them have such a custom workflow that the best option for them is to stick with the classic editor as too many things might break when switching.The themes in this category are Rosa, Osteria, Listable, Fargo, Noah, Timber, Mies, Pile, Heap, Border, Lens, and Bucket.
Crap. One downside to the fast rollout of the new editor is that a lot of studios simply did not have the resources nor time to make all of their themes compatible.
So I was faced with a decision, scrap Osteria or Gutenify it. I chose the latter.
Into the code…
The first thing I needed to take a look at was how would I remove Gridable. By disabling Gridable, I essentially would lose all of the layout on my Homepage, Events, Venues, and Proposals pages, basically four out of five main pages on the site.
But the good news was that this plugin was not required to layout the theme. I broke the new project into three steps:
Find a block plugin to extend the default ‘columns block’.
Replicate the column and row layout laid out by Gridable.
Create new CSS classes and pull in theme styling to recreate the look of the old layout
I will admit, there was a fair amount of work to make this conversion, but as I got further into the project things began to feel good.
Ideally, using the core editor to generate content should help with the performance of the site. Less plugins, less resource demand. Also, Gutenberg does create pretty decent frontend code.
Taking this approach futureproofed my site.
Step One – A new plugin
Gridable was decidely not very useful. After working with Kadence Blocks on my new blog rebrand, I decided to try out CoBlocks to see how they compared.
CoBlocks is developed by Rich Tabor, and is a very intuitive block library. Many developers are creating ‘block suites’ that offer a lot of block functionality right out of the box.
For now, I’ve mostly stuck to the row block, as it provides a much more interactive column layout than the default column block.
Using CoBlocks I was able to replicate, and in most instances surpass, the functionality of Gridable without much trouble. I especially like that I can add CSS classes to every block right from the block sidebar.
Lastly, I found reusable blocks incredibly useful, as you’ll see below.
Venue Layout
One of the nicest layouts is in Osteria is the Functions section, which I used to show off the list of venues we frequent. This required creating two different reusable blocks: Venue Panel Left and Venue Panel Right
Top – Venue Panel Right | Bottom – Venue Panel Left
As you can see, the blue lines denote the CoBlocks rows and columns. I assigned the row a class, such as ‘venue-panel-right’ under Advanced, then assigned the image its own class for further CSS styling.
Once I had the two panel alignments fleshed out in blocks, I simply clicked on the row block and saved it as a reusable block.
Now I can reuse this layout for a limitless number of changing venue halls – great!
Here’s a fun scenario, let’s say we have a blog on a self-hosted site but we want to transfer its contents to WordPress.com. How would we do that?
Export
The first step would be to export the content from our current site. Most content managers have an export tool, WordPress.org sites have many.
In your WordPress dashboard, look on the sidebar and find the Tools tab, then select Export.
On the following page you will be asked which content types you would like to export, I chose All Content, though you could export them one at a time.
When you’re ready, click Download Export File and save it to a location of your choosing.
Signup
Now, boot up WordPress.com and create a username or login. Once you’re successfully logged into your account we will go ahead and create a new site.
Follow the four step wizard. For step one I chose to use a business site, there really isn’t too much of a difference, so choose something close to what your end goal is.
Then, select a great name. This will be your free WordPress.com subdomain, i.e: mycoolsite.wordpress.com. You will have the option to add a custom domain at a later point.
On step three you will be asked to choose from three WordPress.com themes, feel free to skip this part, you can always add your theme once you’re set up and have access to the full theme showcase.
Step four will show you the different plans offered for WordPress.com. If you are just starting out, you may wish to begin with a free plan and upgrade later. The upgrades offer powerful features such as larger storage, video hosting, ad placement, and free custom domains. For this exercise, I will choose a Premium Upgrade.
You can pay with credit, debit, or Paypal. If you have a coupon code you can enter it by clicking the ‘Have a coupon code?’ option on the left. Complete the checkout process then continue on to the next page.
The next page offers a few suggestions on what to do next depending on the upgrade you choose. With the Premium Upgrade, I can choose from hundreds of premium themes, add video and audio to my posts, use the WordAds platform to monetize my site or use the $100 credit towards a Google Ads campaign.
Let’s import our content from the old site and then set up a custom domain.
Import
If you click on Back to my site or the My Sites tab in the upper left-hand corner, you should be brought to your Site Admin:
Note! You might want to set your site to Private while you set it up. You can do this by going to Settings -> General and scroll down to Privacy.
While we are on this page, scroll down a bit further to find the Import and Export settings. Click on import:
On the import page, click Start Import, then drag the .XML file you exported or locate it through the explorer by clicking on the upload area.
Importing can take a few minutes depending on how big of a file you are uploading. We can now navigate safely away from this page and work on something else while we wait. Let’s go ahead and create our custom domain. Click on the Domains tab in the left-hand menu.
Setup
From this page, you can check your Plan details, see the different Plans, set up your email preferences and manage your domains. Since I purchased an upgraded plan I received a credit for a free domain, I can use this credit by clicking Claim Free Domain.
This button will take you to the same page that Add Domain would.
Enter in any domain you like and see if it is available, if you do not have a free credit then the associated price for the domain will be displayed. If you already own a domain from a different registrar like Namecheap or GoDaddy, then you can map this domain to your WordPress.com site by clicking Already own a domain?
You may wish to add a custom email to your WordPress.com site. By default, your WordPress.com site will redirect any contact form submissions to the email associated with your account. But if you would like a fancy [email protected]or something similar, you will need to set up a third party email host. G Suite is a great option and is offered for $5/month/user, if you sign up on this screen you will get two months free. Otherwise, click no thanks and we can take a look at a free option.
On the last page, you will be offered a privacy feature for $8.00/year. If you are using your free domain credit then this option will also be included for free. I highly recommend this feature. When you register a domain your domain information is registered with ICANN. This is a standard for domain registration. The drawback is that your information becomes public and spammers will crawl ICANN for this information and then begin calling, emailing, and attempt to contact you to sell you products. If you select the privacy option you can hide this information.
Once you are finished you should land on this confirmation page. Domains will typically take 48-72 hours to fully propagate, otherwise known as finish being set up. Your domain may become active immediately but sometimes it may take a bit of time. Just keep an eye out and soon enough it should begin working as expected.
If you go back to the Domains page you should see a green Primary Domain tag next to your new custom domain, this means that we selected this domain as our domain for this blog.
If that is not the case, you can manually set your primary domain by clicking on the desired domain, then click Make Primary.
Subdomain
Now that our custom domain is setup, let’s go ahead and add a subdomain and point it towards a tumblr blog page. A subdomain allows you to create a specific section of your site that is a bit different than the regular site content i.e. tumblr.wp08012017.com. I would use wp08012017.com to talk about one topic while the tumblr portion would direct you to my tumblr page which will be separate from my WordPress blog. You often see subdomains used with e-commerce shops that are hosted on a service outside of WordPress.com such as Squarespace.
First, click on your custom domain and then scroll down to Name Servers and DNS. On the next page, select DNS Records.
From here, change the type to CNAME, then enter a subdomain such as tumblr. Then, for the alias of portion type in domains.tumblr.com. Click Add New DNS Record.
Now head on over to your Tumblr account and log in. If you do not have one, create one. Go to your desired Tumblr blog and adjust the settings on its front page like so:
Click the pencil icon next to your username and select Use a custom domain. Add your subdomain from the DNS record we just created on WordPress.com. Click Test domain and you should see a green check mark icon appear next to the subdomain. Click Save.
Now when I type in tumblr.wp08012917.com I should be brought to the public facing side of my Tumblr blog. Cool!
Email
While we are in the domain records, let’s add on a free email service called Zoho.
Go to Zoho.com. Create a profile and work through the setup wizard and choose the free plan. You will eventually reach a page that looks like:
Click on Setup yourdomain.com in Zoho. On the next page you will see a code under Name/Host/Alias/CNAME starting with zb, copy this code and go to your WordPress.com Domains tab. Click on your custom domain, then go to Nameservers and DNS records. At the bottom click on Zoho mail:
Add your zb code where it says Zoho Mail CNAME zb code: then click Set up Zoho Mail.
Heads up! If you already have a Zoho account, log in and then go to home.zoho.com/home. Scroll down to Email & Collaboration then click Mail. Click on “Add your existing domain for Email Hosting…” and Proceed. Then, click on Add Domain:
On the next page, select WordPress from the list, then copy the zb code from here.
Back to WordPress.com, under DNS Records -> Zoho Mail we can add the zb code and click Set up Zoho Mail. You should see a green “Hooray” success notification.
The next step is to click CNAME Verification on Zoho to verify the CNAME record we just added to our WordPress blog.
This process should have automatically created your MX (Mail eXchange) records, go to DNS Records to double check. Your MX Records should look like this:
If not, go ahead and add an MX record for the following:
mx.zoho.com 10
mx2.zoho.com 20
At this point your custom email should work, go ahead and send an email from Zoho and also send an email to your new address and check your inbox on Zoho.
Theme
Suppose the XML file we are importing to WordPress.com is for a client and they do not know what their theme is. One easy way to find this information, also supposing we could not access their admin section, is to right click on their website and go to Inspect (if you’re in Chrome). From the Chrome Inspector, we can press Ctrl/Cmd F and search for theme. This should usually allow you to see their theme file structure and glean what the theme name is:
Now we can search for the Argent theme on WordPress.com and activate it.
When you activate a theme you will have to change a few settings in order to recreate the look and feel of the old site. Sometimes you will run into issues where images did not correctly transfer via the XML file. Other times you will notice that some custom CSS was added to make the header look a certain way. Occasionally, the theme may activate a few widgets as placeholders, these may need to be removed or changed.
A change from a WordPress.org site to WordPress.com is usually easier than transferring the data from a different CMS software. If the content is from another software, you may need to redesign the site which would require a bit more work. Look through the theme repo and try to find a theme that closely mirrors your old site’s features and style, then try to adjust as you go.
Wrap Up
This was a long post, but we managed to cover a decent amount of the WordPress.com environment. Let’s recap:
Added a new blog
Upgraded our account to Premium
Set the blog visibility to Private
Added a subdomain and pointed it to our Tumblr page
Added a Custom Domain
Created a custom email with ZoHo
And discovered/setup the Argent theme
Not bad! Feel free to post any questions in the comments.
Now that you have great content you will probably want to share it. Sure, you could, and should, manually post your content across all of your social media platforms. But why not allow your viewers to share the content? WordPress.com has sharing buttons baked right into your website. Go to Sharing -> Connections in your Site Admin and begin connecting your social media accounts. WordPress supports many popular platforms such as Facebook, Twitter, Google Plus, Linkedin, Tumblr, and Path. You can also connect your Google Account in order to load your Google Photos into your WordPress Media Library.
Once you have your accounts connected, click on Sharing Buttons at the top of the page.
From here you can modify your sharing buttons. By clicking Edit Sharing Buttons you can add or remove which social networks appear, you can also change the order they appear in.
The Button Style is how the buttons will appear such as an Icon with its associated text, official buttons, or just the icon or text only.
In the Options section you can decide which pages your sharing buttons appear on. You can also include your Twitter tag from here. Make sure to save your changes!
People
The People section is divided into three tabs, Team, Followers, and Email Followers.
In the Team section, you can view a list of all of the people who have access to your site in some compacity. You can also give and revoke permissions from this screen.
The Followers section lists all of the people who follow your site, these individuals receive notifications when you post content. You can remove these Followers and they will stop receiving notifications until they choose to follow your site again.
Plugins
The Plugins section is available to view for all users, but only Business plans can take advantage of this powerful new feature. On the Plugins page, you can view and edit your Active and Inactive plugins as well as view available updates. You can also edit all of your plugins at once by clicking Edit All.
If you click on Add you can browse the WordPress plugin repository for new plugins. There are three quick pick sections called Featured, Popular, and New.
You can also use the search field look up plugins you already know about. The Calypso UI on WordPress.com has a few draw backs at this particular time. The UI works fantastically and provides a lightning fast user experience, but a lot of plugins are set up to integrate into the old WP-Admin dashboard. For most plugins, you will need to visit your WP-Admin to make adjustments to the settings.
Domains
The Domain section also hosts the settings for your Upgrade Plan. Under My Plan you can view the details and benefits of your current plan with links to certain settings. The Plans section is a great place to discover the differences between the upgrades and make any necessary changes.
The Domains tab allows you to Add Domains and manage settings for your domains such as whether your domain is mapped from a different registrar or which domain records you choose to use.
You can also manage your domain’s nameserver and DNS from this tab as well as begin the process to transfer your domain to another registrar.
When you add a custom domain you gain access to the G Suite email extension for $5.00 per user/month. If you add G Suite you can have a custom email address with your domain address such as [email protected], gain 30gb of storage space on Google Drive, and access to all of the Google Apps.
Settings
General
The General section has three sub sections:
Site Profile – From this section, you can add an icon for your site, change the Site Title and Tagline.
Privacy – By default, your site is set to Public and is visible to everyone and search engines. If you wish for your site to not be indexed by search engines you can set it to Hidden. Note: Hidden sites are still visible to the public, they are just not indexed by search engines.
Site Tools – From here you can run a variety of importers, most specifically importing an XML file from another WordPress installation. You can also export different content from your site.
Writing
In the Writing section, you can manage many different content types associated with publishing on WordPress.com.
In a free installation, you can add and remove Categories and Tags, set your Default Post Format and Date and Time Format and choose how many posts show per page.
You can also activate the Testimonial and Portfolio Projects content types from this page and set how many instances of each appear on their respective pages.
When you upgrade to paid plans you will gain access to a number of other tools such as Infinite Scroll, Photon, and Video Hosting options.
Discussion
Default Article Settings – You can notify other blogs that you link to as well as get notified when another site links to your blog. You can also enable comments on your blog posts.
Comments – Commenting is a great feature for your blog and allows your users to leave feedback and discuss your articles. You can require the comment author to leave their name and email and be logged in to WordPress. You can also close comments on posts after x amount of days, control how deeply nested comments can go, decided how many comments appear on the page and the order the comments appear in.
E-mail me whenever – Control when WordPress notifies you of comments posts, comments held for moderation, sharing activity on my posts.
Before a comment appears – You can choose whether comments must be approved before they are posted and also whether the author of the comment has had approved comments in the past, this provides an added layer of spam security.
Comment Moderation & Blacklist – You can also adjust your conditions for spam filtering. A lot of links in a comment is characteristic of a spam comment and can be screened before posting. Additionally, you can screen for certain words, URLs, e-mails, or IPs to moderate or blacklist.
Traffic
In the Traffic section, you can enable the Related Posts module as showcased in my Jetpack review. Another feature is the Accelerated Mobile pages (AMP) module. AMP serves a slimmed down version of your site for mobile devices. If you dislike the slimmed down look you can disable AMP from this section.
If you upgrade to a Business Plan you can access the SEO Tools module and also add Google Analytics to your site for more in-depth SEO analysis.
If you wish to view your sites XMP sitemap you can do so from this section. An XML sitemap is automatically generated for your WordPress.com blog.
If you also wish to verify your site with Google, Bing, Pinterest, and Yandex, you can add in their verification code at the bottom of this page.
Security
If you upgrade to the Business Plan you will gain access to the Security section. As noted in my Jetpack Security Review, the Jetpack Monitor, Brute Force Protection, Spam Filtering, and WordPress.com Sign In modules are essential website security upgrades. Jetpack Monitor will notify you if your website is inaccessible and for how long your site was down. Brute Force Protection prevents spammers from guessing your login, a common vector for site hacking. Spam Filtering is managed by Automattic’s Akismet service and is a great way to filter out comment and contact form spam. And WordPress.com Sign In allows you to set up two-factor authentication as a second line of defense against brute force hacking.
Wrap Up
WordPress is a powerful blogging software that has an extensive list of features that any website owner could benefit from. Depending on your budget, there is a WordPress plan for you.
In part one we looked at how to set up a blog on WordPress.com and choose a theme, now we need to add content.
Publish Content
Now that your site is set up, looking stylish, and exudes a sense of you, it is time to add some content. Content is king. Creating great content is the most trusted way to gain traffic, so think carefully. There are a variety of different content types on WordPress.com, let’s go over a few of them.
Posts
You may see the term ‘post-type,’ try to avoid confusing this with a ‘post.’ In programming, a POST is a method of outputting data to the screen. So a ‘post-type’ is a type of data, such as a page, image or video. Confusingly, the advent of ‘posting’ stuff on the internet has created what we now commonly refer to as a ‘blog post’ or simply, a ‘post.’
Keeping that in mind, a post is typically dated, shows the author, category, any associated tags, and usually appears in reverse chronological order moving down your blog as you post new articles. Posts are browsable in the Reader where your potential fans can find them under the tags you assign to them.
Pages
Pages are a post-type that are typically reserved for more static, timeless content such as an About or Contact me page. If you plan to build out a business website you would set your homepage as a static page, instead of the default posts page which would be used as the standard blog layout.
The Editor
When you are ready to begin writing a post you can access the Editor in two ways, by going to My Sites -> Posts or My Sites -> Pages and adding a new post or page. In the editor, you can format your content in a variety of ways. Along the top of the editor are your typical editing tools such as bold, italic, alignment etc.
If you wish to insert an image you can do so by clicking the + button and selecting Add Media, alternatively, you can drag and drop an image from your desktop to the editor.
If you click Add Media you will be brought to the Media Library, once the file uploads you can click it and add the image to the page by selecting Insert. You can also edit the image details by clicking Edit. Once the image is in your post you can adjust its alignment and size.
When you’re ready to publish a post you can choose to add categories and tags to improve your content’s organization, tags will also help your posts show up in the Reader.
Pages do not use tags and categories, therefore the page editor will not have tabs for these options. Instead, you will see a section titled Page Attributes. This section lets you create parent and child pages or change the order of pages.
Along the right side of the editor in the dropdown tabs are a number of page features.
Media Library
The Media Library hosts all of your pictures, videos, documents, and audio. When you click add an upload box will appear, choose any type of media from .mp3 to .pdf and click open. Additionally, you can drag and drop media right onto the screen.
If you select a media item and click Edit you can add a title, caption, alt text, description, and copy the URL of the media item in case you want to use it elsewhere. Below that you should see file data for the selected item.
You also have the option to edit the image itself such as rotating, changing the aspect ratio (cropping), or flipping the image.
When you are in a post or page editor you can access the Media Library by clicking the plus icon then selecting media. From here you can add one, or many, items. If you select multiple images you will have a blue ‘Continue’ button instead of ‘Insert,’ selecting Continue will take you to the image gallery options.
From here you can change the layout, order and what each image will link to when clicked. This is a great way to add some style to your blog with perhaps a slideshow, carousel or tile mosaic.
Menus
Once you begin publishing pages, you may wish to create a menu to help your users navigate your site. Head to My Sites -> Customize then click the Menu section. Here you can view your theme’s menu locations, add menu items that link to a page on your site, a link to other sites, a category or tag, or one of your posts. To reorder the menu, you can simply click and drag the rows around. If you tug the row slightly to the right you can nest items within each other.
A few themes do not support menus, though this is rare. You can use the Custom Menu widget in your theme’s sidebar to display a menu. I will cover this in the next section.
For more advanced menu options you can navigate to the WP-Admin section of your site then Menus in the sidebar.
Adding Widgets
Widgets are built-in blocks of code that provide expansive features for your website. WordPress.com includes many commonly used features such as Instagram feeds, post archives, countdown clocks, audio, calendars and much more.
To begin adding widgets to your site you need to go to the theme customizer under Themes -> Customize. Scroll down the widgets tab and choose a widget area. Not all themes are created equally, some have many areas designated for widgets, others do not.
Choose the desired widget area, then click Add Widget.
Widgets can also be customized further with the Advanced CSS module found in the Premium and Business plans. You can also conditionally adjust their visibility by clicking the Visibility button at the bottom of the widget. This lets you conditionally show or hide the widget depending on certain criteria such as ‘Is this the homepage?’
Here are all the Widgets:
Akismet Widget – Display the number of spam comments Akismet has caught. (not quite sure why you would want this.)
Archives – A monthly archive of your site’s Posts.
Audio – Displays an audio player.
Authors – Display blogs authors with avatars and recent posts.
Blogs I Follow – Display linked images for the blogs you follow.
Blog Stats – Show a hit counter for your blog.
Calendar – A calendar of your site’s Posts.
Categories – A list or dropdown of categories.
Category Cloud – Your most used categories in cloud format.
Contact Info & Map – Display a map with your location, hours, and contact information.
Custom Menu – Add a custom menu to your sidebar.
Display WordPress Posts – Displays a list of recent posts from another WordPress.com or Jetpack-enabled blog.
EU Cookie Law Banner – Display a banner for compliance with the EU Cookie Law.
Facebook Page Plugin – Use the Facebook Page Plugin to connect visitors to your Facebook Page.
Flickr – Display your recent Flickr photos.
Follow Blog – Add an email signup form to allow people to follow your blog.
Follow Button – Add a WordPress.com follow button to allow people to follow your blog easier.
Gallery – Display a photo gallery or slideshow.
Goodreads – Display your books from Goodreads.
Google Translate – Automatic translation of your site content.
Gravatar – Insert a Gravatar image.
Gravatar Profile – Display a mini version of your Gravatar Profile.
Image – Displays an image.
Instagram – Display your latest Instagram photos.
Internet Defense League – Show our support for the Internet Defense League.
Links – Your blogroll.
MailChimp Subscriber Popup – Allows displaying a popup subscription form to visitors.
Milestone – Display a countdown to a certain date.
My Community – A sampling of users from your blog.
Pages – A list of your site’s Pages.
Posts I Like – A list of the posts I most recently liked.
Recent Comments – Displays your site’s most recent comments.
Recent Posts – Your site’s most recent Posts.
RSS – Entries from any RSS or Atom feed.
RSS Links – Links to your blog’s RSS feeds.
Search – A search form for your site.
Social Icons – Add social-media icons to your site.
Tag Cloud – Your most-used tags in cloud format.
Text – Arbitrary txt or html (great for adding html buttons or shortcodes).
Tlk.io Webchat – Add a tlk.io webchat. (Actually pretty awesome)
Top Posts & Pages – Shows your most viewed posts and pages.
Twitter Timeline – Display an official twitter embedded Timeline widget.
Upcoming Events – Display upcoming events from an iCalendar feed.
Video – Displays a video from YouTube, Vimeo, or another provider.
Get Connected – Become Part of the Community
Now that you have created some great content, with flashy widgets and imagery, you need to begin showing it off to the WordPress community. One important feature of WordPress are tags. As we saw during our Reader section, people can discover new topics by typing in tags that they want to read about such as Photography or Medicine. Adding tags to your content helps it show in other user’s Readers, which in turn leads to more traffic to your blog.
Tags
Tags also are useful for organizing your content on your own blog. You can even create tag clouds in your sidebar with a simple widget, this can help move traffic around your blog. You should aim to use both specific and broad tags in order to reach a wide range of potential users. Using ‘’skateboards’’ and ‘’Tony Hawk’’ will attract a wide group of skaters, and also people looking for more specific material such as ‘Tony Hawk Pro Skater’ the video game. Keep all of this in mind when tagging material.
A few tips for tagging:
Including more than 15 tags or categories on a post will disqualify it from showing in the Reader
Your blog must be set to public, go to My Sites -> Settings -> General to confirm your privacy settings.
If you regularly post offensive material your blog may be flagged.
If you misuse the tag feature such as misleading tags, questionable affiliate links, marketing material and unoriginal content, your blog will not appear in the Reader.
Like and Comment on other blogs
While you browse the Reader, make sure to like and comment on other blogs. By liking and commenting on a blog you open a dialogue which may gain you followers. You can like another post right from the Reader by clicking the ‘start’ icon, or comment icon. You can also visit the blog by clicking visit.
Connect your other social media accounts
You can use your site as a hub for posting to all your social media with just one click. By utilizing the Publicize tool you can write a post, schedule it, and post to all your connected social media accounts at once. Go to your dashboard and click Sharing. Under the Connections tab you can connect anything from Facebook to Tumblr.
Once connected, you can add a short custom message from the post editor that will be previewed when your post is posted on each social media site.
From this Sharing page you can also add Sharing Buttons to your posts which allows your users to share your content to popular social media sites, this is a great way to gain followers.
Utilize your site statistics
The Stats page can give you a look into your visitor’s behavioral patterns, use this data to tailor your content and increase your traffic.
Go to your Insights screen and look around. Try and cross compare your typically posting schedule with the average traffic spikes, can you modify your schedule to garner more traffic during your blogs busy periods?
You can also look at your blogs All Time Views and find the days where you had the most traffic, try and figure out what content caused this spike in traffic. Did your blog get shared to a notable website? Was the content exceptionally well written and topical? These insights can help you cater to trending topics in your niche.
You can also see what countries your visitors are viewing your content from, you can even narrow the content down to which pages or posts are being viewed most often.
An important feature is the Referrers section. Referrers are who is directing traffic to your site. Direct referrals are when traffic directly types in your address, otherwise sites who link to your site should be listed with the amount of traffic they help generate. Linking to sites who generate traffic for you is a great way to show appreciation.
If you really want to get into the nitty gritty of your site stats, you may wish to consider adding the Google Analytics feature to your site by upgrading to the Business plan.
Category & Tag Pages
Two lesser known features of WordPress are category and tag pages. When you tag posts or add them to categories you can also create pages that aggregate these posts by their specific category or tag. All you have to do to display these pages is go to the Customizer -> Menu section and add a new menu item.
Instead of adding a page or post, add a category or tag menu item. Once you have saved these changes, look for the category or tag in the menu. The category or tag page should list your posts like a standard blog, but filtered by the specific tag or category.
Portfolios & Testimonial Modules
You can activate the Portfolio and Testimonial modules from your Site Admin by going to Settings -> Writing and then scroll down to Content Types.
Once activated you will see two new options in your sidebar.
Portfolios
To add a portfolio project, click Add. You will be brought to the post editor but as you will notice the sidebar page attributes are a bit different. A portfolio project is part of the portfolio in the same way that a painting is just one piece of an artist’s body of work. The portfolio project can be described, have images, and is arranged by Project Type and Project Tags, these are similar to categories and tags of posts.
For example, if you are a graphic designer you would probably have a lot of website layouts, perhaps some ‘brand’ work, maybe some logos, but as is the case in each of these examples, they all fit into nice groups. These would be your project types. You could then further group them with tags like ‘Aramark Corporation,’ because your Aramark logos and website designs may be in different project types, but with this tag you could list them together.
Once you have created your portfolio project you can then view them in a number of different ways:
Since the /portfolio URL is reserved for your portfolio page, please do not create any pages called ‘portfolio.’ If you wish to display your portfolio on any other page or post, you can use the Portfolio Shortcode [portfolio]:
Attributes
The portfolio shortcode accepts a variety of attributes to sort your projects:
display_types: display Project Types – displayed by default. (true/false)
display_tags: display Project Tag – displayed by default. (true/false)
display_content: display project content – displayed by default. (true/false)
display_author: display project author name – hidden by default. (true/false)
include_type: display specific Project Types. Defaults to all. (comma-separated list of Project Type slugs)
include_tag: display specific Project Tags. Defaults to all. (comma-separated list of Project Tag slugs)
columns: number of columns in shortcode. Defaults to 2. (number, 1-6)
showposts: number of projects to display. Defaults to all. (number)
order: display projects in ascending or descending order. Defaults to ASC for sorting in ascending order, but you can reverse the order by using DESC to display projects in descending order instead. (ASC/DESC)
orderby: sort projects by different criteria, including author name, project title, and even rand to display in a random order. Defaults to sorting by date. (author, date, title, rand)
Here is another example of the Portfolio Shortcode but with a bit of pizazz:
Here I am displaying a three column grid with a max of 9 projects. This grid will only display my projects by Project Type and only the types I list, in this instance, I am displaying reviews and featured project types. I could easily change this to display by project tags if I desired. Lastly, I set my portfolio to randomize the order of the projects.
Testimonials
Testimonials work in a very similar way to Portfolios. Click on the Testimonials-> Add New and fill out the editor with the name of whoever is giving a great review, their kudos, and an image of them if that is appropriate for your site design. There are no tags or categories for testimonials, but you can adjust the order they appear in from the page attributes tab.
And just like the Portfolio shortcode, there is also a testimonial shortcode: [testimonials]
image: display the featured image. (true/false) Defaults to true.
columns: number of columns in shortcode. Defaults to 1. (number, 1-6)
showposts: number of testimonials to display. Defaults to all. (number)
order: display testimonials in ascending or descending chronological order. Defaults to ASC for sorting in ascending order, but you can reverse the order by using DESC to display testimonials in descending order instead. (ASC/DESC)
orderby: sort testimonials by different criteria, including author name, testimonial title, and even rand to display in a random order. Defaults to sorting by date. (author, date, title, rand)
In this example your testimonials will be listed in one column, show 10 posts, no image, and in a random order.
Up Next
WordPress has a lot of great content types that can help your website look more professional and dynamic. Up next I will discuss the configuration settings for WordPress.com.
