Theme creation basics

Posted on 1st February, 2015 152 Comments

Adding Widgets to your theme

Open your functions.php then find or add the register_sidebar function.

/*
 * WIDGETS
 *************************************************************/
// This is the function that holds all the new widget items.
if (function_exists('register_sidebar')) {

	/* The new widget is added below, give it a logical description and a name relevant to it's position in the website */
	register_sidebar(array(
		'name' => 'Footer',
		'id' => 'footer-one',
		'description' => 'Drag a text widget into this box and enter your company details.',
		'before_widget' => '<li id="%1$s" class="custom-class widget %2$s">', // Change the tag if you don't want a list item
		'after_widget' => '</li>', 
		'before_title' => '<h5>', 
		'after_title' => '</h5>'
		));

}

Then to display the widget area in the theme, because we’ve created a footer widget let’s include this call where it should be displayed.

<footer>
	<ul>
		<?php /* Add the widget between the html ul tags because we're wrapping the widget in li's 
			*/
			if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-one')) : endif; ?>
	</ul>
</footer>

Adding new image sizes:

In your funcions.php

/*
 * ADD THEME SUPPORT FOR POST-THUMBNAILS
 *************************************************************/
add_theme_support( 'post-thumbnails' );
	set_post_thumbnail_size( 84, 84, true); // Sets the default post thumbnail to 84px x 84px
	add_image_size( 'custom-thumbnail', 250, 250, true ); // Creates a new image size and "true" crops the image.
	add_image_size( 'another-slide', 600, 480 ); // by removing the "true" the image is scaled.

To display these in our theme. For example if you want to include these in your home page loop.

// Below we're adding the default thumbnail to the header, to sit next to the post title.
<article id="post-<?php the_ID(); ?>">
	<header>
		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
		<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
		<p>Posted on <?php the_time('F jS, Y'); ?> by <?php the_author(); ?></p>
	</header>
	<section>
		<?php the_excerpt('Read more on "'.the_title('', '', false).'" &raquo;'); ?>
	
	</section>
	<footer>
		<p><?php the_tags('Tags: ', ', ', '<br>'); ?> Posted in <?php the_category(', '); ?> &bull; <?php edit_post_link('Edit', '', ' &bull; '); ?> <?php comments_popup_link('Respond to this post &raquo;', '1 Response &raquo;', '% Responses &raquo;'); ?></p>
	</footer>
</article>

To display one of the custom sized image sizes we created then you would include the image name.

 // This will display the 600px x 480px thumbnail.
<?php the_post_thumbnail( 'another-slide' ); ?> 

Adding a new menu area:

In your funcions.php

/*
 * REGISTER NAVIATION MENU
 *************************************************************/

function register_my_menu() { //REGISTER NAV MENU
	register_nav_menu('header-menu',__( 'Header Menu' )); 
}
add_action( 'init', 'register_my_menu' );

Then add this to where you’d like to display your menu.

<nav class="header-menu">
    <?php // We use the menu name we used in the function above.
            wp_nav_menu( array( 'theme_location' => 'header-menu')); ?>
</nav>

Linking to files from your theme

Often you’ll need to add new css, js or even link to images within your theme. To get the themes directory you can use this.

<?php bloginfo('template_directory'); ?> 

/* USE IT IN YOUR THEME LIKE THIS */
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/other.css" media="screen">
<img src="<?php bloginfo('template_directory'); ?>/images/image.png">

Comments

To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:

  1. PHP use - [php] <?php code here ?> [/php]
  2. CSS use - [css] #code-here {} [/css]
  3. HTML use - [html] <div> code here </div> [/html]
  4. JS use - [js] $(".codeHere") [/js]

JamesVen

21st, Oct, 20

Are embryonal in the administration of improper and angina. [url=https://ciamedusa.com/#]buying cialis online legal[/url] A follicle has treatments patients treated in the eye.

hey

07th, Jan, 21

Taxi moto line
128 Rue la Boétie
75008 Paris
+33 6 51 612 712  

Taxi moto paris

Very great post. I simply stumbled upon your
blog and wished to mention that I have truly enjoyed browsing your weblog posts.
In any case I will be subscribing to your feed and I hope you write once more soon!

Google

27th, Jan, 21

Google

Please go to the sites we adhere to, which includes this one, as it represents our picks from the web.

cheap flights

31st, Jan, 21

Quality articles or reviews is the main to interest the visitors to visit the web site, that’s what this
web site is providing.

cheap flights

31st, Jan, 21

Thanks for one’s marvelous posting! I certainly enjoyed reading
it, you happen to be a great author.I will make certain to bookmark your
blog and may come back in the foreseeable future. I want to encourage you to
definitely continue your great posts, have a nice
day!

cheap flights

31st, Jan, 21

If you would like to improve your know-how simply keep visiting this website and
be updated with the latest news update posted here.

cheap flights

01st, Feb, 21

It is not my first time to pay a quick visit this web
site, i am browsing this web site dailly and take
good information from here daily.

cheap flights

01st, Feb, 21

Heya i am for the first time here. I came across this board and
I find It truly useful & it helped me out a lot. I hope to give something back and aid others like you aided me.

tinyurl.com

02nd, Feb, 21

Today, while I was at work, my sister stole my iPad and tested to see if it can survive a 40
foot drop, just so she can be a youtube sensation. My iPad is now
broken and she has 83 views. I know this is totally off topic but I had
to share it with someone!

cheap flights

02nd, Feb, 21

Have you ever considered about including a little bit
more than just your articles? I mean, what you say is valuable and everything.
Nevertheless think about if you added some great graphics or videos to give your posts more,
“pop”! Your content is excellent but with images and videos, this website could undeniably be one of
the most beneficial in its niche. Good blog!

tinyurl.com

03rd, Feb, 21

You could certainly see your enthusiasm within the article
you write. The sector hopes for even more passionate writers such as you who are not afraid to mention how they believe.
All the time follow your heart.

zortilo nrel

07th, Feb, 21

I really appreciate this post. I have been looking all over for this! Thank goodness I found it on Bing. You’ve made my day! Thx again

viagra price

10th, Feb, 21

medical doctor directory whst psychologists in luzerne county take aetna better health insurance. viagra Axhgtro xignut viagra en belgique en vente libre

tinyurl.com

12th, Feb, 21

Fantastic items from you, man. I have be aware your stuff previous to and you’re just extremely fantastic.
I really like what you’ve bought right here, really like what
you are saying and the way through which you assert it.
You make it enjoyable and you still take care of to keep
it smart. I can’t wait to read far more from you.
This is actually a terrific website.

Ebacroli

13th, Feb, 21

doctorfinder – sildenafil Uudff60
cialis pain limb
viagra will go generic: [url=https://www.withoutbro.com/]buy generic viagra usa[/url]

cialis australia sale

24th, Feb, 21

I’m amazed, I must say. Rarely do I come across a blog that’s both equally educative and amusing, and without a doubt, you have hit the nail on the head.
The issue is something not enough men and women are speaking intelligently
about. Now i’m very happy I came across this in my search for
something relating to this. https://cialis.confrancisyalgomas.com/tadalafil

Can I buy Tramadol online

28th, Feb, 21

Can I buy Tramadol online

[…]Wonderful story, reckoned we could combine a few unrelated information, nonetheless definitely worth taking a look, whoa did one particular master about Mid East has got more problerms as well […]

kratom for sale

28th, Feb, 21

kratom for sale

[…]please stop by the websites we stick to, like this one particular, because it represents our picks through the web[…]

Leave a Comment

To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:

  1. PHP use - [php] <?php code here ?> [/php]
  2. CSS use - [css] #code-here {} [/css]
  3. HTML use - [html] <div> code here </div> [/html]
  4. JS use - [js] $(".codeHere") [/js]