A big part of the WordPress theme development process is to asses what each possible HTML element will look like (images, tables, lists, paragraphs, etc). The guys at WPCandy.com have put together a set of posts with all the sample content you may need, so you can be thorough in you CSS formatting:
Category: Uncategorized
Categories
Detect IE6 with PHP
Let’s say you want to server-side detect whether a user’s browser is the dreaded IE6 using PHP (instead of on the client side, which is usually done the conditional comments <!–[if IE 6] –>).
PHP’s function get_browser() is a way to get there, as this function gives you an array or object with info on the user’s browser’s capabilitties. But if you just want a quick and dirty way to find if it’s IE 6 they are using, you can just access the global variable $_SERVER[‘HTTP_USER_AGENT’] to get it done:
The strpos() function helps you find the position of the string “MSIE 6.” within the string returned by $_SERVER[‘HTTP_USER_AGENT’]. Done.Credit where credit’s due: http://stackoverflow.com/questions/671890/can-i-detect-ie6-with-php
This one drove me crazy, but I finally figured it out.
In WordPress, if you need to automatically add tags to a post via a PHP script, the best way to do it is via the wp_set_object_terms() function. There is no handy “wp_insert_tag()” function, or something like that, so look no further.
wp_set_object_terms()
wp_set_object_terms() is a powerful function that not only helps you assign tags to posts (or pages), but also categories and other terms. For this example, here’s the PHP code needed to assign tags to a post.
<?php
$tags = array('html', 'css', 'javascript');
wp_set_object_terms( $post_id, $tags, 'post_tag', true );
?>
The code above will create the new tags (or terms) if they don’t exist and link them to the post specified by $post_id.
For more info on this function and its parameter, check out the codex page at http://codex.wordpress.org/Function_Reference/wp_set_object_terms/
When developing for WordPress, sometimes you may need to create a PHP script that will automatically login a user so you can enable user functions. I needed to do something like that when creating a public form to submit posts from the front end using Ajax. The WorpPress function wp_singon() was the perfect solution.
wp_signon()
The wp_signon() function takes the user account’s username and password as parameters, and will allow you to set up a secure cookie for the new session. For more info, check out the function’s codex page: http://codex.wordpress.org/Function_Reference/wp_signon
Another way to auto-login:
Cleverwp.com has an interesting post on how to Autologin a WordPress user in your PHP script which only requires the user’s login name. It’s pretty straight forward, though not as secure.
When programming for WordPress, sometimes you may need to get the ID of the last post that was inserted to the database (à la MySQL’s ‘LAST_INSERT_ID’). Here’s the thing: the wp_insert_post() function returns the newly inserted post’s ID, so you can use it to perform more stuff on the post right away, without having to mess around with any SQL commands to retrieve it. Clever, huh?
wp_insert_post()
The function wp_insert_post() does that, it inserts posts into the WP database. You only need to create a required object (or array) containing a few properties of the new post (such as post_title, post_content, post_status, etc) to get it rolling, and it will fill in any blanks you might’ve missed.
But the main point here is that the wp_insert_post() function returns the newly inserted post’s ID.
Here’s an example:
<?php //insert new post // Create post object $my_post = array(); $my_post['post_title'] = 'Hello world'; $my_post['post_content'] = 'This is a sample post'; $my_post['post_status'] = 'published'; $my_post['post_author'] = 7; //the id of the author $my_post['post_category'] = array(10,12); //the id's of the categories // Insert the post into the database $post_id = wp_insert_post( $my_post ); //store new post id into $post_id ?>
Now the $post_id variable contains the id of the last inserted post, and you can use it in the rest of your script. For example, we could use it now to assign tags to the recently added post:
<?php
//now add tags to new post using the last inserted post id in the $post_id var
$tags = array('html', 'css', 'javascript');
wp_set_object_terms( $post_id, $tags, 'post_tag', true );
?>
Cool, huh?
For more info on the wp_insert_post() function visit check the codex page at: http://codex.wordpress.org/Function_Reference/wp_insert_post
Getting last insert id from the $wpdb object:
The $wpdb object stores the last insert post id as a property. I tried using it and it didn’t work for me, but you can still try to use it. Here’s the codex page:
http://codex.wordpress.org/Function_Reference/wpdb_Class#Class_Variables
Sometimes you may want to center a div element within a page, whether vertically, horizontally, or both (dead center). Here’s how you can accomplish all of that using CSS.
What you need:
The HTML
For this example, we’ll use the following HTML code:
<div id="container"> <p>Some content goes here.</p> </div>
The CSS
The basic formatting for the #container element will be:
#container {
border: 1px solid #000;
background-color: #69C;
padding: 8px;}
Getting it done:
How to center a div element horizontally
To center a div element horizontally you need to:
- Set its left and right margins to auto, which will automatically set the margin space on both sides of the div element, centering it within the page.
- Declare the div element’s width to override the default width: auto property, which makes div elements be as wide as their containers .
Here’s the CSS:
.center_horiz{
width: 158px;
margin: 0 auto;
}
How to center a div element vertically
To center a div element vertically vertically within a page, you need to:
- Set the position of the element to absolute, so it uses the height of the page as reference.
- Set the top property to 50%, so the div element moves down to the middle of the page
- Use the margin-top property to move the div element a little bit above the middle of the page (if you need to).
Here’s the CSS:
.center_vert{
position: absolute;
top: 50%;
margin-top: -35px;
}
How to center a div element both vertically and horizontally (dead center)
To place a div element dead center within a page, you can use the same technique as when centering it vertically and apply it to center the div element horizontally as well. To accomplish this, you need to:
- Set the position of the div element to absolute, so it uses the height and width of the page as reference.
- Set the top and left properties to 50%, so the div element moves down and to the center of the page.
- Use the margin-top and margin-left properties to move the div element a little bit above and left of the middle of the page (if you need to).
Here’s the CSS:
.dead_center{
position: absolute;
top: 50%;
left: 50%;
margin-top: -35px;
margin-left: -85px;
}
And that should be it. See you next time.
Sometimes you may want to load a CSS stylesheet dynamically after your HTML page has loaded and certain conditions are met (for example, if an element with a specific class exists in the DOM). jQuery can help you accomplish that with only a few lines of code.
How to get there:
The HTML:
For this example, let’s say we need to load a stylesheet to format a div tag in the following HTML code:
<html> <head> <title>jQuery - Load CSS</title> </head> <body> <div id="container" class="class"> <p>This is a div tag that was formatted using <a href="http://www.jquery.com" alt="Link to jQuery.com">jQuery</a> </p></div> </body> </html>
The CSS:
This will be the CSS code in our sample stylesheet, “style.css”:
#container{
border: 1px solid #000;
background-color:#EEE;
padding:8px;
margin:8px;
width: 200px;
}
The jQuery:
These are the jQuery functions we’ll use to get this done:
- $() wrapper: as the main and most powerful jQuery function, we’ll use it to:
- Execute code once the document has been loaded
- Determine whether the #container div element exists in the DOM and, if true,
- Create new HTML to link the style.css stylesheet to our page
- append(): this jQuery function allows you to append new HTML code to any element in the DOM. For this example, we’ll attach a new <link> element to the <head> element of our document.
Bringing it all together:
With our HTML and CSS files in place, let’s get this done:
Load jQuery
- Add the following code between the </body> and </html> tags in your HTML document (Note: your actual path might be different than the one on this example, depending on where your jquery.js file has been stored)
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
Add the jQuery code
- Right under the last line, add the following code:
<script type="text/javascript">
$(document).ready(function(){ //Once the document is ready, run the following code
if($("#container").size()>0){ //Check if at least one element with the id "#container" exists within the DOM
$("head").append($("<link rel='stylesheet' href='style.css' type='text/css' media='screen' />")); //if true, append the new <link> element to the <head> element in oor HTML page }
});
</script>
* * * UPDATE * * *
Domenico Testa pointed out that the approach above doesn’t work correctly in IE. IE needs the document.createStyleSheet() function to attach new stylesheet after loading the page:
document.createStyleSheet('style.css');
So, the final code should be:
<script type="text/javascript">
$(document).ready(function(){
if($("#container").size()>0){
if (document.createStyleSheet){
document.createStyleSheet('style.css');
}
else {
$("head").append($("<link rel='stylesheet' href='style.css' type='text/css' media='screen' />"));
}
}
});
</script>
And that should be it. This technique is useful if your page has loaded and you want to load extra CSS files when certain elements exist in the DOM. This can help you save some bandwidth and make your page load faster.