Adding Custom Google Maps to Your Website Maps are often placed on a company website to help customers find their way there. For that, Google Maps is excellent. But wouldn’t it be nice to add your company logo, parking lots, train stations, etc. to the map, to help the customer even more? It is very simple, and in this article I am going to show you how. Before we start, check out what we are going to create: Now, here is an overview: Overview Google Maps API The Google Maps API allows you to embed maps directly into your website. Getting the Coordinates As I do not expect you to know the precise coordinates of your location, I will explain a very quick way Google has provided to do this. When you enter this in your address bar, you will see this: The coordinates of Apple's head quarter in Cupertino The first number is the status code, and 200 means that everything is okay. Adding the Map to Your Website There’s no need to hesitate – let’s add that map to your website! After the URL, you will notice sensor=false. Write Adding Markers
Custom WordPress Homepage with Customizable Widgets In this Tutorial, you’ll learn how to build a Custom homepage for your WordPress Theme using Page Templates: Complete with a featured content slider, and customizable Widgets. Materials Needed: A lot of people I have seen asking about how to make a custom landing page for their WordPress website. What if instead you want to display a separate landing page? The Structure To have a custom template page for WordPress to recognize, simply create a new PHP file, I named mine custom_home.php, and at the very top when you call the header as you normally do, include this little snippet with the name of your custom page, so it should look like this, Upload this file to your Theme Folder. Now, when you’re adding or editing a page in WordPress, you should see a new Template in the Template Dropdown (inside the Attributes box). You can use it now, but it wont do much for you just yet, since this is a blank file. How you develop your template is completely up to you. Adding a Featured Content Slider <? <?
How to turn any jQuery plugin into a Wordpress one Part 1: Anatomy of a jQuery Plugin In this part, we'll analyse what a jQuery plugin is usually made of, where each of those elements should be placed, and how do we usually work with them. Throughout this article, we'll take for example the jQuery FancyBox plugin, (even if there is an existing WordPress adaptation for it already, it's just to have a concrete example). A) The Javascript Source jQuery is a javascript library, and plugins are there to help us extend the capabilities of it, so they are written following the same jQuery syntax. //Include the plugin script<script type="text/javascript" src="Path_to/jquery.fancybox.js"></script> B) The Javascript Snippet Once you have included the plugin script within your application, most of the time you'll be asked to write a little snippet of code that will make your site or application use the plugin when required. //Write the plugin setup<script type="text/javascript"> //Fancybox overlayShow: true, overlayOpacity: 0.7 });});</script>
Changing Headers with WordPress body_class(): quirm.net WordPress 2.8 introduced a new function — body_class() — that attaches a list of classes to the <body> element according to what type of page is being displayed. These classes can be used — in conjunction with your theme’s stylesheet — to display different headers on different page types. Let’s assume your header markup looks something like: <body <? And your current CSS for the header looks like: Replace: with <body <? in header.php. You can now start applying different headers to different page types. Want a different header for Fred’s author page? How about a different header for the category ‘Wibble’ (slug: wibble)? Additional Classes Just keep in mind that this approach will only work with WordPress 2.8 or above.
So you want to create WordPress themes huh? Custom order of posts on main page » WordPress Experiments The most common home page on WP powered site contains posts listed in chronological order (from the newest to the oldest one). But sometimes we need different layout. Fortunately WP is quite flexible and allows to create many customized lists of posts. I’m not going to list all of them since I guess such list would never end up. displaying one post plus list of titles of other posts – Main Page – one post plus list of titles of other postsexcluding one particular category from main page – (first paragraph) But they use different functions. The most common usage (in my practice):1. <? posts listed in reverse chronological order (from the oldest to the newest one)<? 2. <? posts published on particular day of the month (for example if we always publish reports on the 25th of the month )<? Of course we can mix parameters to achieve required result. 3. function <? NOTE!
Make Your Theme WordPress 3.0 Compatible WordPress 3.0 is just around the corner. This time its going to be big, some cool features are in the box. Time to patch up your WordPress theme. Here is all you need. What’s new in WordPress 3.0? See all the new features if WordPress 3.0 here or if you are in a hurry, here is a list of 8 cool features that’s gonna affect most of us. I tried out the Beta1 release, its impressive! To accommodate all the new features, your theme needs to undergo some changes. If you enjoy the post, don’t forget to share it or bookmark it. Enable Navigation Menu Editor for Easy Menu Management Many users are gonna love this feature. To enable this, add the following to the functions.php of your theme: add_theme_support( 'menus' ); To call the menu into the theme, add the following to the header.php: <? where menu-order is the css class for the menu. Source: For more details – How to Add Custom Navigation Menus in WordPress 3.0 Themes Enable Custom Header Management to Change Header Images Easily Example –
Static frontpage - combined with dynamic content - in WordPress Tutorials @ MoshuBlog Thanks for visiting! If you're new here, you may want to subscribe to my RSS feed. My blog posts useful tips, ideas, tutorials and guides for WordPress bloggers - and articles about the life on the Canadian Prairies. If you are familiar with RSS readers, just add my feeds to your reader! [I know I still owe the second part of my Two-level menus article regarding the styling of the menus but today this little trick came up and I thought I'd share it.] Since WP 2.2.x in the Options > Reading there is the possibility to assign an existent(!) If you really want to make that first main page special, you can create a special Page template and while creating the new Front Page you can select the newly added template. In your favourite text editor (I always use PSPad) open the page.php template file for editing. Now find the last line of the Loop: 1.<? (There might be another line after it with the edit_post_link – it this case add the following after that line!) 01.My latest news 02.<? 03.<? 05.<?
How to edit Wordpress themes using Dreamweaver It has been more than a year since I used Dreamweaver to design a site. I’ve mostly been running sites using PHP-MySQL content management systems (CMS) and depend on the thousands of ready-made themes and templates to control the site design. For the occasional static page, I use Nvu for visual editing. But after reading this article on SitePoint, I wanted to try using Dreamweaver to edit one of the templates I’m using. WordPress, like most PHP-MySQL CMS, uses template files to control the appearance of websites. To use Dreamweaver to edit or customize WordPress themes, you need to combine these different PHP files into one page so that you can immediately view, while editing the codes, how the page would appear. For this post, I edited a minimalist WordPress theme called Zimpleza. The process Go over the files of the WordPress theme you want to edit and study how it controls your blog’s appearance. The header is called first. Copy codes Dummy content Delete these lines:<?
WordPress Theme Hacks WordPress was originally created as a weblog or blog platform. But now WordPress has grown so powerful that you can use it to create any type of website and use it as a Content Management System (CMS). In this article, I'm going to share some of my WordPress tricks with you on how to make a better WordPress theme. I'm not a programmer nor developer, so I will focus more on the frontend development. Oh yeah, I forgot to mention that WordPress has made it so easy that even a non-programmer (designer like me) can build a wonderful website. WordPress Conditional Tags Conditional Tags are very useful when creating a dynamic WordPress theme. Dynamic Highlight Menu Here is what I used to create a dynamic highlight menu on Best Web Gallery. <ul id="nav"><li<? Dynamic Title tag Again, I use Conditational Tags to output dynamic <title> tag in the header.php. Dynamic Content If you want to include a file that will only appear on the frontpage, here is the code: Feature post highlighting <? <? Query Posts <?
Creating a WordPress Theme HTML Structure Update: We’ve created a second edition of this article, with updated code samples and coverage of the latest theme development techniques. Check it out at Creating a WordPress Theme HTML Structure. It’s part of The ThemeShaper WordPress Theme Tutorial: 2nd Edition. Now we’re starting to get into the real meat of WordPress Theme development: coding the HTML structure. The Goals of Any HTML Structure When coding a web site you should have 2 goals in mind: lean code and meaningful code. Now, when coding a WordPress Theme (or any template for any Content Management System) a balance is going to have to be struck between lean markup, with very little structure, and what’s called Divitis; including too many unnecessary div elements in your code. You’ve probably seen the div tag before if you’ve looked at the code for a website or any WordPress Theme. The HTML Structure for Your WordPress Theme Let’s take a look at the HTML structure we’ll be using for the body of our WordPress Theme. Like this:
6 Ways to Display WordPress Post Content in Multiple Columns Most blogs display their content in single columns, but it’s also possible to display content in . Multiple-column layouts are perfect for newspaper and magazine-style themes. Here are six ways of getting the job done. 1. I think the easiest way to display your content in multiple columns is to apply a little CSS 3 in progressively enhancing fashion. <div class="content"> <p>Lorem ipsum.. We can add the following CSS to display the content in multiple columns: This will display your content in three columns with a 10px gap between each. 2. If you need something a little more “universal” than what is currently available with CSS 3, we can always dig into our template files, modify things at the PHP / (X)HTML level, and then style accordingly. function my_multi_col($content) { $columns = explode('<h2>', $content); $i = 0; foreach ($columns as $column) { if (($i % 2) == 0) { $return .= '<div class="content_left">'." 3. Here are the steps involved in implementing this technique: 4. 5. <? 6. <?
Basic Vue 5 Infinite Ecosystem Tutorial A Simple Vue EcoSystem We're going to work together to create a simple scene in Vue 5 Infinite, using our own Ecosystem, so let's begin!! I've kept the items added to the ecosystem very basic, for those who might be using the Demo version. First off, with Vue open, add a Standard Terrain to our workplace. (Click on smaller image to view full size picture) Double click on the terrain in the workplace and the Terrain Editor will open up: We are going to reset it; this will show you how to create your own original terrains so click on Reset and the terrain will disappear and you will have nothing but a green screen....never fear, it will be back, better than ever. What we choose here will determine the shape of our terrain. You can check how it will look while still in the Terrain Editor by clicking the little icon at the top: Once clicked, you will see what the terrain actually looks like: Now that we have selected a terrain, we will move on. Wasn't that easy! E-mail Visitors since October 7/05