Site Building with WordPress and Elementor

Site Building with WordPress and Elementor

One of the biggest challenges for folks new to building a website with WordPress is that it feels very much like writing/blogging software out of the box. Yes, you can create pages, but as soon as you want to structure information in columns or do anything more complex than images and text you will quickly find you need to find a theme or a handful of plugins to get the job done (and if you don't know what you don't know, that's a huge hurdle). "Site Builder" plugins are becoming more and more popular and you even see more themes integrating them into their frameworks these days. Some are pretty good, some suck really badly. One I really like and wanted to demonstrate as a way to quickly get up and running with a WordPress site is Elementor which is both free (there's a Pro version that has more features I'll discuss in a bit) and incredibly user-friendly with a lot of great options.

Rather than just talk about the various features let's go through the process of building out a demo site to see what Elementor has to offer. To start we'll fire up a WordPress install on Reclaim Hosting. Nothing too crazy, you're typical TwentyEighteen theme with the big ass succulent.

Site Building with WordPress and Elementor

Since this isn't going to be a blog I'm going to go to Settings > Reading and change the homepage to be the About page that WordPress creates by default.

Site Building with WordPress and Elementor

Then let's install the Elementor plugin to really get to the fun stuff.

Site Building with WordPress and Elementor

If we were to look at our site at this point nothing much has changed. We have the About page showing by default on the homepage. Let's click that Edit Page button to start making some changes.

Site Building with WordPress and Elementor

In addition to your standard Post/Page editor functions we see a big Edit with Elementor button at the top. But before we hit that I want to also draw your attention to the Page Templates in the righthand sidebar. Elementor offers templates to go full width instead of being limited to the layout of the theme we're working with (if you look above at the previous screenshot all the content is pushed to the right which we don't want). They also have a Canvas option which is awesome because it essentially nukes the whole theme content and gives us an empty workspace to build from. I'll be using that so I select it and click Update.

Site Building with WordPress and Elementor

Site Building with WordPress and Elementor

Now let's hit that Edit with Elementor button and start building out the site. You'll see we're taken to an interface that looks a lot more like the WordPress Customizer than the traditional page editor. We can add and edit items via the lefthand sidebar and interact directly with them on the site on the righthand preview seeing the site exactly as it will look to visitors.

Site Building with WordPress and Elementor

WordPress added some demo content to the About page that I don't need so I highlight over that and click the X to remove that text block.

Site Building with WordPress and Elementor

Now below that we can add a new section for content. Let's start by looking at the template options Elementor comes with which is a great way to kickstart building a site rather than starting from scratch. Click Add Template and you're taken to a library of different full page layouts complete with demo content to choose from. Fair warning here, you will find templates that are "Pro Only" meaning this is where you'd need a paid version of the plugin to use those (and hey, if you like the plugin maybe it's worth throwing some money at the developers!), but there are a lot of great free options.

Site Building with WordPress and Elementor

I chose a simple "About Page" template and now my editor interface has a variety of content that I can start modifying to put in my own information.

Site Building with WordPress and Elementor

You'll find you can simply click in the various boxes and edit text directly as well as modify things in more detail using the lefthand sidebar which dynamically changes when an element of the site is selected.

Site Building with WordPress and Elementor

Site Building with WordPress and Elementor

Elementor also has options in the lower left to see how the site will display on tablets and mobile devices.

Site Building with WordPress and Elementor

Going back quickly to the same area where we added Templates you'll notice there's a tab for Blocks as well. Templates are full page designs whereas Blocks are just small snippets of content (an FAQ section, a Call to Action, etc).

Site Building with WordPress and Elementor

You can also build from scratch and add specific elements to your page to build out your own layout. You would create a new section which it lets you choose how many columns you'd like.

Site Building with WordPress and Elementor

Then you can drag elements from the left sidebar over and Elementor has a large library of widgets to choose from with everything from Text, Images, Videos, Maps, Buttons as well as dynamic content like Blog Posts or Tags and Categories from your site.

