Tag: page template

create author page template in wordpress theme

We have many guest authors who writes in our blogs. So creating author page is good idea. Here in this article we created author page template in wordpress theme. There are many wordpress plugins available which will give you facility to show author list.

Without wordpress plugin show author list

Here we created simple wordpress page template for showing author list in wordpress website. we created authorlist.php file in wordpress theme folder and added following code in that file.


<?php
/*
Template Name: AuthorList
*/

get_header(); ?>

&nbsp;&nbsp; &nbsp;<div id="primary" class="content-area clr">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="content" class="site-content left-content" role="main">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="authorlist"><ul><?php contributors(); ?></ul></div>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div><!-- #content -->
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<?php get_sidebar(); ?>
&nbsp;&nbsp; &nbsp;</div><!-- #primary -->
<?php get_footer(); ?>

 

Open your functions.php file and put following contributors function in that file.

 


function contributors() {
global $wpdb;

$authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users WHERE display_name <> 'admin' ORDER BY user_registered");

foreach ($authors as $author) {

echo "<li>";
echo "<a href=\"" . get_bloginfo('url') . "/author/";
the_author_meta('user_nicename', $author->ID);
echo "/\">";
echo get_avatar($author->ID);
echo "</a>";
echo '<div>';
echo "<a href=\"" . get_bloginfo('url') . "/author/";
the_author_meta('user_nicename', $author->ID);
echo "/\">";
the_author_meta('display_name', $author->ID);
echo "</a>";
echo "<br />";
echo "Website: <a href=\"";
the_author_meta('user_url', $author->ID);
echo "/\" target='_blank'>";
the_author_meta('user_url', $author->ID);
echo "</a>";
echo "<br />";
echo "Twitter: <a href=\"http://twitter.com/";
the_author_meta('twitter', $author->ID);
echo "\" target='_blank'>";
the_author_meta('twitter', $author->ID);
echo "</a>";
echo "<br />";
echo '<div >';
the_author_meta('description', $author->ID);
echo '</div>';

echo "<br />";
echo "<a href=\"" . get_bloginfo('url') . "/author/";
the_author_meta('user_nicename', $author->ID);
echo "/\">Visit&nbsp;";
the_author_meta('display_name', $author->ID);
echo "'s Profile Page";
echo "</a>";
echo "</div>";
echo "</li>";
}
}

add above code in functions.php file. You can change styling as per your website code.

 create author page template in wordpress theme

Now login to wordpress admin panel and go to pages. Create new page called “Author List”. From Page Attributes section you need to select Template.

create author page template in wordpress theme
create author page template in wordpress theme

 

As per shown in above Image. You need select “AuthorList” in Template DropDown and save the page. Than add Authorlist page add in menu. Now you are able to see the Authorlist without extra wordpress plugin.

If you want to add JavaScript and CSS in page template page than refer our article. You can create contact us page template using similar type of code.

 

separate custom template for each Author in wordpress

WordPress tutorial, separate custom template for each Author in wordpress. You can create different template for each wordpress author. You can also create different styling for each of wordpress authors. This is very common requiement of clients that they want different designed pages for each of wordpress users. That can be easily possible.

separate custom template for each Author in wordpress

You just need create author specific page template in wordpress theme. If author name is john then create author-john.php page in wordpress theme and put following code in that file.


<?php
/*
Template Name: John Author
*/
?>
<?php get_header(); ?>

<?php
 /* Queue the first post, that way we know who
 * the author is when we try to get their name,
 * URL, description, avatar, etc.
 *
 * We reset this later so we can run the loop
 * properly with a call to rewind_posts().
 */
 if ( have_posts() )
 the_post();
?>

&nbsp;

// If a user has filled out their description, show a bio on their entries.
if ( get_the_author_meta( 'description' ) ) : ?>
 <div id="entry-author-info">
 <div id="author-avatar">
 <?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'J2010_author_bio_avatar_size', 50 ) ); ?>
 </div><!-- #author-avatar -->
 <div id="author-description">
 <h2><?php printf( __( 'About %s', 'J2010' ), get_the_author() ); ?></h2>
 <?php the_author_meta( 'description' ); ?>
 </div><!-- #author-description&nbsp;&nbsp;&nbsp; -->
 </div><!-- #entry-author-info -->
