In Which JR Expounds Upon the Nature and Purpose of the Code of the Journeyman’s Retort

As you no doubt surmised from the title, this post is (1) describing my exquisitely hacky attempts to modify the code for the WordPress theme I’m using, and (2) incredibly boring. In fact, I’m putting the “Continue Reading” tag right here, but I can almost promise you don’t want to continue reading.

First, a disclaimer. I have almost no idea what I’m doing and that should emphatically not be taken as hyperbole. I cannot guarantee that anything I did won’t break your web site or cause it to become sentient and kill you if you try to reproduce it. For that matter, I can’t even guarantee that it doesn’t break my own web site for browsers other than Chrome. I primarily used the following methodology to “fix” elements of my WordPress theme and make things look more how I wanted:

(1) Search Google for someone else trying to solve the same problem
(2) Find possibly-relevant threads
(3) Start to read them but get impatient
(4) Type in commands that might or might not exist, using syntax that might or might not be valid and arguments that might or might not exist.
(5) Tweak this until something seemed to work or until I got too impatient guessing and returned to (3).

One more disclaimer: I took rough notes on what I did, but they’re not entirely clear and most of these modifications were made several months ago. As a result, I’m not sure I understand how the hacks work at the pathetic level that I understood them on when I made them.

Without further ado, I’ll review some of the edit’s I made to John Regan’s Kirumo theme. I’ll describe what I did in roughly decreasing order of general usefulness.

Public service announcement: Child themes and PHP vs. CSS

First, the Internet tells me that if you want to modify a WordPress theme, then you’d better download it, rename its corresponding folder something like “theme-child,” and then upload the theme files after making your modifications. This prevents all of your changes from being overwritten in a theme update or something.

Second, the theme is described in both PHP and CSS files. I don’t really understand exactly what these are, but what you need to know is that the CSS defines where things go, and the PHP describes what things do. For example, the search functionality involves PHP commands, but you need to specify where the search bar goes using some kind of CSS ID.

I used the WordPress Editor (in the Dashboard, Appearance -> Editor) to change PHP files. There’s some proper way to modify CSS directly in the WordPress dashboard, too, but I just downloaded the files and then uploaded them via VPN (which you can use with software like FileZilla) after making the desired changes.

Archive

This is a big one. The default WordPress archive format is unbelievably horrible. Who wants to sort posts by month? My archive automatically gives you all categories I use in decreasing order of number of contained posts, and then lists all posts by decreasing date, along with the publication date and categories each post is included in. It might not be perfect, but it’s more than adequate for my needs.

This was all done in PHP. I created a new PHP file, with the following code:

<?php
/*
Template Name: Cat_post_in_table
*/
?>

<?php get_header(); ?>

<h1>Archive</h1><br>

<h2>Categories</h2><br>

<?php $args = array(
‘orderby’ => ‘count’,
‘order’ => ‘DESC’,
‘style’ => ‘none’,
‘show_count’ => 1,
); ?>
<?php wp_list_categories( $args ); ?> <br>

<h2>Posts</h2><br>

<?php query_posts(“posts_per_page=-1″) ?>

<?php if( have_posts() ) : ?>
<table style=”width:100%;”>
<tr>
<td>Title</td>
<td>Date</td>
<td>Categories</td>
</tr>
<?php while( have_posts() ) : the_post(); ?>
<tr>
<td><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></td>
<td><?php the_date(); ?></td>
<td><?php the_category(); ?></td>
</tr>
<?php endwhile; ?>
</table>
<?php endif; ?>

<?php wp_reset_postdata(); ?>

<?php get_footer(); ?>

I then created a “Page” with no content, using “Cat_post_in_table” as the template.

Header search bar and escutcheon

First, I added two classes (though that might be the wrong word) to “kirumo.css”:

#escutcheon {
position:relative;
padding-left:0px;
width:87px;
height:100px;
margin-left:14%;
}

#headersearch {
}

#headersearch ::-webkit-input-placeholder {
color: #eee;
}

#headersearch :-moz-placeholder {
color: #eee;
}

#headersearch ::-moz-placeholder {
color: #eee;
}

#headersearch input[type=text]:-ms-input-placeholder {
color: #eee;
}

These will ensure that the escutcheon is placed where I want it in the header; the headersearch id is obviously not doing anything, but reminds me of what I’m calling the id for the search bar. The remainder ensures that the placeholder for the search bar in the header is the same color as the navigation menu links (e.g., to the “About” page). The actual placement of the elements is done in “header.php”. The escutcheon immediately follows the site navigation tools (i.e., the menu with links to the About and Archive pages):

