Herself's Webtools

Scripts, HowTos, Templates, Plugins, Widgets, Tips

Archive for the ‘how to’ Category

HTML5 Animated Image Links

without comments

See example

I wanted to wiggle the icon links to my apps in a similar way to iOS on your device.

In your style.css you’ll need:

.main a img {
padding:4px;
border:#fff 2px solid;
}

.main a:hover img {
padding:4px;
border:#ddd 2px solid;
-webkit-animation:rotate 1s; /* Safari and Chrome */
}

@-webkit-keyframes rotate /* Safari and Chrome */
{
0% {-webkit-transform:rotate(0deg);}
33% {-webkit-transform:rotate(20deg);}
66% {-webkit-transform:rotate(-20deg);}
100% {-webkit-transform:rotate(0deg);}
}

In your myPage.php you’ll need:

<div class=”main”>
<a href=”http://timestocomemobile.com/apps/fertilizerCalculator.php”>
<img alt=”Fertilizer” src=”http://timestocomemobile.com/wp-content/uploads/2013/08/Fertilizer.png”  />
</a>
</div>

Written by Linda MacPhee-Cobb

September 19th, 2013 at 11:38 am

Adding popular social links to your posts and pages in WordPress

without comments

To place a link list of share buttons on posts and pages in WordPress you’ll want to edit the page.php and single.php files in your theme. I usually place the links at the end of the post just above or below the signature depending on your theme.


<div class="social_links">
<ul>

<!-- Digg -->
<li><a href="http://digg.com/submit?phase=2
&url=<?php the_permalink() ?>
&title=<?php the_title(); ?>
&bodytext=<?php the_excerpt() ?>"
title="Digg this story">Digg</a>
</li>

<!-- Reddit -->
<li>
<script type="text/javascript" src="http://www.reddit.com/static/button/button3.js"></script>
</li>

<!-- Twitter -->
<li>
<a href="http://twitter.com/home?status=Reading:<?php echo urlencode(get_permalink(get_the_ID())); ?>&title=<?php echo urlencode(get_the_title(get_the_ID())); ?>">
Twitter this!</a></p>
</li>

<!-- Google Plus -->
<li>
<div class="g-plusone" data-size="tall"></div>

<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</li>

<!-- Stumble upon -->
<li>
<a href="http://www.stumbleupon.com/submit?url=<?php echo urlencode(get_permalink(get_the_ID())); ?>&title=<?php echo urlencode(get_the_title(get_the_ID())); ?>">
Stumble Upon</a>
</li>

<!-- Facebook -->
<li>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=box_count&show_faces=false& width=60&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:60px; height:60px;">
</iframe>
</li>

<!-- eMail -->
<li>
<a href="mailto:?subject=<?php urlencode(the_title()) ?>&body=<?php urlencode(the_permalink()) ?>">
Email me</a>
</li>

</ul>
</div>

</div>

To have a horizontal list of links edit your style.css and add:

.social_links {
float:left;
padding:0 15px 0 0;
margin-left:100px;
}

.social_links ul li {
float:left;
list-style-type: none;
width: 100px;
}

Written by Linda MacPhee-Cobb

September 15th, 2013 at 2:08 pm

How to create a list of posts by category in WordPress

with 2 comments

I have to say creating a link lists of posts by category in WordPress is downright painful. To create the archive list ( see link near search box on sidebar ) you need a list of your categories, the category number. You will use these to create an archives.php page.

1) A list of your categories can be found by going to the Dashboard, then drop down the Posts menu and select categories.  These are the headings you put between the <br><h3>Category Name</h3> in the php below.

2) Category numbers had to be dug out of my database.  I used MySQL Admin, went to my WordPress database.  Select your database, find the wp_terms table and click on the leftmost icon under ‘Action’ to list your tags and categories. The link_id is the category number.

3) PHP code copy and paste this to a file named Archives.php.  Change the category names and numbers to match those on your website.  Also add or delete as many categories as you need. Your template is likely different than mine you may need to adjust the sidebar, footer etc to match your template’s style

4) showposts=200 is the maximum number of posts it will show in that category, adjust if you need to.

<?php
/*
Template Name: Archives
*/
?>

<?php get_header(); ?>

<div id=”content”>

<h2>Archives</h2>

<div>

<p>Complete archive of the blog’s posts sorted by category</p>

<br><h3>Fun things to do in Houston</h3>
<?php query_posts(‘cat=5&showposts=200′); ?>
<?php while (have_posts()): the_post(); ?>
<li><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></li>
<?php endwhile; ?>

<br><h3>OMG We’re in Texas</h3>
<?php query_posts(‘cat=7&showposts=200′); ?>
<?php while (have_posts()): the_post(); ?>
<li><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></li>
<?php endwhile; ?>

<br><h3>The Move</h3>
<?php query_posts(‘cat=15&showposts=200′); ?>
<?php while (have_posts()): the_post(); ?>
<li><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></li>
<?php endwhile; ?>

<br><h3>This ‘n That</h3>
<?php query_posts(‘cat=14&showposts=200′); ?>
<?php while (have_posts()): the_post(); ?>
<li><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></li>
<?php endwhile; ?>

<br><h3>Tokyo Trip</h3>
<?php query_posts(‘cat=172&showposts=200′); ?>
<?php while (have_posts()): the_post(); ?>
<li><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></li>
<?php endwhile; ?>

<br><h3>Geekiness</h3>
<?php query_posts(‘cat=83&showposts=200′); ?>
<?php while (have_posts()): the_post(); ?>
<li><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></li>
<?php endwhile; ?>

<br><h3>Photos</h3>
<?php query_posts(‘cat=10&showposts=200′); ?>
<?php while (have_posts()): the_post(); ?>
<li><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></li>
<?php endwhile; ?>

</div>
</div>

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

5) Upload your archives.php file to your theme directory on your webserver.

6) Finally create a new page – drop down the attributes menu on the right and select archives as your template

Or if you’d rather there’s a new plugin out to do display all posts in all categories for you James Wilkes Web Design

Written by Linda MacPhee-Cobb

April 2nd, 2010 at 11:51 am

How to add an ‘email this’ link to your WordPress posts

without comments

I’ve noticed many of my website visitors come to my websites via links sent in emails.  I thought I’d make it easier for visitors to email links by putting an ‘email this page’ link at the bottom of each post.

You’ll want to add this link to both the index.php and the single.php pages in your theme. Every theme is different so I can’t tell you exactly where to add it. I find the comments section in those pages and work my way up to where the date, tags or other miscellany is stored and added them there on my themes.

<a href=”mailto:?subject=<?php urlencode(the_title()) ?>&body=<?php urlencode(the_permalink()) ?>”>Email this page</a></p>

You might also check out James Wilkes Design version of the link He is pickier than I about the encoding.

Written by Linda MacPhee-Cobb

March 22nd, 2010 at 10:03 pm