BuilderChild-Covell

(Difference between revisions)
Jump to: navigation, search
m (How to display entries of Projects post type instead of blog posts on category pages)
(Added = How to make Covell Posts and archive pages look like a standard list of posts =)
(2 intermediate revisions by one user not shown)
Line 3: Line 3:
 
Note: These instructions are incomplete.
 
Note: These instructions are incomplete.
  
[http://demos.ithemesbuilder.com/covell/ Live Demo]
+
[http://demos.ithemes.com/covell/ Live Demo]
  
 
1. Activate Covell child theme
 
1. Activate Covell child theme
Line 211: Line 211:
 
.post-type-archive-builder_projects .entry-title {
 
.post-type-archive-builder_projects .entry-title {
 
     margin-bottom: 1em;
 
     margin-bottom: 1em;
 +
}
 +
</pre>
 +
 +
= How to change the order of the projects on projects archive page =
 +
 +
The easiest solution is to edit the published dates on the project entries. Latest appears first (left).
 +
 +
''Note'': This applies to Covert as well.
 +
 +
= How to make Covell Posts and archive pages look like a standard list of posts =
 +
 +
[[File:My Test Site 2012-09-14 11-43-28.png|304px|thumb|none|Before]]
 +
 +
[[File:My Test Site 2012-09-14 12-04-43.png|261px|thumb|none|After]]
 +
 +
'''1.''' Replace Covell's index.php with [http://pastebin.com/CWupM8qU this] code.
 +
 +
'''2.''' Replace Covell's archive.php with [http://pastebin.com/VXnz20AU this] code.
 +
 +
'''3.''' Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
 +
 +
<pre class="brush:css;">
 +
.blog .entry-title,
 +
.archive .entry-title {
 +
    margin: 0 0 1em 0;
 +
    padding: 10px 15px;
 +
    font-size: 1.5em;
 +
    line-height: 26px;
 +
    background: #ebebeb url('images/diag3.png') repeat;
 +
    -moz-border-radius: 5px;
 +
    border-radius: 5px;
 +
    border: 1px solid #dddddd;
 +
    float: none;
 +
}
 +
 +
.blog .entry-title a,
 +
.archive .entry-title a {
 +
    margin-top: 0;
 +
    margin-bottom: 0;
 +
    color: #767c85;
 +
    -webkit-transition:  all .2s linear;
 +
    -moz-transition:  all .2s linear 0s;
 +
}
 +
 +
.blog .entry-title a:hover,
 +
.archive .entry-title a:hover {
 +
    color: #333333;
 +
}
 +
 +
.blog .entry-header .entry-meta,
 +
.archive .entry-header .entry-meta {
 +
    border: none;
 +
    padding: 0;
 +
    float: none;
 +
    line-height: 1;
 +
}
 +
 +
.blog .entry-content,
 +
.archive .entry-content {
 +
    margin-top: 2em;
 +
}
 +
 +
.blog .entry-footer,
 +
.archive .entry-footer {
 +
    padding-top: 0;
 +
}
 +
 +
.blog .hentry,
 +
.archive .hentry {
 +
    margin-bottom: 2em;
 
}
 
}
 
</pre>
 
</pre>

Revision as of 01:05, September 14, 2012

Contents

How to set up Covell like the demo site

Note: These instructions are incomplete.

Live Demo

1. Activate Covell child theme

2. Go to Pages -> Add New. Create Pages that should be present in your site.

[Optional] If you would like to import the data in demo site

3. Go to Appearance -> Menus and create a new menu titled Demoñu (copy the menu title text from this page and paste it). Populate this menu with items that should appear at the top navigation.

Encased-custommenu.png

4. Take a backup of your existing layouts, views and Settings as a safety measure. Go to My Theme -> Settings. Click "Import / Export" tab. Create an export containing existing data (Layouts and Views, Settings).

5. Download builder-export-layouts-and-views.zip. Go to My Theme -> Settings. Click "Import / Export" tab. Click Import Data link. Browse to where builder-export-layouts-and-views.zip has been saved and click Import. Select Replace (Note: If you have set up a lot of layouts already, you should Add Layouts instead of Replace) and go to next step.

Confirm-import.png

Click Run Import.

6.

How to make use of the Projects feature

Covell's unique feature is the Projects custom post type.

When Covell is activated, Projects section appears in the dashboard below Posts.

Covell-projects.png

To create a new Project entry, click on Add New.

Enter a title, project description, click on "Set featured image" link and select one, optionally a layout that this project page (single view) should use and hit Publish.

Covell-adding-project.png

Repeat this for as many projects as you want.

To visit the page that lists all projects, go to www.yoursite.com/projects. Note: Do not create a Page titled "Projects".

Covell-projects-page.png

Note that projects page has been designed to only show featured images and not content of the projects. Each featured image will link to its project page (single view).

How to display Projects instead of posts on Posts page

Before:

Covell-posts-page-before.png

After:

Covell-posts-page-after.png

Edit theme's index.php.

Add the following above <?php if ( have_posts() ) : ?>

<?php if(is_home()) { query_posts(array('post_type'=>'builder_projects', 'paged' => get_query_var( 'paged' ) ) ); } ?>

How to push single post thumbnail to its own line when the width is small

Add the following at the end of child theme's style.css:

.single-post-thumbnail {
    clear: both;
}

How to align single post thumbnail to the right of content with text wrapping around

1. Edit theme's single.php.

Cut the following code

<?php if ( has_post_thumbnail() ) { ?>
				<div class="single-post-thumbnail">
					<?php the_post_thumbnail('inside-page-thumbnail'); ?>
				</div>
			<?php } ?>

and paste it immediately above <?php the_content(); ?>

2. Add the following at the end of child theme's style.css:

.single-post-thumbnail {
    float: right;
	margin-left: 1em;
}

.single-post-thumbnail img {
	margin-top: 0;
}

How to add categories and tags support to Projects

1. Edit child theme's functions.php.

Add the following below 'supports' => array( 'title', 'editor', 'thumbnail', 'author'),

'taxonomies' => array('category', 'post_tag'), // To add Categories and Post Tags boxes for this custom post type

2. Now Project Add/Edit screen will have Categories and Post Tags boxes.

Covell-categories-tags-boxes.png

3. Download this image, rename it as tag-bg.gif and upload it to your theme's images directory.

4. Add the following at the end of child theme's style.css:

.meta-bottom .tags {
	display: block;
	background: url("images/tag-bg.gif") no-repeat left center;
    font-size: 0.8em;
    padding-left: 25px;
}

How to display entries of Projects post type instead of blog posts on category pages

Let's say we have 5 posts and 2 entries of Projects post type categorized under "Issues". When Issues category page is visited at say, http://yoursite.com/category/issues/ by default it will show the 5 posts. To make all the Projects entries display here instead of the blog posts, do this:

Copy wp-content/themes/BuilderChild-Covell/archive.php as category.php and edit it.

Above

<?php while ( have_posts() ) : // The Loop ?>

add:

<?php // Modify the default loop, include custom post types
			global $wp_query;
			$args = array_merge( $wp_query->query, array( 'post_type' => array('builder_projects') ) );		
			query_posts( $args );
			?>

Source: http://wordpress.stackexchange.com/questions/27104/how-to-display-regular-posts-custom-post-types-that-fall-under-a-category-using

How to change the slug from 'projects' to something else

If you would like to change yoursite.com/projects to say yoursite.com/onlinestore, edit theme's functions.php.

Change

			'rewrite' => array('slug' => 'projects'),

to

			'rewrite' => array('slug' => 'onlinestore'),

Now visit yoursite.com/onlinestore. If you get Page Not Found, go to Settings -> Permalinks and just hit Save Changes without making any changes.

How to add linked titles above featured images in projects archive page

Before
After

1. Edit child theme's archive-builder_projects.php.

Add

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

above

						<?php if ( has_post_thumbnail() ) : ?>

2. Add the following at the end of child theme's style.css:

.post-type-archive-builder_projects .entry-title {
    margin-bottom: 1em;
}

How to change the order of the projects on projects archive page

The easiest solution is to edit the published dates on the project entries. Latest appears first (left).

Note: This applies to Covert as well.

How to make Covell Posts and archive pages look like a standard list of posts

Before
After

1. Replace Covell's index.php with this code.

2. Replace Covell's archive.php with this code.

3. Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

.blog .entry-title,
.archive .entry-title {
    margin: 0 0 1em 0;
    padding: 10px 15px;
    font-size: 1.5em;
    line-height: 26px;
    background: #ebebeb url('images/diag3.png') repeat;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #dddddd;
    float: none;
}

.blog .entry-title a,
.archive .entry-title a {
    margin-top: 0;
    margin-bottom: 0;
    color: #767c85;
    -webkit-transition:  all .2s linear;
    -moz-transition:  all .2s linear 0s;
}

.blog .entry-title a:hover,
.archive .entry-title a:hover {
    color: #333333;
}

.blog .entry-header .entry-meta,
.archive .entry-header .entry-meta {
    border: none;
    padding: 0;
    float: none;
    line-height: 1;
}

.blog .entry-content,
.archive .entry-content {
    margin-top: 2em;
}

.blog .entry-footer,
.archive .entry-footer {
    padding-top: 0;
}

.blog .hentry,
.archive .hentry {
    margin-bottom: 2em;
}
Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox