Herself's Webtools

Scripts, HowTos, Templates, Plugins, Widgets, Tips

Archive for the ‘wordpress’ Category

How to force a line break in a WordPress Post

without comments

Drove me nuts, that adding new lines in the post visual editor or adding <p> or < /br> in the text editor didn’t add extra lines in a post.

If you go into the post editor, go to text and add <br class=”blank”> you’ll get your extra white space.

Written by Linda MacPhee-Cobb

July 2nd, 2014 at 9:00 pm

Posted in wordpress

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

Add your Twitter feed to WordPress with this simple sidebar widget trick

without comments

twitter widget

twitter widget

First you’ll need your Twitter RSS feed

http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=YOUR_TWITTER_NAME

Then create a new RSS widget and add it to your WordPress sidebar (see image if not sure)

Enter the RSS feed URL in the top box
Enter a title for the feed in the second box
Save

If you check display content it will repeat the link as text and you’ll have duplicates.

See the bottom of the side bar at TimesToCome to see the finished widget.

Written by Linda MacPhee-Cobb

December 19th, 2012 at 7:28 pm