<img id=”escutcheon”src=”<?php bloginfo(‘template_directory’); ?>/images/escutcheon-small.png”>

The search bar appears immediately before the </nav> tag that marks the end of the navigation area and is formatted as follows:

<form role=”search” id=”headersearch” method=”get” class=”search-form” action=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”>
<label>
<span class=”screen-reader-text”><?php _ex( ‘Search for:’, ‘label’, ‘kirumo’ ); ?></span>
<input type=”search” style=”color:#eee; font-size:1em; background-color:#333; border:none; width:6em; position:relative; bottom:0.35em” class=”search-field” placeholder=”<?php echo esc_attr_x(‘Search’, ‘placeholder’, ‘kirumo’ ); ?>” value=”<?php echo esc_attr( get_search_query() ); ?>” name=”s”>
</label>
</form>

The first part places the image of the escutcheon, while the second places the search bar. The simpler way to place a search bar is to just place

<?php get_search_form(); ?>

but then the unsightly “Search” button is present and the colors aren’t necessarily as desired. (Further, the CSS placement must be added in some way–possibly with a <div> environment.)

Page formats

Kirumo includes multiple different page formats, and I mainly only like the wide format. Which format is used depends on the top line in the corresponding PHP text. For example, the “index.php,” “page.php,” “single.php,” and “search.php” all used the default “content-area” class in Kirumo. To change these to the wide format, I replaced the line

<div id=”primary” class=”content-area”>

with

<div id=”primary” class=”content-area template-horiz-widgets”>

On some pages, this resulted in a “horizontal widget” being present on the page (for an archive, recent posts, etc.), which I didn’t want. It can be removed by removing the line

<?php get_sidebar(); ?>

in the .php file of the offending page format.

I also reduced the maximum width of the page by changing the relevant part of “base.css” to

#page, .header-wrap, .site-footer {
margin-left: auto;
margin-right: auto;
width: 80%;
max-width: 50em;
}

I also had to modify the footer by changing the relevant part of “kirumo.css” to

#tertiary {
margin: 0 auto 0;
max-width: 50em;
overflow:hidden;
}

Comments box

I wanted to add an explanation below the comments box so that readers could use LaTeX if desired. In “comments.php,” I replaced

<?php comment_form(); ?>

with

<?php comment_form(); ?><?php comment_form(array(‘comment_notes_after’ => ‘To write LaTeX output, type [input] with [input] replaced my LaTeX input.’)); ?>

Remove the “mobile menu”

The Kirumo theme comes with a “mobile menu” that is supposed to display on smaller screens. I found it to be kind of a mess, so I just removed it entirely. in “structure.css,” I removed the following:

@media screen and ( max-width: 782px ) { /* Small Screens */
#mobile-menu,
.mobile-header {
display: block;
}

#page-wrap {
-moz-transition: margin 0.2s linear;
-webkit-transition: margin 0.2s linear;
-o-transition: margin 0.2s linear;
transition: margin 0.2s linear;
position: relative;
}

#page {
margin-top: 1em;
width: 95%;
}

#header-image {
margin-bottom: 1em;
}

#primary, #secondary {
float: none;
margin-left: 0;
margin-right: 0;
width: 100%;
}

#nav-toggle {
display: block;
}

#nav-toggle h1 {
float: right;
font-size: 1.5em;
margin-right: .75em;
}

#masthead {
display: none;
}

.genericon.post-format-icon {
display: none;
}

.entry-content .post-format-content {
margin-left: 0;
}

#tertiary {
width: 95%;
}

.template-horiz-widgets .widget,
#tertiary .widget,
.site-info,
#footer-navigation {
float: none;
width: 100%;
margin-right: 0;
}

#tertiary .widget {
margin-bottom: 2em;
}

.site-info {
margin-bottom: 1em;
}

.site-info,
#footer-navigation {
text-align: center;
}

}

Remove genericons

In the default Kirumo theme, every post comes with a “genericon,” which is a small icon representing text, pictures, or whatever. I couldn’t just remove all genericons because the drop-down menu icon (a small arrow) is a genericon. Even though I don’t currently use drop-down menus, it seemed unwise to keep myself restricted to that state of affairs. In the “kirumo.css” file, I modified the existing CSS to

.genericon.post-format-icon {
float: left;
font-size: 0em;
width: 0em;
}

.post-format-content {
}

where I removed a left margin from the post-format-content and changed the genericon size/width to 0. As a result, the genericons have no space to show up in posts and don’t affect the apparent layout of the page.

Formatting the footer

The “footer” for my site is actually just the footer “sidebar” with some modifications. This required deleting most of the actual footer, and then modifying “kirumo.css” to have