Site Building with WordPress and Elementor

When you drag an item out to a block you can then edit the content of that element in the sidebar.

Site Building with WordPress and Elementor

There is quite a bit more to Elementor but that covers the basics of the plugin and how you can use it with WordPress to quickly build out dynamic responsive websites that feel less like a blog and more like a full-fledged website. If you start on WordPress and immediately feel out of your element at getting what is in your head on the screen I'd encourage you to give this method a shot.

Reclaiming Open with WordPress

I woke up to a few tweets about Reclaim Hosting and the #deletefacebook movement. It’s been hard for me to get excited about Facebook either way. I see it as one of the more depressing malls of the web, and I try and stay away as much as possible. And beyond their horrific practices with collecting personal data, I have been equally dismayed over the past several years by their refusal to curtail predatory catfishing when brought to their attention again and again. It seems like expecting anything else from Facebook would be tantamount to expecting that Google’s “Don’t Be Evil” was anything more than a flattering slogan to sell an image.

Skeletor likes to feel evil

And while I tend to agree deleting your account is not necessarily a solution and data collection needs to be regulated more stringently as it soon will be in Europe, a part of me can’t help but think what did we expect? Whether hacked or handed over, did we really doubt that sooner or later we would pay dearly for the “free” services we have gorged ourselves on for more than a decade? I guess that makes the current moment of outrage seem a bit disingenuous, or at least somewhat absurd. In the end, to be a good citizen of the web you have to be willing to take some ownership of your online presence, and that means taking the time and spending a bit of money (although not all that much) to build something on an open platform outside the corporate spaces that have become ubiquitous because we’ve often settled for less when it comes to the open web. WordPress is my drug of choice, and 13 years later it remains a robust open source community that powers near a third of all sites on the web. More than that, it makes me feel like I have far more options through this tool then just about anything else I do online, which in turn allows me to define my presence to a much greater degree, not to mention build course sites, research sites, web services, and more.

So, thanks to the tweets from Laura and Howard this morning, I think this is what my talk for PressEd Conference will be about on Thursday. I have been struggling a bit with that talk given many other folks far smarter than me will have much more interesting things to share when it comes to WordPress in education. So, maybe my 20 tweets or so can be about why using WordPress in education is more relevant than ever given the trappings of a free, but not open, web seem to be coming home to roost presently. And while Facebook is certainly the most deserving of targets for public outrage, chances are they’re not alone in their practices by any stretch of the imagination as Doc Searls blogged about the other day:

What will happen when the Times, the New Yorker and other pubs own up to the simple fact that they are just as guilty as Facebook of leaking its readers’ data to other parties, for—in many if not most cases—God knows what purposes besides “interest-based” advertising? 

It’s invigorating and life-affirming to witness a broad movement of folks around the USA, led by some badass high schoolers, demand sane gun laws simply to ensure their safety at school. Something currently taken for granted here in Italy. That for me seems like a first order need—thinking of sending my kids to an American primary or secondary school only to wonder if they will make it home alive because politicians are in the NRA’s pocket is unconscionable. It’s a movement that is long overdue, and there are certainly many forces that helped give it the head of steam it has presently. I want to think the same could be true for reclaiming a bit of the open web, and would like to believe that the work a whole cadre of open educators have been pushing on for the last 10-15 years would be one practical approach, this is of particular interest to me given the perils of higher ed going down the data extraction in the name of personalization that is being pushed by the folks at EDUCAUSE under the banner of the Next Generation Digital Learning Environment (NGDLE). If we want to look at one space where the outrage around Facebook that might hit even closer to home in the context of education, it could be what companies will be extracting what data in the name of streamlined, integrated personalization environment that the NGDLE promises. Anyway, I’ll save some of this for my Tweetstorm on Thursday ?

Reclaiming WordPress Multisite