<?php endif; ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Dont forget to add your different style for each of author pages. Just go to pages and create page with name with your author name and choose the page template of your author name and save the page.

separate custom template for each Author in wordpress
separate custom template for each Author in wordpress

If you are knowing the author id then you can create the author-1.php page also and add your different style for each of your wordpress authors.

Create different post styling through CSS to your each of users. If you are having doubts and issues with styling or code then please contact me on purabtech.in. In purabtech.in you will found many use ful wordpress api, tutorials and hacks and articles.

how to develop wordpress theme with 978 grid system

Earlier 960 grid system was very popular among the wordpress theme developers. But 960 grid system is becoming older. Now days 978 grid system is becoming very popular. So I decided to create wordpress theme with 978 grid system.

how to develop wordpress theme with 978 grid system

In this article I will tell you how to create the wordpress theme with 978 grid system. For this you dont need to the PHP or wordpress API knowledge. If you are having basic HTML and CSS knowledge then also you can easily create the wordpress theme with 978 grid system. Main advantage of creating wordpress theme with grid system is SEO. If you add the grid system in your wordpress theme then that will be helpful for SEO also.

  • Setup the local development environment and wordpress

For local wordpress theme development you need to install PHP, Mysql, apache on your computer or laptop.If you are using the windows then you can install wamp or xxamp server on your machine. If you are using Linux or Max then you need to install the PHP, Mysql, Apache to your PC.

After Server setup first install the wordpress to your local box. Then go to your wordpress installation folder. Go to WordPress root folder and open following folder.

wp-content->themes

Start developing new wordpress theme with 978 grid system.

  • Create new theme folder in themes folder. (you can keep name as per your choice. I kept grid978 name for my wordpress theme)
  • For creating wordpress theme following files need to be created in theme folder(for me in grid978 folder)

style.css – The main stylesheet. This must be included with your Theme, and it must contain the information header for your Theme.
index.php –  The main template. If your Theme provides its own templates, index.php must be present.
comments.php – The comments template.
single.php –  The single post template. Used when a single post is queried. For this and all other query templates, index.php is used if the query template is not present.
page.php – the page template. Used when an individual Page is queried.
author.php – The author template. Used when an author is queried.
archive.php –  The archive template. Used when a category, author, or date is queried. Note that this template will be overridden by category.php, author.php, and date.php for their respective query types.
search.php – The search results template. Used when a search is performed.
attachment.php –  Attachment template. Used when viewing a single attachment.
image.php – Image attachment template. Used when viewing a single image attachment. If not present, attachment.php will be used.

Or If you are not having knowlege of creating those files then you can download the empty wordpress theme or you can download wordpress framework. Check following article and download empty framework.

List of free wordpress theme frameworks for wordpress theme developer

I always like the Twenty ten wordpress theme. If you are not having good knowledge of CSS then you need to download this theme form following URL. After downloading copy paste the all the files in to your theme folder.

Twenty Ten

Or If you are having good knowledge of CSS then you can download the complete naked and blank wordpress theme from following URL: (I used the starkers wodpress framework)

http://starkerstheme.com/

  • Download the 978 grid system

Then go to following site and download the 978 grid system.

http://978.gs/

how to develop wordpress theme with 978 grid system
how to develop wordpress theme with 978 grid system

I downloaded the zip file called brothersroloff-978-Grid-System-9bea20f.zip file. I extracted the folder.The package comes with a lot of files. I just coped the 978 Templates\CS978.css file in my wordpress theme folder. I opened the file and copied css code into my theme style.php file.

  • Change your Theme name

Open your style.css file and put following code in that file.


/*
Theme Name:grid978
Theme URI:https://purabtech.in
Description:The completely 978 grid system ready wordpress theme (Based on Twenty Ten)
Version:1.0
Author:purabtech.in
Author URI:https://purabtech.in
Tags:wordpressapi, grid, 978 grid, 3 column, clean, basic
*/

