BuilderChild-Remark

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
(Created and added initial content for BuilderChild-Remark)
 
(Added == How to Add Date Graphic When Using an Extension ==)
 
(3 intermediate revisions by one user not shown)
Line 44: Line 44:
  
 
'''4.''' Visit your site's homepage and you should see the basic structure similar to that of demo site. Hover on Builder in the top WordPress bar and click on <code>Manage Widgets for this Layout</code>. Add your desired widgets in the Content Module's sidebar.
 
'''4.''' Visit your site's homepage and you should see the basic structure similar to that of demo site. Hover on Builder in the top WordPress bar and click on <code>Manage Widgets for this Layout</code>. Add your desired widgets in the Content Module's sidebar.
 +
 +
== How to Add Date in the Author and Comments Line ==
 +
 +
Before:
 +
 +
[[File:Screen Shot 2013-03-04 at 11.19.05 AM.png|734px|thumb|none]]
 +
 +
After:
 +
 +
[[File:Screen Shot 2013-03-04 at 11.18.26 AM.png|740px|thumb|none]]
 +
 +
'''1.''' Edit Remark's <code>index.php</code>.
 +
 +
Change
 +
 +
<pre class="brush: php; gutter: false;">
 +
<div class="entry-meta">
 +
<?php printf( __( 'Posted by %s', 'it-l10n-BuilderChild-Remark' ), '<span class="author">' . builder_get_author_link() . '</span>' ); ?>
 +
</div>
 +
</pre>
 +
 +
to
 +
 +
<pre class="brush: php; gutter: false;">
 +
<div class="entry-meta">
 +
<?php printf( __( 'Posted by %s on', 'it-l10n-BuilderChild-Remark' ), '<span class="author">' . builder_get_author_link() . '</span>' ); ?>
 +
</div>
 +
</pre>
 +
 +
add the following below that:
 +
 +
<pre class="brush: php; gutter: false;">
 +
<span class="entry-meta date">
 +
<span class="weekday"><?php the_time( 'l' ); ?><span class="weekday-comma">,</span></span>
 +
<span class="month"><?php the_time( 'F' ); ?></span>
 +
<span class="day"><?php the_time( 'j' ); ?><span class="day-comma">,</span></span>
 +
<span class="year"><?php the_time( 'Y' ); ?></span>
 +
</span>
 +
</pre>
 +
 +
'''2.''' Edit Remark's <code>archive.php</code>.
 +
 +
Replace
 +
 +
<pre class="brush: php; gutter: false;">
 +
<div class="entry-meta">
 +
<?php printf( __( 'Posted by %s', 'it-l10n-BuilderChild-Remark' ), '<span class="meta-author">' . builder_get_author_link() . '</span>' ); ?>
 +
<?php do_action( 'builder_comments_popup_link', '<span class="meta-comments">&middot; ', '</span>', __( 'Comments %s', 'it-l10n-BuilderChild-Remark' ), __( '(0)', 'it-l10n-BuilderChild-Remark' ), __( '(1)', 'it-l10n-BuilderChild-Remark' ), __( '(%)', 'it-l10n-BuilderChild-Remark' ) ); ?>
 +
</div>
 +
</pre>
 +
 +
with
 +
 +
<pre class="brush: php; gutter: false;">
 +
<div class="entry-meta">
 +
<?php printf( __( 'Posted by %s on', 'it-l10n-BuilderChild-Remark' ), '<span class="meta-author">' . builder_get_author_link() . '</span>' ); ?>
 +
<?php //do_action( 'builder_comments_popup_link', '<span class="meta-comments">&middot; ', '</span>', __( 'Comments %s', 'it-l10n-BuilderChild-Remark' ), __( '(0)', 'it-l10n-BuilderChild-Remark' ), __( '(1)', 'it-l10n-BuilderChild-Remark' ), __( '(%)', 'it-l10n-BuilderChild-Remark' ) ); ?>
 +
</div>
 +
 +
<span class="entry-meta date">
 +
<span class="weekday"><?php the_time( 'l' ); ?><span class="weekday-comma">,</span></span>
 +
<span class="month"><?php the_time( 'F' ); ?></span>
 +
<span class="day"><?php the_time( 'j' ); ?><span class="day-comma">,</span></span>
 +
<span class="year"><?php the_time( 'Y' ); ?></span>
 +
</span>
 +
 +
<div class="entry-meta">
 +
