Tag: wordpress

The Current State of WordPress is Confusion

I’ll start by saying I’ve been using WordPress as a major foundation for my websites since January 2008. I have made themes, plugins, and built several sites using the software.

I am not sure who WordPress is for anymore.

I’ve been helping my father with a WordPress site. He wants to set up a blog for some travel he’s got planned and wanted some help. Now my dad has used WordPress before, circa 2014, and went into this thinking it would be just some refresher tips.

It was not.

In fact, thanks to the new editor feature, it turned into me learning on the spot how to do things in the new set up.

Things that were at once simple, like setting up a menu or changing the widgets are now completely unintuitive, involving extra clicks, hidden menus, and figuring out which blue box is highlighted.

I pulled up my self hosted version (Dad is on WordPress.com), and most of those features are as I Ieft them, leading me to think the back end is 1. different on .com and 2. linked to the capabilities of the theme being used.

(There is an extra menu layer on the .com site that is nothing but frustration.)

It doesn’t change the fact that Dad just wants a blog to post updates and pictures, something WordPress was designed to do, and it is not a straightforward thing to set up anymore.

One thing we would always ask as we were designing websites is “is it clear what you want the user to do?” A question on my mind as I was explain my father how to simply write a post.

Even the app has nothing but clutter. Why isn’t “post a blog” the most prominent thing on the first screen? (Blue button in the corner)

What is the current focus of WordPress? Who are they looking for as users? I know they are going after places like Squarespace for the website/webstore builders, but who are they leaving behind?

I know in the year 2021 someone making a blog isn’t as common of a thing. And the sites that WordPress hosts are rapidly becoming either webstores or content for clicks sites and adds, but still.

Still.

Somewhere in the rush to add in unlimited options the most important part was forgotten: the user.

Dark Mode Twenty Sixteen

I decided I wanted to have a dark mode on this site. It’s a nice feature, and with some CSS can be made to auto change based on the user preferences—meaning you will only see it if your computer / phone is in dark mode.

The theme I use is Twenty Sixteen, which I have previously modified for some changes to typography.

The task, similar to to the typography change, started by searching through the CSS file to find any reference to color. I then took those references and organized them by what color they were using.

The pallet turned out to be 5 primary colors, two accent ones (which were used as inverses of each other). I hunted for colors to use and put together a dark theme that looks like this:

screenshot of this website with the dark mode theme active, background is black and dark grey, words are white and blue

I used a simple media query to allow the site to change with the user preferences:

@media screen and (prefers-color-scheme: dark)

There was one issue I found. Twenty Sixteen has color customizations that load stylesheets at the bottom of the header. I tried a few things to get the dark mode css to load after that, which would mean both were working, but couldn’t get it to work.

I used the functions.php file to remove both the loaded CSS and the options from the customizer to prevent any issues. I plan to figure this one out so modifications to ‘light’ mode will work with ‘dark’ mode.

I did make an option pane to let you switch which dark pallet you’d like to use. Alpenglow is a theme for Firefox with a rich purple pallet, and I wanted to see if I could make something similar for this and have the option to change back and forth if I need to (spoiler, it worked).

Continue reading “Dark Mode Twenty Sixteen”

WordPress Twenty Sixteen Child Theme

A quick nerdy post that may help someone in the future. I wanted to modify the WordPress Twenty Sixteen Theme for this site to change the fonts and then add some classes to handle some new features.

(like this nifty Amazon preview on the Extrospections page)

The layout of the css file isn’t the easiest to change, so I had to pull out all the classes that had the font-family properties and arrange them together.

Below is a skeleton for your child theme’s css. The first set is to change the two predominate fonts, the serif and san-serif choices. The next are the @media calls, if you’d like to add to (as I did) or alter the behavior as the site transitions from desktop to mobile.

/*
 Theme Name:  
 Theme URI: 
 Description:  Twenty Sixteen Child Theme
 Author:   
 Author URI:   
 Template:     twentysixteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         
 Text Domain:  twenty-sixteen-child
*/

/*Typography*/

/*Serif  */
body,
button,
input,
select,
textarea {

/* change font family here */

}

/*Sans-Serif*/
.tagcloud a,
.site-title,
.entry-title,
.entry-footer,
.sticky-post,
.page-title,
.page-links,
.comments-title,
.comment-reply-title,
.comment-metadata,
.pingback .edit-link,
.comment-reply-link,
.comment-form label,
.no-comments,
.widecolumn label,
.widecolumn .mu_register label  {

/* change font family here */

}

/* Media levels in Twenty Sixteen */

/**
 * 14.1 - >= 710px
 */

@media screen and (min-width: 44.375em) {

} /* media 710px */

/**
 * 14.2 - >= 783px
 */

@media screen and (min-width: 48.9375em) {

} /* media 738px */

/**
 * 14.3 - >= 910px
 */

@media screen and (min-width: 56.875em) {

} /* media 910px */

/**
 * 14.4 - >= 985px
 */

@media screen and (min-width: 61.5625em) {

} /* media 985px */