you need to change the theme name and other information as per your choice.

Create Screenshot.png file with size on 400 width and 350 height and put that in your theme folder. Now if you check your theme in wordpress admin section. Your theme will be visible in wordpress admin section.

how to develop wordpress theme with 978 grid system
how to develop wordpress theme with 978 grid system
  • Use Reset CSS in style.css file

You need to use the following style code in your style.css file for applying the reset CSS.


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{background:transparent; border:0; margin:0; padding:0; vertical-align:baseline}
body{line-height:1}

h1, h2, h3, h4, h5, h6{clear:both; font-family:Helvetica,Arial,verdana,sans-serif}
ol, ul{list-style:none}
blockquote{quotes:none}
blockquote:before, blockquote:after{content:''; content:none}
del{text-decoration:line-through}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:collapse; border-spacing:0}
a img{border:none}

If you taken the twenty ten theme as a base then you dont need to put reset css in that file.

  • Select your grid system and layout for your wordpress theme.

I planned the keep 390px as sidebar area and 558px as content area. For more information you can check following image.

how to develop wordpress theme with 978 grid system
how to develop wordpress theme with 978 grid system

Plan your layout for developing the wordpress theme with grid 978 system. I planned the following layout for creating the wordpress theme.

how to develop wordpress theme with 978 grid system
how to develop wordpress theme with 978 grid system
  • Start using the 978 grid system for building the theme

Note :In this tutorial I am given the whole wordpress theme files for download with all the assets. You can download the our grid978 wordpress theme and check the code.

For setting the main container. I first opened the header.php file and inserted the following code after the body tag.


<div class='layout-978'>

Then I opened the footer.php file and before wp_footer() function put the close div code.

  • Setting header and menu section using 978 grid system.

Open your header.php file and after ‘layout-978’ div put following code in file.


<div class='row header'>

// Here is all header and menu code

</div>
  • Setting footer section using 978 grid system.

Open your footer.php file and after ‘layout-978’ div put following code in file.


<div class='row footer'>

// Here is all footer code

</div>
  • Setting up the main content area and sidebar area with grid 978 system

Using following code you can set the main content area and sidebar.


<div class='row'>
<div class='col7'>
// Main content Area
// This block code used in loop.php, single.php and page.php file
</div>
<div class='col5'>
// Top Side bar Area
// This block code used in sidebar.php file
</div>
<div class='col5'>
// Main Side bar Area
// This block code used in sidebar.php file
<div class='col2'>
// Primary Side bar Area
// This block code used in sidebar.php file
</div>
<div class='col3'>
// Secondary Side bar Area
// This block code used in sidebar.php file
</div>
</div>

For this I used the header.php, footer.php, singe.php, page.php and sidebar.php file.

Note : In this tutorial I am given the whole wordpress theme files for download with all the assets. You can download the our grid978 wordpress theme and check the code.

  • Set the content width for your theme

Open your functions.php file and find the following code and replace it to


if ( ! isset( $content_width ) )
 $content_width = 558;
  • Set the menu with CSS style

For multilevel menu support you need to put the following code in to your style.css file.