<?php do_action( 'builder_comments_popup_link', '<span class="meta-comments">&middot; ', '</span>', __( 'Comments %s', 'it-l10n-BuilderChild-Remark' ), __( '(0)', 'it-l10n-BuilderChild-Remark' ), __( '(1)', 'it-l10n-BuilderChild-Remark' ), __( '(%)', 'it-l10n-BuilderChild-Remark' ) ); ?>
 +
</div>
 +
</pre>
 +
 +
'''3.''' Edit Remark's <code>single.php</code>.
 +
 +
Replace
 +
 +
<pre class="brush: php; gutter: false;">
 +
<div class="entry-meta">
 +
<?php printf( __( 'Posted by %s', 'it-l10n-BuilderChild-Remark' ), '<span class="author">' . builder_get_author_link() . '</span>' ); ?>
 +
</div>
 +
</pre>
 +
 +
with
 +
 +
<pre class="brush: php; gutter: false;">
 +
<div class="entry-meta">
 +
<?php printf( __( 'Posted by %s on', 'it-l10n-BuilderChild-Remark' ), '<span class="author">' . builder_get_author_link() . '</span>' ); ?>
 +
</div>
 +
 +
<span class="entry-meta date">
 +
<span class="weekday"><?php the_time( 'l' ); ?><span class="weekday-comma">,</span></span>
 +
<span class="month"><?php the_time( 'F' ); ?></span>
 +
<span class="day"><?php the_time( 'j' ); ?><span class="day-comma">,</span></span>
 +
<span class="year"><?php the_time( 'Y' ); ?></span>
 +
</span>
 +
</pre>
 +
 +
== How to Add Date Graphic When Using an Extension ==
 +
 +
[[File:Screen Shot 2013-03-25 at 9.10.53 AM.png|651px|thumb|none]]
 +
 +
Here is an example of customizing <code>Teasers Layout - Image Left</code> extension to add Remark's date graphic at the left of posts.
 +
 +
'''1.''' Copy the extension from parent Builder directory into the child theme under <code>extensions</code> directory (create this as it will not be present by default) so that wp-content/themes/BuilderChild-Remark/extensions/post-teasers-left is present.
 +
 +
'''2.''' Edit wp-content/themes/BuilderChild-Remark/post-teasers-left/functions.php.
 +
 +
Above
 +
 +
<pre class="brush: php; gutter: false;">
 +
<h3 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
 +
</pre>
 +
 +
add
 +
 +
<pre class="brush: php; gutter: false;">
 +
<div class="date-box">
 +
<a href="<?php the_permalink(); ?>">
 +
<span class="month"><?php the_time( 'M' ); ?></span>
 +
<span class="day"><?php the_time( 'd' ); ?></span>
 +
</a>
 +
</div>
 +
</pre>

Latest revision as of 22:42, March 24, 2013

Contents

Introduction

Remark is a fun, simple child theme designed with bloggers in mind and a perfect match for those that may want to set up a small Etsy-type shop.

Remark 2012-07-20 20-52-12.png

Live Demo

Blog entry announcing the release of Remark

How to set up homepage to look like demo site

1. Create Pages. This will help in setting up nav bar since Pages will be listed in the next step.

2. Go to Appearance -> Menus. Create a menu named say Main Menu having your desired items (Pages, Categories, custom links etc).

3. Create a layout named say, Home. Width = 960px.

Add modules in this order:

2012-07-20 21-09-30.png

Navigation Module

Select the menu created earlier in Navigation Type dropdown.

2012-07-20 21-11-19.png

Image Module

The image used in the demo site is 960 x 152.

2012-07-20 21-14-48.png

Content Module

Add a content module having a 320px wide right sidebar.

2012-07-20 21-30-10.png

Footer Module

2012-07-12 19-41-54.png

4. Visit your site's homepage and you should see the basic structure similar to that of demo site. Hover on Builder in the top WordPress bar and click on Manage Widgets for this Layout. Add your desired widgets in the Content Module's sidebar.

How to Add Date in the Author and Comments Line

Before:

Screen Shot 2013-03-04 at 11.19.05 AM.png

After:

Screen Shot 2013-03-04 at 11.18.26 AM.png

1. Edit Remark's index.php.

Change

<div class="entry-meta">
	<?php printf( __( 'Posted by %s', 'it-l10n-BuilderChild-Remark' ), '<span class="author">' . builder_get_author_link() . '</span>' ); ?>
