01

Google Form to Google Sheets to Vue Website

When @cogdog & @twoodwar Were Building Websites From Google Spreadsheets Years Ago https://t.co/Im7oCecvpg — Keegan?Long-Wheeler (@KeeganSLW) February 28, 2018 This post from Keegan kicked of this demo.1 The goal is to create a pretty flexible template for using Google Forms to Google Sheets to simple website. I opted to do this one in Vue but may get around to doing it in plain JS or jquery if time allows. The first thing you need to do is make the form and put in some entries. You’ll be happier if your form prompts aren’t super long. Make them readable just keep them concise.2 Once you’ve made a few entries so you have some data to work with, publish your spreadsheet as HTML. File>Publish to the Web. Click OK and what not. Don’t bother going to that link as Google has made that a fake promise. You just need the ID of the document in your current view. It’ll be something painful like 12WsyLvtfIPJkCXgEXsRkrI6dS0_K6brJikZqzkQa8TU and is visible in the URL after the /d/ but before the /edit. You can see the spreadsheet here. It doesn’t really matter but !full transparency! With that ID in hand, you want to go to a URL like so. You could manipulate the number in the URL to hit different pages in the spreadsheet. https://spreadsheets.google.com/feeds/list/12WsyLvtfIPJkCXgEXsRkrI6dS0_K6brJikZqzkQa8TU/1/public/values?alt=json You should […]

26

Add Custom Field to WordPress API & Filter

I found myself in a strange situation where I needed to know if a page had a child. Natively the WP API lets you know if a page has a parent but not the reverse. First I had to write a function that writes some data to a custom field if a page has a child. Then I started writing this post and realized I needed to do the reverse and now I’ve written a function that writes data to a parent when the child is created. Now that I had the data being written to the custom field, I needed to make that data visible in the WP REST API. Luckily, Jeff put up a snippet for that not too long ago. Now I also wanted to be able to return data based on the contents of the has_children field. This filter1 does that. Now a URL like the one below will give me pages with children but without parents. /wp-json/wp/v2/pages?_embed&per_page=30&has_children=1&parent=0 This will help me make a fairly large menu structure more manageable and I figured having something like this all in one place might help someone else. 1 I usually call things ‘chunks’ of code but I’m trying to improve my vocab.

A screenshot of the site on codepen that has the three columns of html, css, and javascript visible.

Headless(-ish) WordPress Example

This is a bit of an odd one but possibly odd enough to be interesting. The Scenario We can’t run WordPress on the University servers but we’ve got a bunch of people who have content on WordPress and like that editing experience. They also want VCU domains which are much harder to get for off-site servers. The Proposal What if we take one of those sites and see what we can do with the REST API data in a headless1 HTML/JS/CSS only environment? I also wanted to keep it out of Vue or other larger javascript frameworks so it’d be less abstract to explain. At this point I am unsure that was a great choice but I can make a different choice next time. More Details The faculty member already had a WordPress site. It had a bunch of pages and had no posts. The faculty member also wanted the header image to change on various pages and for a sub-menu to be created on certain pages. The Proof of Concept – Step One HTML Shell I opted to sketch out the HTML portion loosely with Bootstrap 4. Initially, I’d gone to one of the HTML5Up templates but pulled back as it added a chunk more complexity than I needed initially. Plus, I knew Matt was going to handle taking […]

WP API Posts Plugin

This is a little plugin I wrote while working with Jon Becker to build out the Ed Leadership Hub site. Essentially, we wanted students to be able to fill out a quick form and build out a profile page. As is my my wont, I went the Gravity Forms route. They could give a short bio, twitter account, and their portfolio URL. We’ll be tying in the the posts via Feed WordPress but it seemed like more hassle than it was worth to map the author id to this page. Pretty fun to be able to build out a solution on-the-fly and since all students were going to be in rampages I didn’t have to worry about WP not being upgraded or running from a non-HTTPS server. This chunk of the plugin builds out the HTML from the shortcode. You can see the data-url, data-num elements being populated. There’s a few other things in there I haven’t yet activated. Using data elements is the easiest way I’ve seen to pass variables to the javascript . . . the javascript looks for the altlab-getsposts id and then pulls the data elements from it. Once again, there’s some extra stuff in there for down the road that I haven’t implemented here.

11

Community- Technically Speaking

Playing “Mah-Jong” at the Clubhouse of the Century Village Retirement Community. flickr photo by The U.S. National Archives shared with no copyright restriction (Flickr Commons) Marie has nice post summarizing the Georgetown Community presentation at Domains. And nowEvelyn’s post reminded me to write a post on a site instead of just in my head. The title of the presentation ‘Just a Community Organizer’ is a nod to the fact that community is hard to do. It can be hard technically but it’s often even more difficult on the human side. As Evelyn brought up . . . community is not created by the technical ability to bring content together. There are lots of ways this can succeed technically but fail socially–> The stuff is there but no one cares. At the same time, technology failures can prevent community from forming where you have all the other factors–> People want to see what’s going on but can’t find and interact with the stuff they want in reasonable ways. There’s also the idea that people might not know what they want to see (or how they want to see it) until it’s given as an option or scaffolded into as an action. Can we present content in ways that are novel and interesting that inspires curiosity and interaction? You can’t do that […]

