Photo byline

I love how the New York Times displays its bylines. It comes with a photo of the author. Apart from looking good on the screen, a photo byline makes the reader “feel they know the reporter better,” according to a study by the Center for Media Engagement at the University of Texas. While the study said it does not increase trust or engagement on the article, that should still count for something, no?
It’s easy to duplicate this on WordPress. Its open source and community-developed nature allows anyone to tweak how their site looks or functions just by referring to the extensive documentation maintained by its global network of users.

New York Times photo byline.
Photo byline at the New York Times.

To duplicate the photo byline, one needs to 1) sign up for a Gravatar (short for globally-recognized avatar), 2) edit theme files, 3) tweak the CSS to control the design. is a service started by Automattic, the company behind WordPress. What it does is designate an avatar to display, when configured, in web forums and comment forms, based on the poster’s email address. Make sure that all your site users have a Gravatar. It’s just a matter of signing up and choosing an image.

The next step is to edit the theme files. Look for The Loop, the part of the template that displays content. If you decide to use the beautiful and new default theme Twenty Twenty-One, it is located in Template Parts > Content > content-single.php.

The byline code should be placed after <?php the_title(); ?> which prints the title and before <?php the_content(); ?>, which displays the article text. In Twenty Twenty-One, it should be before <?php twenty_twenty_one_post_thumbnail(); ?>.

I use this to render the byline: <h3><?php echo get_avatar( get_the_author_meta( ‘ID’ ), ’85’ ); ?> By <?php the_author_posts_link(); ?></h3>. What this line of code does is render the byline in level 3 heading (h3) and link the name to a page listing previous articles by the author.

On print, a byline is a reward for good work and great writing. To get a print byline is a cause for celebration. Online, however, a byline provides reader added context – through a short bio, listing of previous stories, and a link to the author’s social media accounts. All these will allow the reader to examine an author’s body of work for bias and competence.

Photo byline.
Using a photo byline in our WordPress-powered website on Cebu.

The last thing to do in WordPress is to style the photo byline. If you only do the steps above, you will get a square photo displayed on top of the author name. To display a round avatar and have the byline displayed beside it, edit your CSS by going to Appearance > Customize in the WordPress admin. Add the code below:

.avatar {display: inline-block; border-radius: 50%; -moz-border-radius: 50%;-webkit-border-radius: 50%; }

Of course you have to implement this as a child theme so that when developers update Twenty Twenty-One, you don’t need to edit the changes again.

The post Photo byline appeared first on Leon Kilat: The Tech Experiments.

Formatting articles for apps: Markdown to the rescue

This week, our startup updated the official guide to the International Eucharistic Congress 2016 that will be held in Cebu this January. The update contained new information including the complete schedule, profile of speakers as well as a News sub-section that will contain updates leading to and during the actual event.

Among the new information that went into the update was the basic text of the congress or the “Theological and Pastoral Reflections in Preparation for the 51st International Eucharistic Congress.” It is a lengthy treatise on the Eucharist and the Church’s mission.

The material we had to work on and format for the app was a 53-page PDF document with 154 footnotes.

Stackedit Markdown

MARKING UP WITH MARKDOWN. Using StackEdit to format documents using Markdown for use in our IEC 2016 mobile app.

When we format static articles for inclusion into our apps, we use Markdown. The markup language is so easy to use it speeds up the coding of documents. Before we transitioned to Markdown, we used to manually code documents using HTML and CSS. For shorter articles, this was fine. But it was tedious for longer documents.

With Markdown, it took us less than an hour to prepare the IEC basic text for inclusion into the app. What took time was manually coping the text from the PDF file.

For Markdown formatting, our current tool is Stackedit. The online service offers excellent Markdown syntax support with offline storage as well as options to synchronize with your Dropbox and Google Drive accounts.

While content management systems make it so easy to publish stories and format text, a basic HTML and CSS knowledge will go a long way in giving a journalist an edge professionally. Knowing Markdown will sharpen that edge.

The post Formatting articles for apps: Markdown to the rescue appeared first on Leon Kilat : The Tech Experiments.

Auto-update convenience: WordPress upgrades itself to fix critical vulnerability

After yesterday’s upgrading of key WordPress plugins to fix a cross site scripting vulnerability, the WordPress team released version 4.1.2, which it described as a critical security release.

“WordPress versions 4.1.1 and earlier are affected by a critical cross-site scripting vulnerability, which could enable anonymous users to compromise a site,” the WordPress team said in a blog post announcing the release. The release also fixed 3 other security issues including an SQL injection vulnerability in some plugins.

I got the notification of the new release at past midnight. Years back, that would have meant that I’d need to stay up very late, download the latest release, upload the files to the server and perform the upgrade for each of the site I’m running.

Now it’s automatic.

WordPress updates

AUTOMATIC UPDATES. The email notification I got last night that the WordPress running one of my sites has automatically updated to the latest security release – without any trigger or interventions from me.

Background update

Apart from being easy to set up and use, the background update system of WordPress is one of its best features. Manual updating of content management systems is tedious and if you run multiple websites, it can be frustrating.

With background and auto updating, WordPress makes sure that its users (at least those whose sites have been set up for it) always have the latest release and the corresponding security fixes that come with it.

Previously, I would have gotten the release notification from an alert triggered via RSS. Last night, I knew about version 4.1.2 after getting notified that one of my sites was already upgraded to the new release.

