unsolved

wp-cv plugin creation

Leave a reply

Motivation: I hate standard text-based CVs. They are so boring and I want something that gives you a quick look into the main things somebody has done. And I also want it to be strongly ‘time-based’. Plus: I want a very very simple design and I need to have a functional version very very soon.
Motivation(II): I want to play a little bit with HTML5, the Canvas and making a WP plugin.
Disclaimer: As I need it to be done immediately because I want to apply for a specific candidature I will be doing stuff without thinking very much on code prettiness. Anyway, I’ll promise it will be an iterative process to I’ll be improving it.
Solution:

  1. Starting point: googling about I found this post. So I must say thanks to Simon Harris, I’ll start based my work on his example.
  2. Changed mouse cursor in mouse EventListeners. I want to have the ‘dragging’, ‘mouseover’ etc. pointers. Example: 
    1
2
3
4
5

    if (activities[i].contains(mx, my)) {
    e.target.style.cursor = 'pointer'; // My mouse cursor is in the area of an activity, so I change cursor to 'pointer' style.
    return;
}
else e.target.style.cursor = 'auto';
    if (activities[i].contains(mx, my)) {
    e.target.style.cursor = 'pointer'; // My mouse cursor is in the area of an activity, so I change cursor to 'pointer' style.
    return;
}
else e.target.style.cursor = 'auto';
  3. For the ‘more information’ area, I want to be able to offer rich text edition. I found this one, Aloha Editor, which I’m going to try.
      Cancelled this step right now. I’ve tried the editor but format was not appearing as I desired and right now I’m not going to spend time on it. Let’s assume we’ll edit information manually adding html format
  4. Once I click on an activity I want to update the ‘More information’ section. I do this using Prototype. Very easy to install (by only including the .js file: <script type="text/javascript" src="js/prototype.js"></script>

    ) and very easy to use (in the activities.js file do something like this

    document.getElementById("information").update("<i>"+MORE_INFO_MSG+"</i>");

    NOTE: I finally chose jQuery because I want to use jQuery sliders as some browsers don’t support “range” input sliders in HTML5 yet. Using Prototype and jQuery leads to some conflicts (which can be solved) but I prefer not to mix them. Usage now would be:

    $("#information").html("<i>"+MORE_INFO_MSG+"</i>");
  5. I want my Activity elements to move across the screen so I will display a slider and I’ll apply a SCREEN_OFFSSET to the X position of my activities. This will do the trick.

Right now I publish it as it is, very ad-hoc. But I had a deadline where I wanted to show it. In fact there is much more ‘automatized’ than what you can see (for example, scrolling in horizontal direction). But I promise I’ll keep working on it and finally integrate it as a WordPress plugin.

Some stuff written in catalan, just a TODO list to myself…
a fer:
– en un futur desplaçar només en horitzontal seleccionant qualsevol punt de sa pantalla (mostrar maneta de drag)
– fer zoom de tots a l’hora
– posar els més antics baix i construir cap amunt (activitats posteriors tenen bases o fonaments amb coses d’abans)
– en un futur posar totes les activitats en transparent menys la seleccionada (hi ha un ctx.globalAlpha, però no mola perquè ho posa tot)
– afegir scrolling de nou

Two blogs in the same page

Leave a reply

Motivation: I want to show 2 blogs in my WordPress site. A quick search on the web reveals that apparently you must install each blog separately, but I don’t want to do so. In fact I don’t need two different blogs, I just want to split posts in two different pages (by category).

Solution: the solution I found consists of using the original posts site for one of the blogs and an extra page (with a specific template) to show the other blog pots. Separation is done by category applied to each post.

  1. Create a Page of Posts template. I’m using a child theme of Twenty Eleven so I just create a pageofposts.phpfile with the code below. Then change the category you want to filter for this blog (blog2).
     
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

    <?php
/*
Template Name: Page Of Posts
*/
 
// if you are not using this in a child of Twenty Eleven, you need to replicate the html structure of your own theme.
 
get_header(); ?>
<div id="primary">
<div id="content" role="main">
 
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args= array(
    'category_name' => 'antiquarianism, championship', // Change these category SLUGS to suit your use.
    'paged' => $paged
);
query_posts($args);
if( have_posts() ) :?>
 
<?php twentyeleven_content_nav( 'nav-above' );?>
 
<?php while ( have_posts() ) : the_post(); ?>
 
<?php get_template_part( 'content', get_post_format() ); ?>
 
<?php endwhile; ?>
 
<?php twentyeleven_content_nav( 'nav-below' ); ?>
 
<?php else : ?>
<article id="post-0" class="post no-results not-found">
<header class="entry-header">
<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
</header><!-- .entry-header -->
 
<div class="entry-content">
<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>
<?php get_search_form(); ?>
</div>
</article>
 
<?php endif; ?>
 
</div>
</div>
 
<?php get_footer();
    <?php
/*
Template Name: Page Of Posts
*/

// if you are not using this in a child of Twenty Eleven, you need to replicate the html structure of your own theme.

get_header(); ?>
<div id="primary">
<div id="content" role="main">

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args= array(
	'category_name' => 'antiquarianism, championship', // Change these category SLUGS to suit your use.
	'paged' => $paged
);
query_posts($args);
if( have_posts() ) :?>

<?php twentyeleven_content_nav( 'nav-above' );?>

<?php while ( have_posts() ) : the_post(); ?>

<?php get_template_part( 'content', get_post_format() ); ?>

<?php endwhile; ?>

<?php twentyeleven_content_nav( 'nav-below' ); ?>

<?php else : ?>
<article id="post-0" class="post no-results not-found">
<header class="entry-header">
<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
</header><!-- .entry-header -->

<div class="entry-content">
<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>
<?php get_search_form(); ?>
</div>
</article>

<?php endif; ?>

</div>
</div>

<?php get_footer();

    UPDATE: I finally just filtered it in the index.php file. I'm keeping the code above just in case you want to go for that approach, but what I have really done is to copy the idex.php into my child theme. As the post pages is the home, I have added the following code that omits all the posts from programming category:

    1
2
3
4
5
6
7
8
9

    <?php
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $id_cat_prog = get_cat_ID('programming');
    $args= array(
        'cat' => '-'.$id_cat_prog, 
        'paged' => $paged
    ); 
    query_posts($args);
?>
    <?php
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $id_cat_prog = get_cat_ID('programming');
    $args= array(
        'cat' => '-'.$id_cat_prog, 
        'paged' => $paged
    ); 
    query_posts($args);
?>
    2.  
  2. Getting category id. You can just check it from your configuration, but I want to obtain my category id from a category name, so I'm using the function:
     
    1

    <?php get_cat_ID( $cat_name ) ?>
    <?php get_cat_ID( $cat_name ) ?>
    3.  
  3. Excluding posts from blog 2 to appear into my feed. I don't want my feed to be updated with posts I place in blog 2. Here I found a list of different WordPress feeds so in my feed address I can filter excluding the category of my second blog posts. By the way, in my case I placed a RSS icon in the menu bar so I manually added the post filter from WP Dashbord (Appearance --> Menus, and edit link from custom option.
     
  4. Once you are in the post view if you click on the 'next' or 'previous' post button by default all the posts (doesn't matter to which category they belong) will appear. But I want only posts of 'my current blog' to appear. To solve this I'm using the next_post_link function to tell that I want to filter next or previous posts by category. You only have to edit a few lines in single.php. Here you have an example:
     
    1
2
3
4
5
6
7
8
9
10
11
12
13
14

    <?php
$cat_prog = get_cat_ID('programming');
$cat_pers = get_cat_ID('personal');
$cat_wp = get_cat_ID('wordpress');
$cat_bh = get_cat_ID('bluehost');
if (in_category($cat_prog)) {
    $cat_filter = $cat_pers;
}
elseif (in_category($cat_pers)){
    $cat_filter = $cat_prog.','.$cat_wp.','.$cat_bh;
} 
?>      
<span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">←</span> Previous', 'twentyeleven' ),FALSE,$cat_filter); ?></span>
<span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">→</span>', 'twentyeleven' ),FALSE,$cat_filter ); ?></span>
    <?php
$cat_prog = get_cat_ID('programming');
$cat_pers = get_cat_ID('personal');
$cat_wp = get_cat_ID('wordpress');
$cat_bh = get_cat_ID('bluehost');
if (in_category($cat_prog)) {
    $cat_filter = $cat_pers;
}
elseif (in_category($cat_pers)){
    $cat_filter = $cat_prog.','.$cat_wp.','.$cat_bh;
} 
?>      
<span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">←</span> Previous', 'twentyeleven' ),FALSE,$cat_filter); ?></span>
<span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">→</span>', 'twentyeleven' ),FALSE,$cat_filter ); ?></span>
    5.  
  5. I want to show a different Archives Page for each blog. In one of them I want to show posts by Year and Month. I used the Collapsing Archives plugin. Of course, I don't want posts from the second blog to be listed here. In order to configure the posts I will show in Archives and their style I created an archives.php file in my child theme. Then you only have to create a new page and apply the new template. Be careful: this plugin also takes into account the 'tags' of the post in order to do the filtering, it treats those tags as if they where post categories. Thus you'll have to exclude them in the options:
     
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

    <?php
/*
Template Name: Archives
*/
get_header(); ?>
 
<div id="container">
<div id="content" role="main">
<?php the_post(); ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<h2>Archives by Year & Month</h2>
<?php
if( function_exists('collapsArch') ) {
  collapsArch('animate=1&inExcludeCat=exclude&inExcludeCats=programming,wordpress,bluehost,code,snippet,widget'); // in my case 'code','snippet' and 'widget' are tags and not categories
} else {
    wp_get_archives();
}
?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
    <?php
/*
Template Name: Archives
*/
get_header(); ?>

<div id="container">
<div id="content" role="main">
<?php the_post(); ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<h2>Archives by Year & Month</h2>
<?php
if( function_exists('collapsArch') ) {
  collapsArch('animate=1&inExcludeCat=exclude&inExcludeCats=programming,wordpress,bluehost,code,snippet,widget'); // in my case 'code','snippet' and 'widget' are tags and not categories
} else {
    wp_get_archives();
}
?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
     
  6. Finally I wanted to show my programming posts divided by category. Tried to use Collapsing Categories plugin but it won't expand properly. I posted on WordPress forum and I'm currently waiting for any hints on this.And just as a mental note if I finally solve this point: by using this plugin I found another error which is solved here.