Atticus Finch Child Theme - Revision history

Kenneth John Odle: /* Examples */ Added note about downloading snapshots.

2017-06-05T00:26:38Z

Examples: Added note about downloading snapshots.

Kenneth John Odle: /* Uploading the Child Theme via the WordPress Backend */ typofix

2017-06-05T00:16:43Z

Uploading the Child Theme via the WordPress Backend: typofix

Kenneth John Odle: Added "Examples" with link to Git repos

2017-06-05T00:15:47Z

Added "Examples" with link to Git repos

Kenneth John Odle: Changed headings

2017-05-29T21:00:33Z

Changed headings

Kenneth John Odle: Added section about wp_head() and wp_footer()

2017-05-29T20:59:36Z

Added section about wp_head() and wp_footer()

Kenneth John Odle: /* Upload the Child Theme to Your WordPress Install = */ Corrected typo

2017-05-29T16:51:06Z

Upload the Child Theme to Your WordPress Install =: Corrected typo

Kenneth John Odle: Corrected typo

2017-05-29T16:50:41Z

Corrected typo

Kenneth John Odle: Added {{Template:AtticusFinch}}

2017-05-29T16:50:01Z

Added {{Template:AtticusFinch}}

Kenneth John Odle: /* Uploading the Child Theme via FTP */ Removed first two steps, as they have been moved to top of article

2017-05-29T16:48:42Z

Uploading the Child Theme via FTP: Removed first two steps, as they have been moved to top of article

Kenneth John Odle: Created page with "Category: Atticus Finch Theme == Customization via a Child Theme == Atticus Finch has a child theme available which allows you to easily add or change functions and styl..."

2017-05-29T16:47:37Z

Created page with "Category: Atticus Finch Theme == Customization via a Child Theme == Atticus Finch has a child theme available which allows you to easily add or change functions and styl..."

New page

[[Category: Atticus Finch Theme]]

== Customization via a 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:

# Download the child theme from this link: https://github.com/kjodle/atticus-finch-child/archive/master.zip
# 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 ===

# On your website, navigate to Appearance => Themes.
# Click the "Add New" button at the top .[[File:Af-child-theme-002.png]]
# Click the "Upload Theme" button at the top.[[File:Af-child-theme-003.png]]
# Click "Choose File" and select the child theme <tt>.zip</tt> file.
# Click "Install Now".
# After a moment, you should see a message similar to this one: [[File:Af-child-theme-004.png]]
# 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 ===

# Go to this link: https://github.com/kjodle/atticus-finch-child
# Click on the "Download ZIP" button. [[File:Af-child-theme-001.png]]
# Save the file (<tt>atticus-finch-master.zip</tt>) to whichever location on your computer you prefer.
# Rename the folder "atticus-finch-child-master" to "atticus-finch-child". (This step is optional.)
# Unpack the <tt>.zip</tt> archive. Delete the <tt>.gitignore</tt> and <tt.gitattribute</tt> files.
# Login to your site via FTP. (If you do not know your FTP login credentials, you will need to contact your web host.)
# Navigate to "<tt>/wp-content/themes/</tt>" directory: [[File:Af-child-theme-005.png]]
# Upload the "atticus-finch-child" folder to your "<tt>/wp-content/themes/</tt>" directory.
# On your website, navigate to Appearance => Themes.
# 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 ==

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.

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

<pre><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></pre>

to this:

<pre><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></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]].

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.

← Older revision		Revision as of 00:26, 5 June 2017
Line 103:		Line 103:
	== Examples ==		== 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	+	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.

@@ Line 16: / Line 16: @@
 # On your website, navigate to Appearance => Themes.
 # 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 "Install Now".

← Older revision		Revision as of 00:15, 5 June 2017
Line 100:		Line 100:

	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.		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

@@ Line 5: / Line 5: @@
 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:

← Older revision		Revision as of 16:50, 29 May 2017
Line 1:		Line 1:
−	~~[[Category~~: ~~Atticus Finch Theme]]~~	+	{{Template:AtticusFinch}}

	== Customization via a Child Theme ==		== Customization via a Child Theme ==

@@ Line 1: / Line 1: @@
 {{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.
@@ Line 32: / Line 32: @@
 # On your website, navigate to Appearance => Themes.
 # 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 ===

@@ Line 5: / Line 5: @@
 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:
@@ Line 12: / Line 12: @@
 # 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.
@@ 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).
-=== 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.
@@ 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.
-== Changing Styles via the 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.
@@ Line 51: / Line 51: @@
 </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.
 '''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.