</div>

to

<div class="entry-meta">
	<?php printf( __( 'Posted by %s on', 'it-l10n-BuilderChild-Remark' ), '<span class="author">' . builder_get_author_link() . '</span>' ); ?>
</div>

add the following below that:

<span class="entry-meta date">
	<span class="weekday"><?php the_time( 'l' ); ?><span class="weekday-comma">,</span></span>
	<span class="month"><?php the_time( 'F' ); ?></span>
	<span class="day"><?php the_time( 'j' ); ?><span class="day-comma">,</span></span>
	<span class="year"><?php the_time( 'Y' ); ?></span>
</span>

2. Edit Remark's archive.php.

Replace

<div class="entry-meta">
	<?php printf( __( 'Posted by %s', 'it-l10n-BuilderChild-Remark' ), '<span class="meta-author">' . builder_get_author_link() . '</span>' ); ?>
	<?php do_action( 'builder_comments_popup_link', '<span class="meta-comments">· ', '</span>', __( 'Comments %s', 'it-l10n-BuilderChild-Remark' ), __( '(0)', 'it-l10n-BuilderChild-Remark' ), __( '(1)', 'it-l10n-BuilderChild-Remark' ), __( '(%)', 'it-l10n-BuilderChild-Remark' ) ); ?>
</div>

with

<div class="entry-meta">
	<?php printf( __( 'Posted by %s on', 'it-l10n-BuilderChild-Remark' ), '<span class="meta-author">' . builder_get_author_link() . '</span>' ); ?>
	<?php //do_action( 'builder_comments_popup_link', '<span class="meta-comments">· ', '</span>', __( 'Comments %s', 'it-l10n-BuilderChild-Remark' ), __( '(0)', 'it-l10n-BuilderChild-Remark' ), __( '(1)', 'it-l10n-BuilderChild-Remark' ), __( '(%)', 'it-l10n-BuilderChild-Remark' ) ); ?>
</div>

<span class="entry-meta date">
	<span class="weekday"><?php the_time( 'l' ); ?><span class="weekday-comma">,</span></span>
	<span class="month"><?php the_time( 'F' ); ?></span>
	<span class="day"><?php the_time( 'j' ); ?><span class="day-comma">,</span></span>
	<span class="year"><?php the_time( 'Y' ); ?></span>
</span>

<div class="entry-meta">
	<?php do_action( 'builder_comments_popup_link', '<span class="meta-comments">· ', '</span>', __( 'Comments %s', 'it-l10n-BuilderChild-Remark' ), __( '(0)', 'it-l10n-BuilderChild-Remark' ), __( '(1)', 'it-l10n-BuilderChild-Remark' ), __( '(%)', 'it-l10n-BuilderChild-Remark' ) ); ?>
</div>

3. Edit Remark's single.php.

Replace

<div class="entry-meta">
	<?php printf( __( 'Posted by %s', 'it-l10n-BuilderChild-Remark' ), '<span class="author">' . builder_get_author_link() . '</span>' ); ?>
</div>

with

<div class="entry-meta">
	<?php printf( __( 'Posted by %s on', 'it-l10n-BuilderChild-Remark' ), '<span class="author">' . builder_get_author_link() . '</span>' ); ?>
</div>

<span class="entry-meta date">
	<span class="weekday"><?php the_time( 'l' ); ?><span class="weekday-comma">,</span></span>
	<span class="month"><?php the_time( 'F' ); ?></span>
	<span class="day"><?php the_time( 'j' ); ?><span class="day-comma">,</span></span>
	<span class="year"><?php the_time( 'Y' ); ?></span>
</span>

How to Add Date Graphic When Using an Extension

Screen Shot 2013-03-25 at 9.10.53 AM.png

Here is an example of customizing Teasers Layout - Image Left extension to add Remark's date graphic at the left of posts.

1. Copy the extension from parent Builder directory into the child theme under extensions directory (create this as it will not be present by default) so that wp-content/themes/BuilderChild-Remark/extensions/post-teasers-left is present.

2. Edit wp-content/themes/BuilderChild-Remark/post-teasers-left/functions.php.

Above

<h3 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

add

<div class="date-box">
	<a href="<?php the_permalink(); ?>">
	<span class="month"><?php the_time( 'M' ); ?></span>
	<span class="day"><?php the_time( 'd' ); ?></span>
	</a>
</div>
Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox