Web Archives - Page 2 of 2

How to insert and center a YouTube video in WordPress

By Tan Nguyen | May 8, 2017 | Comments 0 Comment

Introduction

With these tips, you can insert and centre a YouTube video in your responsive WordPress website to fit all the devices flawlessly.

In our editing life, there are times when we have to insert an iframe into our WordPress posts, where the most common case is inserting an embedded YouTube video.

For example, I want to embed this video in my post

https://www.youtube.com/watch?v=6FTUpceqWnc

On the YouTube page of that video, I click on Share button and then click to Embed tab. YouTube provides me with the following html code to put on my website

<iframe src="https://www.youtube.com/embed/6FTUpceqWnc" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Now it’s time to embed this iframe to my post.

First try

If I post the whole code to the Visual Editor, nothing happens and the raw code just appears there.

And when I switch to the Text Editor, I immediately know why: the html tags I pasted in have all been decoded.

Second try

Yeah you’ve got it! Of course I switch to the Text Editor and paste the code.

However, this video is placed on the left, while I expect it to be placed in the center.

So, I try to select the video and click on the Align Center button but it doesn’t work.

The working solution

Again, I switch to Text Editor, put in an wrapping div like below

<div style="text-align:center">
    <iframe src="https://www.youtube.com/embed/6FTUpceqWnc" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

What this code does is that it put a div that spans 100% across the width of the post, and then the code:

style="text-align:center"

makes the iframe stay in the center of the div, which also means the center of the post (because the div spans 100% across the width of the post).

Now the video goes in the center of the post, just as I want.

Now the video is aligned in the center of the post.

Do you have any tips on this? Share with us in the comment! 😀

How to add Featured Posts Widget in wordpress using List Category Posts plugin

By Tan Nguyen | May 8, 2017 | Comments 0 Comment

Introduction

In this post, I’m going to show you how to add a Featured Posts widget to your WordPress using List Category Posts plugin.

1. Create a category for featured posts

Some people on the internet implement the featured posts functionality by adding a custom field to posts, marking if a post is featured or not. This method requires no coding but still makes you do some “code pasting”, which may sounds a little bit “scary” to some WordPress users.

While there’s nothing wrong with that approach, I myself prefer using a special category for marking a post as featured. I name my category Featured Posts but you can choose whatever name that works for you.

2. Install List Category Posts plugin

In your WordPress back-end menu, go to Plugins > Add New.
Search for List Category Posts plugin by Fernando Briano.
Activate the plugin.

3. Drag the plugin to your website

In your WordPress back-end menu, go to Appearance > Widgets.
List Category Posts widget should now available for you to select.
Drag that widget to wherever you want on your website. In the following screenshot, I dragged it to my Sidebar.

4. Configure the widget

Extend the widget you’ve just dragged in. You should see a list of configurations for that widget.
Input the title you want to display on the website for your widget. For me, I use “Featured Posts“.
Select the category of the posts you want to display for your widget. For me, I choose “Featured Posts” category that I created in Step 1.
- If you cannot see some of your categories in the drop-down list, it may be because there aren’t any posts in those categories yet. Try adding a post to the category you want and retry.
Select the number of posts you want to display in the widget.
For now, you can fill in only these 3 options and keep the others default.
Click Save and you’re done.

5. Check your website for the featured posts

The widget should now appear on your front-end.

Bonus tips

You can add multiple instances of this widget on your website can configure them differently. For example, you can add another one for Editor’s Pick at the footer.
You can add this plugin as short-code inside of your posts to insert a list of posts like this: [catlist id=1 numberposts=10]. Take a look at this video for more information.

For full documentation on the plugin, check out the official wiki here.

Conclusion

Hope this can help you! Do you have any other tips? Let me know in the comment! 😀