Lauren Brumfield already announced that we’re officially rolling out WordPress Multisite (WPMS) hosting at Reclaim. What’s more, she created an online calculator that provides transparent pricing going forward, which is a big part of why we’re finally announcing something we have done for years. While we’ve been pretty laser-focused on shared hosting and Domain of One’s Own for the last four years, we’ve still picked up more than a few WPMS instances. In fact, we jumped in at the deep-end of the pool when we started hosting the colossus that is VCU’s Rampages. As a result Tim was able to really fine-tune high demand WPMS environments like Rampages, and we’re in a situation where we can comfortably manage just about anything out there in higher ed.

It’s fun for me because I cut my teeth on WordPress Multiuser (even before it was multisite), and when Tim came onboard at UMW the first thing we asked him was how he felt about managing UMW Blogs. The rest is Reclaim history, he proved an insanely quick study and went from UMW Blogs to Hippie Hosting to Domain of One’s Own to Reclaim Hosting in two short years. That’s a resume!

back to the future, we really weren’t comfortable with announcing WPMS at Reclaim too early because we were experimenting with different setups across various data centers like AWS, Linode, and Digital Ocean, so things were always custom based on several factors which meant the pricing varied. But when Digital Ocean recently announced their new plans and pricing model, we were sure we had a solid setup through Digital Ocean that would allow us to stabilize our WPMS offerings as well as making them extremely competitive when it comes to pricing.

Before we could announce anything we had to reach out to all existing customers we and let them know of the new setup, for many of them this meant a significant savings. Once took care of that, we figured it was high time to officially announce that we are in the WPMS hosting business. So if you have a WPMS site you want to offload to external hosting, let’s talk. Pricing is simple: server, backups, and software licensing (Bitninja, cPanel, etc) at cost, whereas our monthly maintenance and management fees starts at $250 per month. This model finally allows us to decouple server and software costs from management demands, and establishes a baseline for what our time is worth to ensure you get the service we’re known for. It also makes clear that what you pay us for is not the hardware or software, but the peace of mind that tried and true experts are on the job. I mean let’s be honest here, this isn’t some hack outfit working from a ramshackle UMW office in duPont Hall trying to duct tape together some kind of chitty-chitty-bang-bang syndication solution, we’re professionals—and for that you must pay!

There Goes the Reclaim Neighborhood