editor screenshot

SPLOT-light?

So the other day I posted about how to make silent Google Form submissions. Then this morning I was looking around at headless CMS options1 and saw this one being advertised as being driven by Google Drive/Spreadsheets. Those two things came together as I mowed my lawn and I wondered if I couldn’t make a little rich text editor to construct a one-piece content creator/displayer using Google Sheets. That led to a little research into URL parameter limits. And then this evening I made this editor. The page uses Quill to take care of the rich text editor. It turns out there’s a whole world of rich text editor options out there. I’m only scratching the surface with Quill but it works fine for now. It’s bare bones. You can associate an image via a URL, make a title, and add some text. It does show some interesting possibilities though and all with very little infrastructure or real technical know how. The image preview is built by this little bit of javascript. It’s based on having a text field with the id of ‘theImage’ and then there’s a check to make sure there’s not already an image attached and if there is it replaces it. This little bit of javascript builds the Google Forms URL from the various text fields […]

I’m not dead yet . . . Google Scripts to Check on a Bunch of WP Sites

John Stewart is going to write up something more systematic and structured as he’s taken these rough ideas up a notch but I figured I’d throw this functional Google Script code in here before I lost it. I believe I got up to five positive statements on blogging more in-process stuff so I’m taking that as an overwhelming mandate. These Google Script functions are meant to loop through a set of URLs in a Google Sheet pulled as an array to see if the site’s still in use. The first two take a look at the WP REST API endpoints for posts and pages. That way if the person only writes pages you won’t be tricked. I’d probably write them all to the sheet because I’m paranoid. The third (aka the hassle as I hadn’t ever messed with XML using javascript) looks at the RSS/XML feed in case the site is not updated enough to have a functional API endpoint or if it’s broken for some reason. This won’t help you out if they’re just writing pages but there’s only so much a person can do. John made a more robust structure with error checking, the piece where it writes to the spreadsheet etc. and I’ll loop in his post once it’s up.

A drawing of a small terrier dog jumping through a hoop held by a monkey.

WP API Feed Reader POC

Image from page 96 of “St. Nicholas [serial]” (1873) flickr photo by Internet Archive Book Images shared with no copyright restriction (Flickr Commons) I’ve talked to a number of people a number of times about seeing faculty using Feed WordPress to syndicate content to a motherblog when they’d really be better served by using a feed reader like Feedly.1 Feed WordPress is great and very useful but if you don’t want to archive the content or take advantage of some of the more advanced options (auto-categorizing, auto-tagging, doing stuff with author pages etc.) then it usually is a bit more hassle than it’s worth. I thought it’d be pretty easy to build a little custom page to display a series feeds from sites in one place. It took me a bit to get it straight but it wasn’t too bad. This example loads 10 sites fairly quickly. I’m currently just showing the source site’s URL and the 5 most recent posts with titles and dates. It’d be easy enough to add other stuff – excerpt, full post content, featured image etc. It’d also be pretty easy to pass the URLs to the page from a Google Spreadsheet which I’ll probably do in the near future. See the Pen wp json api multi fetch by Tom (@twwoodward) on CodePen. 1 Obligatory […]

WP Rest API Tips

Cowboy Jason Stanley performing a riding trick at the Round-Up, Pendleton, Oregon flickr photo by UW Digital Collections shared with no copyright restriction (Flickr Commons) I’ve been doing quite a bit more with the WordPress Rest API lately. There’s plenty of documentation and tutorials out there but most of it still feels a bit scattered to me so I’m going to stick a few of the basics here and add a few things that have come up repeatedly that aren’t quite as basic. There’s an attempt here to move upwards in complexity with the examples but to keep them as clean as possible. This will deal entirely with getting the data. I haven’t done much with using the API to write or modify data. Get the Info There are many ways to get data depending on your library of choice or if you’re using vanilla JS. I’ve played with fetch and Axios on the lighter side and jQuery, Vue, and Angular (v1) on the heavier/more involved side of things. I’ll use jQuery in this version because it’s fairly popular but here’s a Vue example. The example below does a basic jQuery ajax call for the JSON associated with blog information. See the Pen simple jquery get of WP JSON for the site by Tom (@twwoodward) on CodePen. The URL Structure/Accessing […]

timeline of last 50 posts

WP JSON to Timeline JS

As part of some thoughts on building out a series of reflective views for student portfolio blogs, I thought seeing your WordPress posts in the TimelineJS view might be a useful way to look back over your progress. I intend to wrap this into a custom spreadsheet template and/or a plugin1 but figured I’d sketch out how it works so far in case anyone was interested. The WP Rest API makes it pretty easy to write the data via Google Script. I just want to cut out chunks of the data and put it in the right fields. The following script does that and writes it to a page named “wp.” 1 Or maybe just a page where you throw in a blog URL and get a bunch of alternate view/data options.