/* =Menu
-------------------------------------------------------------- */
#access{display:block; float:left; background:#51011f; margin:0 auto; width:978px; border-bottom:1px solid #28000f}
#access .menu-header,
div.menu{font-size:14px; font-weight:bold; margin-left:0px; width:978px; text-shadow:1px 1px 1px #000}
#access .menu-header ul,
div.menu ul{list-style:none; margin:0}
#access .menu-header li,
div.menu li{float:left; position:relative}
#access a{color:#fff; display:block; line-height:34px; /*line-height:38px; */padding:0 10px; text-decoration:none}
#access ul ul{box-shadow:0px 3px 3px rgba(0,0,0,0.2); -moz-box-shadow:0px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow:0px 3px 3px rgba(0,0,0,0.2); display:none; position:absolute; top:34px; left:0; float:left; width:180px; z-index:99999}
#access ul ul li{min-width:180px}
#access ul ul ul{left:100%; top:0}
#access ul ul a{background:#51011f; line-height:1em; padding:10px; width:160px; height:auto; opacity:0.9; color:#fff}
#access li:hover >a,
#access ul ul:hover >a{color:#B8F01C}
#access ul li:hover >ul{display:block}
#access ul li.current_page_item >a,
#access ul li.current-menu-ancestor >a,
#access ul li.current-menu-item >a,
#access ul li.current-menu-parent >a{color:#fff; background:transparent url(images/arrow2.png) top center no-repeat}
#access ul ul li.current_page_item >a,
#access ul ul li.current-menu-ancestor >a,
#access ul ul li.current-menu-item >a,
#access ul ul li.current-menu-parent >a{color:#fff; background:#853E08}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover{color:#fff; background:#853E08}

You can change this code as per your wordpress design and colors.

  • Set the footer widget area

Open your functions.php file and find and replace the following code.

find before_widget section for footer section and add the div with class “col3”. I used the 222px grid size for footer widget section.

You can add this code in sidebar-footer.php file also. you just need to add the div with class “col3” before all widgets.

Your wordpress theme is completed with 978 grid system. You can change and add more styles to your wordpress theme as per your design and colors.

  • How theme is looking

After creating theme is looking as follows:

  • How to mange the widget section the grid978 wordpress theme.

If you check your wordpress admin area. Go to appearance->Widgets section. This will look as follows:

how to develop wordpress theme with 978 grid system
how to develop wordpress theme with 978 grid system

Apart from this you can mange the Menu, Background and header image from this wordpress theme.

You can download the complete source code here.

[viral-lock message=”Download Source Code Link is Hidden! It’s Visible for Users who Liked/Shared This article on Facebook or Twitter or Google+. Like or Tweet this article to reveal the content.”]

Download Source Code

[/viral-lock]

If you want to see the Demo of Grid978 wordpress theme then you need to check following URL:

[viral-lock message=”Download and Demo Link is Hidden! It’s Visible for Users who Liked/Shared This article on Facebook or Twitter or Google+. Like or Tweet this article to reveal the content.”]

Grid978 Theme Demo | Download

[/viral-lock]

This 978 gird system based free wordpress theme framework is created by purabtech.in. If you are having any doubts about developing wordpress theme with 978 grid system then you can write to me on wordpressapi@gmail.com

wordpress theme with 978 grid
wordpress theme with 978 grid

create links template page in wordpress theme

From 3rd version wordpress introduced links template. Links is same important like archive page. code snippet for create links template page in wordpress.

create links template page in wordpress

Links template page concept is new in wordpress theme. From wordpress 3 version wordpress introduced the links.php template file in wordpress themes. Adding the links page to your wordpress site or blog is very good for seo.Links page is same important like archive page.

create links template page in wordpress
create links template page in wordpress

You can add your friends and good websites in links page. You should use the links page very carefully because this page is very important for SEO. Google and other search engine is always look for links page where you can put other network or friends sites.

How to create links template page

Note: If you are wordpress developer then only use following code.

You need to create the links.php file in your wordpress theme folder. and put following code in that file.


<?php
/*
Template Name: Links
*/
?>
<?php get_header(); ?>

 <section id="primary">
 <div id="content" role="main">

<div id="archives">

<?php the_post(); ?>
 <h1><?php the_title(); ?></h1>
 <h2>Friends Network </h2>
 <ul>
<?php wp_list_bookmarks('title_li=&categorize=0'); ?>

</ul>

</div>
 </div><!-- #content -->
 </section><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

After that go to your wordpress admin panel and create the links.php with links page template.

create links template page in wordpress
create links template page in wordpress

Publish links page and add the links page in to your menu.

Here are some links which are helpful to you.

create contact us template page in wordpress

If you link this article then please add my site in your links page or blogroll. If you are having any issues or question about links template then please write to me on support@purabtech.in.