Bryan Alexander has moved his forward facing blog/site bryanlaexander.org to Reclaim Hosting, so in other words there goes the neighborhood. Not long before severed feet start washing up on our virtual shores. There is no shortage of love on the bava for Bryan Alexander, and I do think the final coup will be getting Infocult off Typepad sometime soon—everyone has to have a dream. Two of the biggest blogging influences on the bava were D’Arcy Norman’s compulsive sharing of any and all edtech work he was working on (I just stole what he was doing with Drupal and did it for WordPress) and the bizarre, insane “Uncanny Informatics” that was Bryan’s Infocult. That were many other influences, but those two brilliantly framed the poles I wanted to oscillate between on this blog. So moving Bryan’s site from WordPress.com to Reclaim was cool for many reasons, and reinforces the essence of my last post quite well. Anyway, I’m blogging like an old timer here—but it’s my blog dammit! Anyway, the point of the post was to make a couple of quick observations about migrating Bryan’s site from wordpress.com to a stand alone WordPress instance. I think its interesting because when you’re migrating a site that’s your client’s bread and butter you don’t want to mess things up. Granted that moving between WordPress.com and a stand alone site is dead simple*, but things like images, embeds, and polls can get lost in the migration. Not to mention making sure they retain their wp.com followers/subscribers, widgets, theme, etc. [The theme was easy cause like the great bava, he is rocking Twenty Ten #4life.] And this is when I began realizing the genius of Jetpack. Jetpack not only enabled me to reproduce all the custom wp.com widgets like his Flickr photos, latest Tweets, email subscriptions, etc, but it also gave me seamless integration with Akismet and PollDaddy, which meant literally nothing was lost in the move. What’s more, when you have a significant number of email subscribers and RSS readers like Bryan, the fact that none of them are lost demonstrates how Automattic uses Jetpack as an umbilical cord between their various commercial services and the free, open source product that made it all possible. And then there are stats, added security, monitoring, backups, image hosting, etc. So, a day after the migration Bryan has access to a ton of different plugins and themes (not to mention the core code), but has lost none of the features wordpress.com provided—which is pretty brilliant. We’ll see if anything pops up in the immediate future, but outside the DNS caching pushing some folks to the old site, it’s been quite seamless. And if people do happen to comment on the old site while DNS is propagating (or Bryan shoots off another post too soon) nothing is lost given it is on the original infouclt.wordpress.com site. This might seem rudimentary to some folks, and I have done more than a few wordpress.com transfers now, but it struck me that if your whole livelihood revolves around your site, making a move like this seem trivial is amazing—so kudos to the good folks at Automattic for making it easy and to Bryan for becoming a reclaimer!
*Bryan had so many posts and comments that the export was broken up into 5 different XML files, which is the first time I have seen that happen. Uncanny informatics!

Using the Import/Export Tools in WordPress

Lately, I’ve been working with clients to move their website from WordPress.com to WordPress.org. With this request, I use the Import/Export tools to move the content from one site to the other. This tool bundles the content on the site into a .zip file which you can then move to another location. Disclaimer: It isn’t perfect, you only get the content of the site, so things like posts, pages, and settings on the site. The plugins, themes, and media arent’ included, so, if your site has a lot of media, or has a ton of plugins, this tool might not work for you. (I’m writing another post about a plugin that will move everything on the site for you so stay tuned).

As I’m writing to the clients with instructions on how to set up their site using these tools, I started looking for a tutorial that would walk them through the process. And can you believe it, there are no tutorials that show the process from start to finish? So I wanted to take the time to write the process down. This article will showcase the import/export tools within WordPress (.com and .org) the process is essentially the same for both, they just look a little different.

But wait, there are two versions of WordPress? Yes, there are, but they are run in different ways.  WordPress, in a nutshell, is an open-source content management software (if you want to look at a more in-depth explanation you can read about it here).  Automattic Inc. helps develop and maintain this software. We offer this software at Reclaim and users can install an instance on their domain, in fact, you’re reading this post on a WordPress installation.

WordPress.com is Automattic Inc.’s hosting company that runs the WordPress software explicitly. They offer free accounts with subdomains like meredithfierro.wordpress.com for free or users can purchase a domain. Then users can opt-in to pay a monthly fee to get full use of the software, like you would if you installed WordPress on your domain through your hosting company.


WordPress.com

Export:

The first thing you’ll want to do is export all of the content. Also, take note of the plugins and theme the site is using (this will save time on the other side).

  1.  Click ‘Settings’ under ‘Configure’ 
  2. Click ‘Export,’ under the ‘Site Tools’ section:
  3. From here you can choose the amount of content you’d like to export, or you can export the entire content on the website. When you’ve decided what to export, click ‘Export’: 
  4. WordPress begins to package the content together. When it finishes, a banner should appear at the top of the screen. Click ‘Download’: 

Continue reading “Using the Import/Export Tools in WordPress”

Directories for Domains: a Community Approach

Many of us in a certain subgenre of edtech have been working for a long time to try and use RSS to syndicate and aggregate posts from individual blogs into community sites. These sites are sometimes referred to as planet sites, mother blogs, aggregator sites, syndication hubs, etc. A good example of this is ds106, where posts are not only syndicated into the Blog Flow, but also the assignment bank—making for a richer, more targeted contextualization of student posts. Over the last seven years ds106 has syndicated more the 75,000 posts, providing a point of creative contact—if you will.

The syndication and aggregation for ds106 is all handled by FeedWordPress, which can grab the RSS feed of just about any publishing platform that exposes one. In order to simplify things, we’re using a Gravity Form to help automate the sign-up process. It’s far from a perfect setup, but it has been working fairly well for almost seven years now. In fact, it has been a template for other site aggregators, including the first Community directory site that Martha Burtis and Tim Owens built around UMW Domains in 2014 (which is no longer in use).   Continue reading “Directories for Domains: a Community Approach”

Installing and Customizing a Scalable WordPress Multisite with Linode’s StackScripts

I’ve been on a server admin crash course over the last 8 months or so, and I’ve been thoroughly enjoying myself. I have been fortunate to have the most patient and generous teacher I’ve ever studied under: the great Tim Owens. I truly have a deep respect for how much he has taught himself over the last 4 years, and trying to catch up with him gives me an even deeper appreciation of his mad skills. One of the turning points for Reclaim Hosting this semester has been taking on large-scale WordPress Multisite instances for institutions. We jumped in with both feet when we took over the hosting of VCU’s Ram Pages—a beast I have written about recently. Tim did a brilliant job scaling this extremely resource intensive WordPress Multisite, and I was eager to try my hand at the setup. Luckily Reclaim has no shortage of opportunities, and recently the University of North Carolina, Asheville was interested in experimenting with a pilot of WordPress Multisite, so I got my chance to work through the setup with a brand new install. Continue reading "Installing and Customizing a Scalable WordPress Multisite with Linode’s StackScripts"

Hosting VCU’s Ram Pages

Reclaim Hosting has been hosting VCU’s Ram Pages as of the beginning of the Spring semester. It reinforces for me there is nothing Tim Owens can’t do, another yet another example of the powerful ripple effects of #ds106 on edtech. We’ve been loath to proclaim victory too soon given what a beast Ram Pages is. And I thought we had a blogging revolution at UMW! In two short years Ram Pages has been home to over 16,000 blogs for 15,500 users. That’s nothing short of mind boggling. Tom Woodward—in his quiet, self-defacing way—has built and managed a blog empire at VCU’s ALT Lab, and over the last 6-8 months Tim and I have been trying to figure out how the hell we would migrate it cleanly given it can grow at intervals of 1000 users any given week.

Hosting VCU’s Ram Pages

We (royal for Tim) moved it over Christmas vacation on to a beefy Linode instance running Ubuntu, Varnish, and Nginx after sharding the database to 256. Yesterday we finally got the second backup solution working, which in addition to nightly snapshots we now have file-level, off-site backups through R1Soft Licenses (more on that in another post). This may be one of the largest, most active academic blogging systems in higher ed, and it is a real source of pride that we’re hosting it. And I saying this knowing full-well it is a total jinx [crosses fingers]….it’s been rock solid so far. Don’t ever question the power of Reclaiming!

Cleaning a Hacked WordPress Site

As I sit here painfully waiting on Godaddy's slow servers to download all of a customer's files so I can migrate them to Reclaim Hosting I figured I'd write up some thoughts on how I approach the problem of cleaning up a site that's been hacked. Not all WordPress hacks are equal, but understanding how the files that make up a WordPress install are organized will help with cleaning one up. So let's look at the directory structure and break it down.

WordPress 4.4.1 Directory Structure

Here we have a clean WordPress install that hasn't yet been setup. I know this because a file wp-config.php isn't present at the root directory. In addition to several files at the root of the directory that handle logging in, serving up content, and mail delivery, we also have 3 main folders: wp-admin, wp-content, and wp-includes. Here's a brief description of each:

wp-admin - When you login to the dashboard of WordPress you might notice the URL is /wp-admin. The wp-admin folder stores all WordPress files necessary to display and interact with the backend of WordPress.

wp-content - This is where the files and folders unique to this particular install will end up. Plugins and Themes have a place here as well as all images that are uploaded to WordPress.

wp-includes - General php classes and any javascript files and libraries that WordPress relies on are located here.

In addition to all those files your WordPress install has a database. This is typically only going to be seen through an admin area of your hosting provider. At Reclaim Hosting we provide phpMyAdmin through cPanel to view the databases in your account. The database stores all of the actual content (your posts, pages, site information, etc).

Knowing all of this we can start to understand what the unique aspects of a WordPress install are versus the files and folders that can easily be replaced. The unique content of a WordPress install consists of:

  • A wp-config.php file that has our database information.
  • A wp-content folder with our plugins, themes, and uploads.
  • A database

That's surprisingly it! Everything else can be replaced with a fresh copy from WordPress.org and your site would still be there. So now we've narrowed down the number of potentially hacked files, but we can go even further. For example we know that plugins and themes are all available in the WordPress repository so we can download fresh copies of those as well (if you use premium themes or plugins you'd need to get access to those again of course). That can be a time consuming process but wouldn't you rather spend the time now getting this right?

When cleaning up a site I also take that as an opportunity to check and see if there are any plugins or themes I don't need. For example if I'm running a non-default theme I can easily delete all of the TwentyX themes provided by WordPress. Remember we're trying to remove as many potential targets for exploits as possible.

Finally when all is said and done and you're back online the last thing to do is run a full scan of your install. I personally like the Wordfence plugin which makes this a straightforward process and can also protect your install from future malicious activity. There are options to check all plugins and themes as well as files outside of your WordPress install in the Wordfence settings, both of which I recommend turning on before doing a scan.

Cleaning up hacked installs is never a fun process and with WordPress powering over 25% of the web now it's become somewhat a large target. But hopefully these tips help you understand how to get a site back online and cleaned up in no time.

Cleaning a Hacked WordPress Site

As I sit here painfully waiting on Godaddy's slow servers to download all of a customer's files so I can migrate them to Reclaim Hosting I figured I'd write up some thoughts on how I approach the problem of cleaning up a site that's been hacked. Not all WordPress hacks are equal, but understanding how the files that make up a WordPress install are organized will help with cleaning one up. So let's look at the directory structure and break it down.

Here we have a clean WordPress install that hasn't yet been setup. I know this because a file wp-config.php isn't present at the root directory. In addition to several files at the root of the directory that handle logging in, serving up content, and mail delivery, we also have 3 main folders: wp-admin, wp-content, and wp-includes. Here's a brief description of each:

wp-admin - When you login to the dashboard of WordPress you might notice the URL is /wp-admin. The wp-admin folder stores all WordPress files necessary to display and interact with the backend of WordPress.

wp-content - This is where the files and folders unique to this particular install will end up. Plugins and Themes have a place here as well as all images that are uploaded to WordPress.

wp-includes - General php classes and any javascript files and libraries that WordPress relies on are located here.

In addition to all those files your WordPress install has a database. This is typically only going to be seen through an admin area of your hosting provider. At Reclaim Hosting we provide phpMyAdmin through cPanel to view the databases in your account. The database stores all of the actual content (your posts, pages, site information, etc).

Knowing all of this we can start to understand what the unique aspects of a WordPress install are versus the files and folders that can easily be replaced. The unique content of a WordPress install consists of:

  • A wp-config.php file that has our database information.
  • A wp-content folder with our plugins, themes, and uploads.
  • A database

That's surprisingly it! Everything else can be replaced with a fresh copy from WordPress.org and your site would still be there. So now we've narrowed down the number of potentially hacked files, but we can go even further. For example we know that plugins and themes are all available in the WordPress repository so we can download fresh copies of those as well (if you use premium themes or plugins you'd need to get access to those again of course). That can be a time consuming process but wouldn't you rather spend the time now getting this right?

When cleaning up a site I also take that as an opportunity to check and see if there are any plugins or themes I don't need. For example if I'm running a non-default theme I can easily delete all of the TwentyX themes provided by WordPress. Remember we're trying to remove as many potential targets for exploits as possible.

Finally when all is said and done and you're back online the last thing to do is run a full scan of your install. I personally like the Wordfence plugin which makes this a straightforward process and can also protect your install from future malicious activity. There are options to check all plugins and themes as well as files outside of your WordPress install in the Wordfence settings, both of which I recommend turning on before doing a scan.

Cleaning up hacked installs is never a fun process and with WordPress powering over 25% of the web now it's become somewhat a large target. But hopefully these tips help you understand how to get a site back online and cleaned up in no time.