Independent Publisher is a WordPress Theme. This README contains documentation for theme options and features, along with a list of known issues and frequently asked questions. It also contains a list of theme filters and action hooks that can be used to modify and hook into various areas of the theme, as well as a list of functions that can be overidden in a Child Theme.
The main site for this project, along with a demo of this theme, is located at http://independentpublisher.me.
Note: There are two versions of this theme: the primary version, which is being developed here on GitHub, is also on WordPress.org, and the secondary (forked) version is on WordPress.com.
WordPress.com took the original Independent Publisher theme from WordPress.org and changed it a bit to make it work on WordPress.com. I have no control over the WordPress.com version, as that's a closed-system, so if you have issues with that version, please post your support related questions there. You can read more about the WordPress.com version here.
- Theme Options
- Post Covers (Full-Width Featured Images)
- Post Subtitles
- Using a Child Theme to Customize Independent Publisher
- Known Issues
- Frequently Asked Questions
- Why is my Header Image not showing on Single posts?
- How do I get the small logo to show up in the top-left corner?
- Why is my Author Bio and picture at the top of my home page (or below a blog post) and not on the side?
- How do I add Social Media Buttons below the Logo?
- How do I make the Subscribe to Comments Reloaded Advanced Options look better?
- How do I make MailChimp Signup Forms look better?
- How do I add an Archive Page?
- How do I show a menu on the Single Post pages?
- How do I change the footer credits?
- How do I add my own Social Icons to the Social Menu?
- How can I enable "Single-Column Layout" on only the home page?
- Why is the Navigation Menu and/or Widgets not Appearing on Single Post Pages?
- How can I obfuscate my email address in the Social Menu?
- How can I use a Full Size Image for the Post Cover?
- How can I use the Full Size Image for Featured Images?
- Color Schemes
- Theme Filters and Actions
- Functions you can Override in a Child Theme
Theme Options can be found in Dashboard → Appearance → Customize.
The following colors can be changed via the Colors section:
- Text Color
- Background Color
- Link Color
- Title and Header Text Color
- Primary Meta Text Color
- Secondary Meta Text Color
- Single-Column Layout. Disabled by default. This option allows you to force the site layout to a single-column, regardless of the browser width.
- Post Excerpts. Disabled by default. If you enable Post Excerpts the post excerpt will be shown on Blog, Archive, and Search pages instead of the full post content. If no excerpt is set, one is generated using the first 55 words (see
the_excerpt()). This setting only applies to Standard and Chat post formats. - Generate One-Sentence Excerpts. Disabled by default. When this option is enabled, a one-sentence excerpt will be generated for all posts that don't have an excerpt set. A "Continue Reading →" link is also placed below the generated excerpt. This setting only applies to Standard post formats and is only relevant when Post Excerpts are enabled.
- Always Show Full Content for First Post. When Post Excerpts are enabled, this option ensures that the very first post on the home page (or Posts Page, if different) shows the full post content instead of the excerpt.
- Show Widgets on Single Posts. Disabled by default. When this option is enabled, sidebar widgets will also be shown on Single Post pages.
- Show Post Date in Entry Meta. Disabled by default. When this option is enabled, the post date will be shown in the entry meta on Blog, Archive, and Search pages. It uses the date format specified in Dashboard → Settings → General → Date Format.
- Show Post Word Count in Entry Meta. Disabled by default. Shows the post word count in the entry meta on Blog, Archive, and Search pages. Only shows post word count for posts with the Standard Post Format.
- Show Nav Menu on Single Posts. Disabled by default. When this option is enabled, the primary navigation menu will also be shown on Single Post pages.
- Show Updated Date on Single Posts. Disabled by default. When this option is enabled, the post's last modified date will be shown underneath the published date. If you enable this, you can disable this on a per-post basis by adding a Custom Field to a post with the name
independent_publisher_hide_updated_dateand any value (yesortruewill do). - Auto-Set Featured Image as Post Cover. Disabled by default. When this option is enabled, any Featured Image set for a post will automatically be used as a Post Cover (see Post Covers (Full-Width Featured Images)).
- Show Page Load Progress Bar. Disabled by default. When enabled, a progress bar will appear across the top of the page as the page is loading. The color of the progress bar is determined by the Link Color setting in Appearance → Customizer → Colors.
- Enable Multi-Author Mode. Disabled by default. Enabling Multi Author Mode changes the behavior of the site to better support multiple authors. The author name is mentioned in the entry meta and the authors name always links to the author page instead of the home page. The Header Image (Dashboard → Appearance → Customize → Header Image) is treated as the site logo and placed as a small icon in top left of the single pages to provide a way of getting back to the home page.
- Comments Call to Action. "Write a Comment" by default. This allows you to change the label that shows up on the 'Write a Comment' button and also changes the title of the comment form itself.
Post Covers are full-width featured images that stretch across the entire top of the page.
When setting a Featured Image as a Post Cover, it's important that you use an image that works for displaying full-width; 1200x600 is a good starting point. WordPress contains an Image Editor that you can use to crop images to the necessary dimensions.
To set a Featured Image as a Post Cover, first select the image from the Featured Image meta box and then press the Update button. When the page reloads you will see a checkbox that says "Use as post cover (full-width)". Check the box and then save the changes by pressing the Update button again.
You can add a post subtitle at the top of your post content like this:
<h2 class="subtitle">Do what you love and do it often.</h2>
The subtitle class will style it like so:
If there are things you want to tweak in the Independent Publisher theme, a Child Theme is the recommended method for doing so. By using a Child Theme, you can make changes without worrying about those changes being overwritten by a future update to the parent theme.
After you've installed the Independent Publisher theme, download the Independent Publisher Child Theme and install and activate it. You can then start making changes to the Child Theme's files to override the parent theme. The Independent Publisher Child Theme comes with a few examples to help you get started.
For more information on using Child Themes, see the WordPress Codex.
- If you're using the W3 Total Cache plugin, you must disable the JS/CSS Minify option, as that doesn't play well with jQuery, which Independent Publisher makes use of. See also Issue 46.
On Single Post pages, the Author Image (the image of the post author) is shown. On non-Single pages like the Home Page, the Header Image (Dashboard → Appearance → Header) is shown. If you see something like the screenshot above on your Single Post pages, that means you haven't configured an Author Image.
WordPress uses Gravatar to link your email address with the image you want to show up when posting comments and publishing posts. If you don't already have a Gravatar account, signup using the same email address that you have configured in Dashboard → Users → Your Profile. After you upload and associate an image with the email address you have configured in WordPress, you should see the new image appear on your Single Post pages. (Sometimes it take a little while for Gravatar to update things, so if you don't see it immediately, give it some time.)
Note that if there is only one author on your site, you probably want to set the Header Image to be the same as the author Gravatar. (You also probably want the site Tagline, Dashboard → Settings → General → Tagline, to be the same as your bio in Dashboard → Users → Your Profile → Biographical Info.)
First you need to enable Multi-Author Mode in Dashboard → Appearance → Customizer → General Options . With Multi-Author Mode enabled, the theme Header Image (Dashboard → Appearance → Header Image) will be placed in the top-left corner on all Single pages.
Why is my Author Bio and picture at the top of my home page (or below a blog post) and not on the side?
Independent Publisher is a responsive theme, which fits the size of your browser depending on the size of your screen. If you are on a computer, making your browser window wider will automatically move the Author Bio and picture to the side instead of at the top on your homepage or at the bottom of a blog post.
First you need to go to Dashboard → Appearance → Menu. Once there, create a new menu called Social. After that, add your social media links to it. For example:
After you're done, below in Theme Locations (located in the Menu Settings tab), choose Social.
Go to Settings -> Subscribe to Comments -> Comment Form -> Custom HTML and wrap the contents in a paragraph tag with the comment-form-subscriptions class. For example:
<p class='comment-form-subscriptions'><label for='subscribe-reloaded'>[checkbox_label]</label> [checkbox_field]</p>
Note that double-quotes are not allowed in that field and that you must use single quotes, i.e., class='comment-form-subscriptions', NOT class="comment-form-subscriptions".
MailChimp includes its own CSS in the HTML embed code that, by default, doesn't look quite right with Independent Publisher. To fix the MailChimp CSS, you can add the following to the style.css file of a Child Theme (or if you're using Jetpack, simply go to Appearance → Edit CSS and insert the following):
#mc_signup .button {
margin-top: 0 !important;
padding-left: 15px !important;
padding-right: 15px !important;
padding-top: 2px !important;
padding-bottom: 3px !important;
line-height: 1.45 !important;
height: 36px !important;
font-weight: normal !important;
width: 100% !important;
}
.entry-content #mc_signup h2 {
font-size: 1.8em !important;
}
.entry-content #mc_signup input.email {
width: 100% !important;
}
.entry-content #mc_signup label {
padding-bottom: 0 !important;
}
.entry-content #mc_signup .mc-field-group {
width: 99% !important;
}
.widget #mc_signup form {
text-align: center !important;
font-family: "Myriad Pro", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}
.widget #mc_signup input.email {
width: 100% !important;
text-align: center;
}
.widget #mc_signup input.button {
width: 100% !important;
}
The Independent Publisher theme includes a Page Template called "Archive Page" that you can use to create an Archive page. Simply create a new Page (Pages -> Add New), give it a title (e.g., "Archives"), then select the "Archive Page" template from the Template section in the Page Attributes meta box:
By default, the Archives Page Template will load the following:
- Recent Posts
- Most Used Categories
- Yearly Archives
- Monthly Archives
- Search
- Explore by Tag
If you'd like to use your own custom set of widgets, you can simply add widgets to the Archive Page widget area (Appearance -> Widgets):
To get the default set of widgets back, simply remove all widgets from the Archive Page widget area.
By default, the main navigation menu (Primary Menu) only appears on non-Single pages. This is meant to keep the Single Post pages clean and simple. You can change this default behavior by enabling "Show Nav Menu on Single Posts" in Appearance -> Customize -> General Options.
If you want your Single Posts menu to be differnet than your Primary Navigation menu, you can select a different menu for Single Posts in Apperanace -> Menus -> Manage Locations -> Single Posts Menu.
You can change the footer credits by overriding the function that displays them (independent_publisher_footer_credits()) and making that function return something else (or return blank to remove footer content entirely).
Before making such a change, you'll want make sure you're using a Child Theme so that future theme updates don't override your modifications. The functions.php file that comes with the Independent Publisher Child Theme includes an example for overriding the footer credits function.
The Social Menu works by detecting the social media URL you're using and matching that URL to an icon. If you want to add a new social media icon to use on the Social Menu, you can do so by adding the following block of code to your child theme's style.css file:
#menu-social li a[href*="example.com"]::before {
content: url('http://example.com/logo.png');
opacity: 0.5;
}
#menu-social li a[href*="example.com"]:hover::before {
opacity: 1;
}You'll simply need to replace example.com and http://example.com/logo.png in the code with the domain for the new social media site and the URL to the logo you want to appear on the social menu.
Add the following code to child theme's functions.php file to enable the Single-Column layout for only the home page:
/**
* Add single-column-layout to body class when on home page
*/
function __custom_independent_publisher_single_column_layout_body_class( $classes ) {
if ( is_home() || is_front_page() ) {
$classes[] = 'single-column-layout';
}
return $classes;
}
add_filter( 'body_class', '__custom_independent_publisher_single_column_layout_body_class' );By default, the main navigation menu and all widges are hidden from the Single Post pages to keep things clean and simple, however, if you prefer to show these there, you can enable Show Nav Menu on Single Posts and Show Widgets on Single Posts in Dashboard → Apperance → Customize → General Options:
The Social Menu uses the WordPress menu system and most email obfuscation plugins don't filter those for email addresses.
I've written a special filter that will tell the Email Address Encoder plugin to encode any navigation menu items in the Social menu that contain mailto:<email-address> or <email-address>.
Add the following to a Child Theme functions.php file:
add_filter( 'wp_nav_menu_objects', '__social_menu_eae_encode_emails', 10, 2 );
/**
* Filters the Social Menu navigation items looking for email addresses and
* filters those email addresses through the Email Address Encoder plugin.
*
* @since 1.0.0
*
* @param object $objects An array of nav menu objects
* @param object $args Nav menu object args
*
* @return object $objects Amended array of nav menu objects with items containing email addresses filtered through Email Address Encoder plugin
*/
function __social_menu_eae_encode_emails( $objects, $args ) {
// Only apply the social navigation menu
if ( isset( $args->theme_location ) ) {
if ( 'social' !== $args->theme_location || ! function_exists( 'eae_encode_emails' ) ) {
return $objects;
}
}
// Find any menu items with an email address and run them through the Email Address Encoder plugin
foreach ( $objects as $object ) {
if ( is_email( $object->url ) ) {
$object->url = eae_encode_emails( $object->url );
}
if ( stristr( $object->url, 'mailto:' ) ) {
$email = substr( $object->url, 7 );
if ( is_email( $email ) ) {
$object->url = 'mailto:' . eae_encode_emails( $email );
}
}
}
// Return the modified objects
return $objects;By default, the theme will use a maximum of 700x700 pixels for the Post Cover image. You can override this and use the full image size by adding the following to your Child Theme's functions.php file:
function __custom_independent_publisher_full_width_featured_image_size() {
return "full";
}
add_filter( 'independent_publisher_full_width_featured_image_size', '__custom_independent_publisher_full_width_featured_image_size' );The theme uses the default of 700px for various reasons, including bandwidth considerations. However, you can easily override the default featured image width and show the full width (or any of the WordPress thumbnail sizes).
First, you'll need to update the CSS. By default, the theme CSS will use a 100% width for featured images (which means 700px wide by default). You can override this and use whatever the full image size is by adding the following to your Child Theme's style.css file:
.single .wp-post-image,
.page .wp-post-image,
.blog .wp-post-image,
.archive .wp-post-image {
width: auto;
}You'll also need to add the following code to a Child Theme's functions.php file (instead of full, you can use any of the WordPress thumbnail sizes):
function __custom_independent_publisher_full_width_featured_image_size() {
return "full";
}
add_filter( 'independent_publisher_full_width_featured_image_size', '__custom_independent_publisher_full_width_featured_image_size' );If you add the above PHP code and discover that your post Featured Images are too big, try removing the CSS that you added above so that images get a 100% width.
You can modify the color scheme in Appearance → Customize → Colors. Here are a few recommended color schemes:
- Set Link Color to
#26759e
- Set Text color to
#f7f7f7 - Set Background Color to
#000000 - Set Link Color to
#1a609e - Set Title and Header Text Color to
#d1d1d1 - Set Primary Meta Text Color to
#8e8e8e - Set Secondary Meta Text color to
#666666
WordPress Filters and Actions allow you to modify the theme without actually modifying any theme code. To use any of these filters or actions, start by creating a Child Theme and then adding the relevant function to the functions.php file. See also add_filter() and add_action() on the WordPress Codex.
independent_publisher_taxonomy_category_stats- Allows you to override the Category Archive stats that are appended to the category archive description.independent_publisher_taxonomy_tag_stats- Allows you to override the Tag Archive stats that are appended to the Tag Archive description.independent_publisher_entry_meta_separator- Allows you to override the default separator character that is used in the Entry Title Meta and Entry Post Meta (default is '|').independent_publisher_entry_meta_category_prefix- Allows you to override the default Category prefix (default is 'in'; e.g., " in ").independent_publisher_entry_meta_author_prefix- Allows you to override the default Author prefix (default is 'by'; e.g., "by ").independent_publisher_search_stats- Allows you to override the Search stats shown on Search pages.independent_publisher_tag_list_title- Allows you to override the default Tag List Title of 'Related Content by Tag' at the bottom of Single posts.independent_publisher_webmentions_title- Allows you to override the default Webmentions title of 'Webmentions' at the bottom of Single posts.
independent_publisher_entry_meta_top- Located at the top of post Entry Meta, just before the 'Write a Comment' button.independent_publisher_before_bottom_comment_button- Located just before the second 'Write a Comment' button that shows up underneath post comments when there are more than 4 comments visible.independent_publisher_before_post_bottom_tag_list- Located before the bottom 'Related Content by Tag' tag list on Single posts.
independent_publisher_content_nav()- Display navigation to next/previous pages when applicableindependent_publisher_comment()- Template for comments and pingbacks.independent_publisher_mentions()- Creates a custom query for webmentions, pings, and trackbacks and displays them. Using this custom query instead ofwp_list_comments()allows us to always show all mentions, even when we're showing paginated comments.independent_publisher_posted_author()- Prints HTML with meta information for the current author.independent_publisher_posted_author_cats()- Prints HTML with meta information for the current author and post categories. Only prints author name when Multi-Author Mode is enabled.independent_publisher_posted_on_date()- Prints HTML with meta information for the current post-date/time.independent_publisher_post_updated_date()- Prints HTML with meta information for the current post's last updated date/time.independent_publisher_continue_reading_link()- Prints HTML with Continue Reading linkindependent_publisher_continue_reading_text()- Returns Continue Reading text for usage inthe_content()independent_publisher_categorized_blog()- Returns true if a blog has more than 1 categoryindependent_publisher_wp_title()- Filterswp_titleto print a neat<title>tag based on what is being viewed.independent_publisher_post_categories()- Returns categories for current post with separator. Optionally returns only a single category.independent_publisher_site_info()- Outputs site info for display on non-single pagesindependent_publisher_posted_author_card()- Outputs post author info for display on single postsindependent_publisher_posted_author_bottom_card()- Outputs post author info for display on bottom of single postsindependent_publisher_get_post_word_count()- Returns number of words in a post formatted for display in themeindependent_publisher_full_width_featured_image()- Show Full Width Featured Image on single pages if post has full width featured image selectedindependent_publisher_search_stats()- Returns stats for search resultsindependent_publisher_taxonomy_archive_stats()- Returns taxonomy archive stats and current page info for use in taxonomy archive descriptionsindependent_publisher_date_archive_description()- Returns the Date Archive descriptionindependent_publisher_min_comments_bottom_comment_button()- Returns the minimum number of comments that must exist for the bottom 'Write a Comment' button to appearindependent_publisher_min_comments_comment_title()- Returns the minimum number of comments that must exist for the comments title to appearindependent_publisher_hide_comments()- Determines if the comments and comment form should be hidden altogether. This differs from disabling the comments by also hiding the "Comments are closed." message and allows for easily overriding this function in a Child Theme.independent_publisher_footer_credits()- Echoes the theme footer credits. Overriding this function in a Child Theme also applies the changes to Jetpack's Infinite Scroll footer.
independent_publisher_setup()- Sets up theme defaults and registers support for various WordPress features.independent_publisher_stylesheet()- Enqueue the main stylesheet.independent_publisher_wp_fullscreen_title_editor_style()- Enqueue the stylesheet for styling the full-screen visual editor post title so that it closely matches the front-end theme design. To disable, simply override this function in a Child Theme and return nothing.independent_publisher_author_comment_reply_link()- Change the comment reply link to use 'Reply to [Author First Name]'independent_publisher_comment_form_args()- Arguments forcomment_form()independent_publisher_remove_textarea()- Move the comment form textarea above the comment fieldsindependent_publisher_add_textarea()- Recreates the comment form textarea HTML for reinclusion in comment formindependent_publisher_enhanced_comment_form()- Enqueue enhanced comment form JavaScriptindependent_publisher_site_logo_icon_js()- Enqueue Site Logo Icon JavaScript if Multi-Author Site enabledindependent_publisher_is_multi_author_mode()- Returns true if Multi-Author Mode is enabledindependent_publisher_single_author_link()- Returns the author link; defaults to home page when not using multi-author modeindependent_publisher_post_word_count()- Returns number of words in a postindependent_publisher_first_sentence_excerpt()- Return the post excerpt. If no excerpt set, generates an excerpt using the first sentence.independent_publisher_clean_content()- Cleans the content for display as a Quote or Aside by stripping anything that might screw up formattingindependent_publisher_maybe_linkify_the_content()- Returns the post content for Asides and Quotes with the content linked to the permalink, for display on non-Single pagesindependent_publisher_maybe_linkify_the_excerpt()- Returns the excerpt with the excerpt linked to the permalink, for display on non-Single pagesindependent_publisher_html_tag_schema()- Returns the proper schema typeindependent_publisher_show_page_load_progress_bar()- Echos the HTML and JavScript necessary to enable page load progress bar