.template-horiz-widgets .widget,
#tertiary .widget:nth-child(1) {
width: 50%;
padding-top: 0.5em;
padding-left: 1em;
}

.template-horiz-widgets .widget,
#tertiary .widget:nth-child(2) {
width: 20%;
min-width:8em;
padding-left:1em;
}

.template-horiz-widgets .widget,
#tertiary .widget:nth-child(3) {
width: 10%;
min-width:8em;
padding-top: 0.5em;
padding-right: 1em;
padding-left:1em;
}

This scales the relative space used by each widget in the footer “sidebar.” The left padding ensures that the widgets don’t display right against each other.

The first widget is “text,” the second is a search bar, and the third is a “custom menu” that only has a link to the home page. To add menus, go to the Dashboard -> Appearance -> Menus.

This is very inelegant and unscalable, but gets the job done for me. If I wanted to use something like an actual widget sidebar and add “recent posts” or something, this would need to be completely recalibrated.

Drop-down menus

I don’t actually have drop-down menus, but I did bother reformatting them in case I wanted to use them. I made several changes from the Kirumo default. The first was fixing what seemed to be an error in the original theme: the background of the drop-down menus was transparent. To change this, find the part in kirumo.css that says

#site-navigation .sub-menu,
#mobile-menu ul ul li {
background: rgba( 255, 255, 255, 0.05 );

and change the last line to

background: rgba( 51, 51, 51, 1 );

to make the background opaque (last number) and dark gray instead of white (first three numbers)

Further, the drop-down menu positions weren’t to my liking. I wanted make sub-menu items to drop straight down with sub-sub-menu items then emerging completely to the right. I first changed the margin in

#site-navigation .sub-menu {
margin-left: 2em;
}

to 1em instead of 2em. This ensures that sub-menu text is flush with the corresponding parent menu item text. To make the sub-menu items appear directly below their parents, I changed the relevant part to

#site-navigation .menu > li > .sub-menu {
margin-top: 0em;
}

I also changed the sub-menu to have what seemed like a more convenient size by changing

#site-navigation ul ul a {
width: 10em;
}

to have 14em instead of 10em.

To make sub-sub-menu items emerge from the side of sub-menu items, I changed the relevant part base “base.css” to

#site-navigation ul ul ul {
left: 14em;
top: 0em;
}

#site-navigation ul ul li:hover > ul {
top: 0em;
}

(Eventually I decided against having the drop-down menus work this way and tweaked all of the positioning elements, but that’s easy enough to do once you know all of the ingredients.)

Moving the menu

I decreased the top margin of the menus:

#site-navigation {
float: left;
display: block;
width: 100%;
margin-top: 1em;
margin-left: auto;
margin-right: auto;
}

In addition, I removed some of the padding from the bottom:

#site-navigation .menu > li > a {
margin-left: 2em;
padding-bottom: 0em;
}

Moving the header title

It turns out that the default position of the site title in the Kirumo theme displays nicely for most letters, but glitches out a little for “J,” due to the hook on the left. I just shifted the site title over by changing

<h1 class=”site-title”><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a></h1>

to

<h1 class=”site-title”><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” rel=”home”><i style=”font-size: 0.3em”>&#160;</i><?php bloginfo( ‘name’ ); ?></a></h1>

in “header.php.” The <i …> </i> part changes the size to be some reasonably small size (em is a positioning unit, along with px and %, but each has a different meaning) and &#160 is the escape character for a space. This is very hacky: I just inserted a small space character before the actual title rather than moving the title properly.

Hyperlink in .php file

I modified 404.php, which defines the template used when a URL cannot be found on the journeymansretort domain. The only part of this that wasn’t pretty obvious was including a hyperlink, which is done in the following code:

<p><?php _e( ‘Nothing was found at this location. Try a search or the ‘, ‘kirumo’ ); ?><?php echo( ‘<a href=”http://www.journeymansretort.com/archive/”>archive.</a>’ ); ?></p>

Removing image borders

The default theme puts a border around images and captions. To get rid of the borders, modify the relevant part in kirumo.css to

img[class^=’wp-image’],
img[class*=’wp-image’] {
padding: 2px;
border: 0px solid #e8e8e8;
}

.wp-caption {
border: 0px solid #e8e8e8;
}

If you made it this far

I would honestly like to know why.

2 thoughts on “In Which JR Expounds Upon the Nature and Purpose of the Code of the Journeyman’s Retort

Leave a Reply

Your email address will not be published.

To write LaTeX output, type $latex [input]$ with [input] replaced by LaTeX input.