With our new private web server, we can practice developing a functioning website. In the planning stage, we want to think about what we want our website to look like, what we want our comic to look like. One will dictate the layout of the other.
-- Begin Digression -- If you are used to working in that vertical format that is traditional for American comic books, you'll want to design your website around that. As a cautionary note, however, when you look at most webcomics, they prefer a horizontal layout. There is a strong consensus that whenever your layout forces scrolling down or clicking to read the comic, you immediately lose a percentage of your possible readership.
So maybe a horizontal layout would be more effective? But if you aren't writing a gag comic strip (like me), it might be more difficult to compose a readable page - you might have readers questioning whether to go left or right, like so:
You could overcome this by avoiding panel layouts like this one, or you could split the difference and go with a square layout, like Kazu Kibuishi does in the webcomic
Copper.
--End Digression --
Adding Plugins and Editing Stylesheets
So when you logged into your dashboard at the end of the last tutorial, you probably looked at your site, and it (as of this writing) probably looked like this - I added a test post to give myself a better idea of what multiple posts would look like.
In order to put our webcomic on here, we're going to need a plugin called
Comic Easel
In my opinion, this is the best way to display a comic on your wordpress site. There is a theme called Comic Press, made by the same developer, and it would be much easier for a first time user, but also more limited in its display options, and if you want to have a website that is uniquely yours, I recommend the plugin version. Under the dashboard, go to plugins, add new, and search for Comic Easel, then install and activate.
Next, to have a comic display in your theme, you will probably need to ad some code to the website - a few themes have native Comic Easel support, but the one I'm using in this demonstration, twentythirteen, does not.
--
Begin Digression -- Having first tried by creating my own wordpress theme, I can say from experience that unless you already are a Wordpress wizard (and in that case why are you reading this?), it is far easier to modify an existing theme, especially one such as the twentyfourteen theme that has a lot of options and full support from experienced web developers.
-- End Digression --
We are going to modify our theme using a concept called a "Child Theme" Rather than modifying the original files on the theme, we will use this ability of Wordpress to only make small modifications in their own folder. That way, if the developers release an update for the theme we are using, we will be able to incorporate it into our site as the parent theme, without having to re-code our entire site. This makes it much more portable, and much safer. If you want a better explanation, head over to
http://codex.wordpress.org/Child_Themes.
Following their instructions, we will add a folder to the wordpress themes folder, calling it twentythirteen-child
Next, use a text editor such as Sublime Text to create a file that will be called style.css. Paste into it the following lines (straight from the Wordpress Codex).
/*
Theme Name: Twenty Thirteen Child
Theme URI: http://example.com/twenty-thirteen-child/
Description: Twenty Thirteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentythirteen
Version: 1.3
Tags: any, descriptive, tag, you, want, about, the, way, this, theme, looks
Text Domain: twenty-thirteen-child
*/
/* =Theme customization starts here
-------------------------------------------------------------- */
Any changes you want to make are going to go underneath these lines of code, so you only need to change it as much as you want. Then, go into your browser window, go to the dashboard, and check the themes folder. It should now have a theme called twentythirteen-child. Activate it, then go look at your site. But wait! It doesn't look right:
We need to import the parent stylesheet to give it the default look. You will see most websites recommend that you import it using @import in the top of the style.css file, like so:
Text Domain: twenty-thirteen-child
*/
@import url("../twentythirteen/style.css");
/* =Theme customization starts here
-------------------------------------------------------------- */
This will work, but it is not recommended by the folks over at the
Wordpress Codex.
"
@import should not be used to import the parent stylesheet into the child theme. The correct method is to use wp_enqueue_style() to enqueue the parent stylesheet, using this code in your child theme's "functions.php":
Instead, you want to create another file in your child theme's directory, one called "functions.php."
For further information on child themes and functions.php, I direct you to
http://codex.wordpress.org/Child_Themes#Using_functions.php
To simplify, however, you can just create a new file (I just create a new file in Sublime Text), type in the following:
I've left the bulk of the code below so you can copy and paste, but the php tag at the top won't show up in Blogspot's software, so add that php tag to the beginning of the document, paste in the code below, and make sure it looks like the image.
//Here's the custom functions for twentyfourteen-child
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style') );
}
Then I save the file as functions.php into the child theme's directory, like this:
Now go back to your browser window, refresh your website, and it should look just like the parent theme, the difference being that now we can easily make changes to it.
In the next post in the series, I'll go over adding the webcomic via Comic Easel.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