Other CMSes like Drupal, for example, not only do not have auto-updating but upgrading them can be so complicated and wearisome. Drupal upgrades, for example, can break features and introduce incompatibilities between major version updates. Remember CCK?

The post Auto-update convenience: WordPress upgrades itself to fix critical vulnerability appeared first on Leon Kilat : The Tech Experiments.

WordPress security alert: vulnerability in multiple plugins; time to update

Do you use WordPress to run your site or blog? You better head off to your dashboard to check for plugin updates. Now.

A cross site scripting vulnerability has been spotted in several WordPress plugins and themes, including popular ones like Jetpack, WordPress SEO, Google Analytics, All in one SEO, Gravity Forms, among others.

“The vulnerability Sucuri discovered would allow an attacker to send a WordPress user with administrative rights a link which could execute malicious JavaScript,” Jetpack said in a blog post announcing an update to its plugin

Yoast has also released an update to its plugins, which are among the top used extensions in WordPress, to address the vulnerability.

WordPress InfiniteWP

MUST-INSTALL TOOL. InfiniteWP allows you to manage multiple WordPress sites without having to log into each one of them.

Why you should use InfiniteWP

It isn’t enough to perform available updates, WordPress admins need to monitor security announcements in the coming days because more plugins need to release new versions. Sucuri said they only scanned the top 300 to 400 plugins for the vulnerability.

If you run multiple WordPress websites, manually keeping up with and installing updates can be time-consuming and tedious.

You can, however, simplify the process by using a tool called InfiniteWP. It is a system that you install to centralize management of WordPress websites. From your InfiniteWP dashboard, you can upgrade the core WordPress, its plugins and themes of all your sites without having to log into each one of them.

InfiniteWP also allows you to back up the database and files of your WordPress sites.

I’ve been using InfiniteWP for some time now and it has saved me a lot of time in managing the WordPress installations that I run.

If you also manage multiple WordPress sites, there’s no question about it: you should use InfinteWP.

The post WordPress security alert: vulnerability in multiple plugins; time to update appeared first on Leon Kilat : The Tech Experiments.

Cebu developers harness tech to help in Yolanda rescue, relief efforts

THE day after super typhoon Yolanda battered Cebu, developer Albert Padin of went to their office on Escario St. to play games and work on some personal projects. Saturdays, Padin said, are days when their team does hackathons on projects that do not involve their day-to-day jobs.

While combing through news and social network updates, Padin read a call on for developers to pitch in coding skills to build a system to help in relief efforts. Since he already had a team that was ready to build things, Padin said they decided to hold a hackathon to build a website to help in relief efforts.

They started the hackathon at 2 p.m. on Saturday with the goal of wrapping up by 5 p.m. They finished at 10 p.m. instead because they worked on 2 things: 1) a system that can help track the search for missing persons and 2) a site that can centralize relief and rescue information in the different areas ravaged by super typhoon Yolanda.

They later closed the person finder service and redirected people to the Google People Finder website. Padin said the Google system was better and the people running it had experience using it in previous disasters.

Cebu-based developers work on a website to centralize Super typhoon Yolanda damage and relief information.

Cebu-based developers work on a website to centralize Super typhoon Yolanda damage and relief information.

But the team was able to deploy the Bangon Philippines website at by Saturday night: providing a dashboard to the grim statistics of missing persons, casualties and destruction while offering data and links to relief efforts. (Note: I was told rebuilt site will be available soon. Link will be shared here once the website is live)

The team continued working on the system but another developer, Caresharing Mark John Buenconsejo, sparked a discussion on Facebook about setting up a system that will allow people to organize their own relief efforts and plug into a system that will centralize data and help guide people into pitching in contributions. Padin volunteered to turn the Bangon Philippines website into such a system.

The group then organized a hackathon and issued a call for volunteers to go to the office inside the building beside Capitol parish church.

Albert Padin talks about their plan for the new Bangon Philippines website.

Albert Padin talks about their plan for the new Bangon Philippines website.

Instead of improving the Bangon Philippines website, the group decided to rebuild it. Padin said they chose rebuilding because of the expanded needs for the system’s backend – which will now offer APIs that will allow people to grab data the project will generate and build apps and services on top of it.

After a discussion over pizza and coffee, the team of hackers decided to focus on the following problem: “Not everybody knows what everybody else is doing so relief efforts are not evenly spread out.”

Padin said efforts were concentrated on Tacloban and people did not know the situation in many other areas on Yolanda’s path.

The group’s solution? “Find out what everybody is doing and put it online.”

Padin said in an interview late Tuesday that they aim to gather as much information as they can on damage reports and relief efforts and would need “a lot of volunteers.” When asked for an update tonight, Padin said it will likely be up in a few hours.

During the interview, Nicole, Padin’s new wife and his co-founder of SpellDial, along with Paola Galan and Vicky Saguin were scouring online news reports and social media postings for information – any tidbit of information – on relief efforts. People’s generosity was overwhelming, the online spreadsheet containing the listings refused to add more cells to contain data during the interview.

Padin said they would need a lot of volunteers to collect information. Those who want to help can send an email to or text 0932 605 8175.

The post Cebu developers harness tech to help in Yolanda rescue, relief efforts appeared first on Leon Kilat : The Tech Experiments.