Posts tagged WordPress
Adding new Social icons to the Mystique theme
0
I use my blog to record and share my knowledge, but also to present to possible employers my skills. I use it like a marketing tool for my persona. For this, I need to make available not only the RSS and Twitter account, but also resume profiles like Xing, LinkedIn and Facebook.
Since I am using WordPress and I know a little bit of PHP and MySQL I wanted to customize my current theme.But some time ago I’ve read that they don’t encourage you to customize directly the chosen theme, but instead create your own child theme, with the desired customizations. This way, when the theme will be updated, you won’t loose neither time nor brains trying to redo all the modifications.
How to add Syntax Highlight to WordPress
2I wrote quite a while ago about How to implement Syntax Highlight in your WordPress blog. It used an forward, yet permanent approach: modify you’re theme’s header.php. But is it enough?
Lately, I wanted to update my blog’s theme to the newest version. But hey! I had a lot of modifications such the one above that kept me from doing a smooth update: BNR Slider, custom images for RSS and Twitter, hints, Syntax Highlight and so on.
The newest solution that I come up with is using a child theme, feature provided by WordPress engine. Basically, you have a theme applied to you blog that you like. Instead of modifying it, you create a new folder in theme’s directory with a special name who’ll be applied OVER your base theme, customizing only the aspects you need. Assuming that your theme’s name is MyFavoriteTheme, you’ll have to create the child theme as MyFavoriteTheme-child.
In order to use your new theme, you’ll have to create in the MyFavoriteTheme-child folder two files:
- styles.css – required – who’ll mark your folder as a child theme
- functions.php – optional – for our example is required, as we’ll write code inside of it
Add Silverlight to WordPress
2
As I presented earlier, you can easily create a Silverlight video player and you can see it working pretty nice. Not to mention that it can play a lot of formats and it is only 344 kb in size! Now let’s see how this is possible and how can one do it on his website.
From the start, Silverlight was meant to be as easiest as possible to develop and deploy. Also, the cross browser (running on all major browsers) and cross platform (running on Linux, Mac OSX and Windows) was a requirement. But more than this, not to depend on the server side on .Net framework was also important. So you can deploy and run (only for running you’ll need the Silverlight Runtime installed) your app no matter the OS (Operating System).
This is why we discuss today on adding Silverlight to WordPress and not on How to deploy Silverlight on Linux. From the server’s OS point of view, Silverlight is just another file so you don’t need any plugin nor installs on the server side. It is on the client side where it is downloaded, setup with parameters and processed and here you need to install the Silverlight runtime – a mere of 4 Mb. If you’ve developed prior Adobe Flash application, you’ll feel very natural on the process. So let’s begin our ride to add your Silverlight application to WordPress.
Step 1.
Develop your Silverlight application. You should have a .xap file built in order to go further.
Create a simple HTML .MOV player
0
As a Ruby developer, I work quite a lot with their “special” plugins called gems. The nice fact about the gems is that they bring lots of functionality. By example, there’s a gem for paginating a collection who takes just few parameters and not only that finds out how many objects the collection has, but also how to split them, generating the corresponding links and serving to the original container (that used to show the entire collection) only the collection part that is representative in the context of current page and items per page.
Before someone new to a specific gem starts thinking to implement it, usually searches on the net for examples. The most important gems are described and exemplified in Railscasts.com. The content is excelent, the quality is good, sound is nice but the format chosen for movies is Apple’s .MOV proprietary format. There are few plugins to install for playing the files with MediaPlayer, but frankly I wanted a quicker solution than go on some obscure websites and getting from there a creepy .exe installer.
So I’ve created a simple .mov player that will replace the 33 MB of useless QuickTime Player (if you’re a Mac user, you have already this installed so you’ll not need my hack).
So let’s see some code!
First, I decided to use the Object method in order to play mov files. Apple provides a .cab file, who is able to play this files in browser. More documentation on its parameters you can find in their Embedding tutorial.
Don’t forget to add a link to JQuery library!
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
The html code is shown below and it is pretty straight forward:
<body>
<div class="media">
<div class="navigationTabs">
<input type="text" id="txtURL" style="width:75%"/>
<input type="button" id="btnPlayMov" value="Play"/>
<input type="button" id="btnClearMov" value="Clear"/>
</div>
<div id="divPlayer">
http://media.railscasts.com/videos/188_declarative_authorization.mov
</div>
</div>
</body>
The JavaScript is a little bit trickier as it involves JQuery. For a newbie, it is pretty hard to debug, but after a while you’ll just feel it:
$(function() {
// bind an onClick event for this second Flash container
$("#btnPlayMov").click(function() {
var _height = "306px";
var _width = "400px";
var _movie = $('#txtURL').val();
var _html = '';
$("#divPlayer").html(_html);
});
$("#btnClearMov").click(function() {
$("#divPlayer").html("http://media.railscasts.com/videos/188_declarative_authorization.mov");
})
})
Not to mention that it works in all major browsers (IE 8, FireFox 3.6 and Chrome) !
How to add ui-icons to JQuery tabs
0
While working in UniBonn, I have a lot of contact with Ruby on Rails and JQuery; I actually started loving its interactivity and stability. But lately I encountered a small situation with the tabs object that they offer.
This is their default view, with Redmond theme applied. Nice and clean, you might say. But what’s missing? These tabs don’t support images. So you’ll not be able to show an image to specify, let’s say, that this tab has some updated information or a warning that something important is inside that tab.
I wanted to have some kind of control on specifying how the tab should look when I wanted my users to understand that something important is inside and requires their immediate attention.
As I searched through the website, I found the mentions of how to change the tab looks into an “error” style, so that it will attract attention no matter how tired the users are. In the Theming area of JQuery UI website, I found the help for Layout Helpers. Basically, you can specify additional classes who can override the theming of an element. Under Interaction cues, you’ll find all you need to set your elements style to highlighting, error, disable etc.
"Windows Live Writer" won’t upload images to WordPress
17I’ve used WordPress for almost two years now and today I faced a big challenge: I couldn’t post my articles who contained images to Word press with my Windows LiveWriter application.
Note: This comes after a long period in which I didn’t upgrade the plugins of my WordPress application ( I had 11 of them pending upgrade). Also, I had a full system reinstall (you know, the one with formatting the system drive). After that, I reinstalled and configured all my tools, starting with Visual Studio and ending with Paint .Net.
Because I had a lot of stuff to write, in the first free moment that I had a little time, I started my Live Writer and configured it to be able to post on my blog. When finishing the article, I tried to post it as a draft to www.radupoenaru.com and check if there’s something to be modified.
And when I hit the button that saves draft on my blog, bang! -I got this error:
How to generate image_src for Facebook links in WordPress theme
6
Sharing your article for free advertisement on Facebook is a fact. While using different Social Networks sharing tools I had a problem when sharing my articles on Facebook: sometimes the image that I intended to use to represent the article wouldn’t show in the list of the images who can be chosen. Why is that?
It bothered me some while I got the some free time to actually look into this, between exams, work and master research. After some wandering on the internet, I found here the correct directions. What I learnt: Always search for the API!
In order to make sure that the preview is always correctly populated, you should add the tags shown below to the <head> element in your HTML code. If you don’t tag your page, Facebook Share will grab the title of your page as specified in the <title> tag, and will create a summary description from the first text that appears in the body of your page. A list of thumbnails will all be selected from available images on your page.
You can control the exact title, description, and thumbnail that Facebook Share uses by adding the following meta tags to the <head> element in your page:
<meta name=”title” content=”title” /> <meta name=”description” content=”description ” /> <link rel=”image_src” href=”thumbnail_image” / >
Add SyntaxHighlight to Windows Live Writer in Preview mode
1 Windows Live Writer (shorter: WLW) is one of the most popular blog authoring tool that I also happen to like and use. And I say this because of its features – I especially enjoy the Preview tab. But what it really lacks is previewing the ENTIRE page – it will get only the html and some css. So no Syntax Highlighting of my code? Let me tell you how I solved this issue.
As a blog writer I searched for something that could allow me to write the articles offline and then upload them in WordPress. I also tried WordPress built-in editor, but the editing box is so small that I couldn’t use it too much.
The most important feature for me is that it retrieves the blog theme and has a preview function that provide you the same look on editor window. So you will be able to write a post with a preview. But when having a more complex theme, using JQuery or Prototype, you will discover that you don’t get any more the same look and feel as in the blog. This is partially ok for editing, but sometimes it is really bad – especially if you’re a programmer and add a lot of code in your page. On blogs there is a solution to show the code with syntax color, but in the Windows Live Writer I couldn’t find one suitable plug-in that does this.
Technorati checks my blog
0So I applied for Technorati enrollment and they gave me the KNQ3S98TZ58S token for verification. I have to just create a new blog entry and publish in it to verify my domain claim. That’s the price to get into their area.
Enjoy!
How to generate image_src for Facebook links in Wordpress theme » Radu Poenaru
[...] bothered me some while I got the some free time to actually look into this, between exams, work and master research. After some […]
3 months ago