This wiki is for the exclusive use of my friends and colleagues. Account creation and anonymous editing have been turned off.

If you are a friend or colleague of mine, and would like to participate in this project, please send me a message.

If you find these pages useful, please donate to help cover server costs. Thanks!

Difference between revisions of "Atticus Finch Child Theme"

From OdleWiki
m (Corrected typo)
m (→‎Examples: Added note about downloading snapshots.)
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{Template:AtticusFinch}}
 
{{Template:AtticusFinch}}
  
== Customization via a Child Theme ==
+
== Installing the Child Theme ==
  
 
Atticus Finch has a child theme available which allows you to easily add or change functions and styles. (You should never edit a theme's files directly. Always use a child theme.) Here's how to install it.
 
Atticus Finch has a child theme available which allows you to easily add or change functions and styles. (You should never edit a theme's files directly. Always use a child theme.) Here's how to install it.
  
== Upload the Child Theme to Your WordPress Install ===
+
=== Upload the Child Theme to Your WordPress Install ===
  
 
First, get the child theme:
 
First, get the child theme:
Line 12: Line 12:
 
# Save the file (<tt>atticus-finch-master.zip</tt>) to whichever location on your computer you prefer.
 
# Save the file (<tt>atticus-finch-master.zip</tt>) to whichever location on your computer you prefer.
  
=== Uploading the Child Theme via the WordPress Backend ===
+
==== Uploading the Child Theme via the WordPress Backend ====
  
 
# On your website, navigate to Appearance => Themes.
 
# On your website, navigate to Appearance => Themes.
 
# Click the "Add New" button at the top<br />.[[File:Af-child-theme-002.png]]
 
# Click the "Add New" button at the top<br />.[[File:Af-child-theme-002.png]]
# Click the "Upload Theme" button at the top</br>.[[File:Af-child-theme-003.png]]
+
# Click the "Upload Theme" button at the top<br />.[[File:Af-child-theme-003.png]]
 
# Click "Choose File" and select the child theme <tt>.zip</tt> file.
 
# Click "Choose File" and select the child theme <tt>.zip</tt> file.
 
# Click "Install Now".
 
# Click "Install Now".
Line 22: Line 22:
 
# Click "Activate". You can now edit the child theme's <tt>style.css</tt> and <tt>functions.php</tt> from the theme editor (Appearance => Editor).
 
# Click "Activate". You can now edit the child theme's <tt>style.css</tt> and <tt>functions.php</tt> from the theme editor (Appearance => Editor).
  
=== Uploading the Child Theme via FTP ===
+
==== Uploading the Child Theme via FTP ====
  
 
# Save the file (<tt>atticus-finch-master.zip</tt>) to whichever location on your computer you prefer.
 
# Save the file (<tt>atticus-finch-master.zip</tt>) to whichever location on your computer you prefer.
Line 33: Line 33:
 
# Activate the "Atticus Finch Child" theme. You can now edit the child theme's <tt>style.css</tt> and <tt>functions.php</tt> from the theme editor (Appearance => Editor), or you can edit them locally and upload them via FTP.
 
# Activate the "Atticus Finch Child" theme. You can now edit the child theme's <tt>style.css</tt> and <tt>functions.php</tt> from the theme editor (Appearance => Editor), or you can edit them locally and upload them via FTP.
  
== Changing Styles via the Child Theme ==
+
== Customization via a Child Theme ==
 +
 
 +
=== Changing Styles via the Child Theme ===
  
 
The child theme will automatically load its own style sheet in <code>/atticus-finch-child/style.css</code>. You can add your own styles or override any theme styles there.
 
The child theme will automatically load its own style sheet in <code>/atticus-finch-child/style.css</code>. You can add your own styles or override any theme styles there.
Line 51: Line 53:
 
</code></pre>
 
</code></pre>
  
The child theme will now load <code>/atticus-finch-child/styles/mobile.css</code>. Make your mobile changes there. ('''Note:''' These changes will only apply when the mobile version of the theme is loaded, as set in the [[http://wiki.kjodle.net/Atticus_Finch_Documentation#Mobile_Options | mobile theme options]].  
+
The child theme will now load <code>/atticus-finch-child/styles/mobile.css</code>. Make your mobile changes there. ('''Note:''' These changes will only apply when the mobile version of the theme is loaded, as set in the [http://wiki.kjodle.net/Atticus_Finch_Documentation#Mobile_Options | mobile theme options].  
  
 
You can also edit menu styles and print styles by making similar changes.
 
You can also edit menu styles and print styles by making similar changes.
  
 
'''Note:''' Any time that you change the child theme, you should update the ''Version:'' number in <code>style.css</code>. By doing so, you ensure that the latest version of your child theme style sheets will load, rather than pulling the old versions out of either a server or browser cache.
 
'''Note:''' Any time that you change the child theme, you should update the ''Version:'' number in <code>style.css</code>. By doing so, you ensure that the latest version of your child theme style sheets will load, rather than pulling the old versions out of either a server or browser cache.
 +
 +
=== Adding HTML or Scripts to WordPress ===
 +
 +
Atticus Finch supports both the <code>wp_head()</code> and <code>wp_footer()</code> functions. To use either function, simply uncomment out the appropriate function in <code>functions.php</code> and add your code between the closing and opening PHP tags.
 +
 +
For example, to add a simple "Hello, World" message to the <code><head></code> element:
 +
 +
Uncomment out the relevant function and add your HTML by changing this:
 +
 +
<pre><code>
 +
/* Add HTML or scripts to the <head> element by uncommenting the function below */
 +
/*
 +
function atticus_finch_header() { ?>
 +
Add your code here.
 +
<?php }
 +
add_action ('wp_head','atticus_finch_header');
 +
*/
 +
</code></pre>
 +
 +
to this:
 +
 +
<pre><code>
 +
/* Add HTML or scripts to the <head> element by uncommenting the function below */
 +
function atticus_finch_header() { ?>
 +
Hello, World.
 +
<?php }
 +
add_action ('wp_head','atticus_finch_header');
 +
</code></pre>
 +
 +
You can also use PHP by elminating the closing and opening PHP tags:
 +
 +
<pre><code>
 +
/* Add HTML or scripts to the <head> element by uncommenting the function below */
 +
function atticus_finch_header() {
 +
echo 'Hello, World.';
 +
}
 +
add_action ('wp_head','atticus_finch_header');
 +
</code></pre>
 +
 +
==== Achieving More Granular Placement of Code ====
 +
 +
Keep in mind that WordPress does not always place your code exactly where you want it, especially if you are loading a lot of other scripts. To more precisely place your code, copy the theme's <code>header.php</code> or <code>footer.php</code> files to the child theme folder and make your changes there.
 +
 +
== Examples ==
 +
 +
If you would like to see examples of the child theme files in action (including added and modified theme files), I have added examples you can view and download on my public Git server at http://git.kjodle.net/public.
 +
 +
To download a complete version, click on a commit and then click on the snapshot link.

Latest revision as of 00:26, 5 June 2017

Atticus-finch-outline.png

Atticus Finch Theme
A monochrome theme for WordPress


Installing the Child Theme

Atticus Finch has a child theme available which allows you to easily add or change functions and styles. (You should never edit a theme's files directly. Always use a child theme.) Here's how to install it.

Upload the Child Theme to Your WordPress Install

First, get the child theme:

  1. Download the child theme from this link: https://github.com/kjodle/atticus-finch-child/archive/master.zip
  2. Save the file (atticus-finch-master.zip) to whichever location on your computer you prefer.

Uploading the Child Theme via the WordPress Backend

  1. On your website, navigate to Appearance => Themes.
  2. Click the "Add New" button at the top
    .Af-child-theme-002.png
  3. Click the "Upload Theme" button at the top
    .Af-child-theme-003.png
  4. Click "Choose File" and select the child theme .zip file.
  5. Click "Install Now".
  6. After a moment, you should see a message similar to this one:
    Af-child-theme-004.png
  7. Click "Activate". You can now edit the child theme's style.css and functions.php from the theme editor (Appearance => Editor).

Uploading the Child Theme via FTP

  1. Save the file (atticus-finch-master.zip) to whichever location on your computer you prefer.
  2. Rename the folder "atticus-finch-child-master" to "atticus-finch-child". (This step is optional.)
  3. Unpack the .zip archive. Delete the .gitignore and <tt.gitattribute files.
  4. Login to your site via FTP. (If you do not know your FTP login credentials, you will need to contact your web host.)
  5. Navigate to "/wp-content/themes/" directory:
    Af-child-theme-005.png
  6. Upload the "atticus-finch-child" folder to your "/wp-content/themes/" directory.
  7. On your website, navigate to Appearance => Themes.
  8. Activate the "Atticus Finch Child" theme. You can now edit the child theme's style.css and functions.php from the theme editor (Appearance => Editor), or you can edit them locally and upload them via FTP.

Customization via a Child Theme

Changing Styles via the Child Theme

The child theme will automatically load its own style sheet in /atticus-finch-child/style.css. You can add your own styles or override any theme styles there.

If you need to change mobile styles, go to the child theme's /atticus-finch-child/functions.php and uncomment the mobile line. In other words, change this:

<code>
	/* If you need to make changes to the child theme's mobile styles, uncomment the following line and edit the child theme's '/styles/mobile.css' file. */
//	wp_enqueue_style( 'atticus-finch-child-mobile-style', get_stylesheet_directory_uri() . '/styles/mobile.css', 'atticus-finch-mobile', wp_get_theme() -> get( 'Version' ), 'screen and (max-width: '. get_theme_mod( 'atticus_finch_mobile_breakpoint' ) . 'px)' );
</code>

to this:

<code>
	/* If you need to make changes to the child theme's mobile styles, uncomment the following line and edit the child theme's '/styles/mobile.css' file. */
	wp_enqueue_style( 'atticus-finch-child-mobile-style', get_stylesheet_directory_uri() . '/styles/mobile.css', 'atticus-finch-mobile', wp_get_theme() -> get( 'Version' ), 'screen and (max-width: '. get_theme_mod( 'atticus_finch_mobile_breakpoint' ) . 'px)' );
</code>

The child theme will now load /atticus-finch-child/styles/mobile.css. Make your mobile changes there. (Note: These changes will only apply when the mobile version of the theme is loaded, as set in the | mobile theme options.

You can also edit menu styles and print styles by making similar changes.

Note: Any time that you change the child theme, you should update the Version: number in style.css. By doing so, you ensure that the latest version of your child theme style sheets will load, rather than pulling the old versions out of either a server or browser cache.

Adding HTML or Scripts to WordPress

Atticus Finch supports both the wp_head() and wp_footer() functions. To use either function, simply uncomment out the appropriate function in functions.php and add your code between the closing and opening PHP tags.

For example, to add a simple "Hello, World" message to the <head> element:

Uncomment out the relevant function and add your HTML by changing this:

<code>
/* Add HTML or scripts to the <head> element by uncommenting the function below */
/*
function atticus_finch_header() { ?>
		Add your code here.
<?php }
add_action ('wp_head','atticus_finch_header');
*/
</code>

to this:

<code>
/* Add HTML or scripts to the <head> element by uncommenting the function below */
function atticus_finch_header() { ?>
		Hello, World.
<?php }
add_action ('wp_head','atticus_finch_header');
</code>

You can also use PHP by elminating the closing and opening PHP tags:

<code>
/* Add HTML or scripts to the <head> element by uncommenting the function below */
function atticus_finch_header() { 
		echo 'Hello, World.';
}
add_action ('wp_head','atticus_finch_header');
</code>

Achieving More Granular Placement of Code

Keep in mind that WordPress does not always place your code exactly where you want it, especially if you are loading a lot of other scripts. To more precisely place your code, copy the theme's header.php or footer.php files to the child theme folder and make your changes there.

Examples

If you would like to see examples of the child theme files in action (including added and modified theme files), I have added examples you can view and download on my public Git server at http://git.kjodle.net/public.

To download a complete version, click on a commit and then click on the snapshot link.