Adding JMasonry to Page

[cdhphoenix 0]

Hello! I would like to add some jquery to a certain page called "essentials" I read the instructions, and everyone says its pretty simply, but when i tried it, i got a bunch of error warnings and a black screen. The plugin is: http://desandro.com/resources/jquery-masonry/ I would like to program this page so it shows only a certain category of posts that I make.....the php code for that I'll ask for another rainy day.... The instructions to install it for wordpress is here: http://www.wplover.com/1818/tutorial-using-jquery-masonry-with-wordpress I tried putting script to call on jquery in the header, it made the whole site go black. I'm not sure where to put the php code, the page i want this jquery to appear is using the template "highlight" for now, this child base theme is confusing me, every time i try to edit anything everything gives me errors. I tried copy and pasting the php code in there (page.delta.php aka highlight page), not sure if i was supposed too, but i think i am, and i got errors. How can I install this jmasonry jquery plugin and add things to the page's php? I just need some advice, I am so painfully new at this and i really want to learn, but all the tutorials i'm reading is for people with intermediate knowledge and they seem to skip a few steps because they assume I should already know. I have read the developers documents, forums and anything I can find and i can't seem to grasp its implementaion with the way this theme is set up. I don't want to give up on jmasonry, and I dont want to give up on this theme either as I paid for this and there is no looking back. I would appreciate any help in this matter. Sincerest Regards, Phoenix www.criterioninedit.com

[cdhphoenix 0]

Just to clarify, I think i have successfully set up a child theme page template in base called "essentials" with a page id:52 for this matter, I just require help in making sure I know how to input the jquery in the css, html of the page and scripts in .php with this theme successfully. thanks!

[ricardo 0]

If you are new to this, you have jumped into the deepest end possible =) Adding Masonry to a theme, even a simple one, can quickly become a nightmare and tutorials like that are usually useless when it comes to PlatformPro (as you'll soon find out) due to the rather uncommon way this theme was coded. I've tried to implement this some days ago and failed miserably. I'll reproduce the steps here hoping someone can pick it up and find a solution: - Add to platformbase/base.css whatever css code you want/need to (the #linky stuff from the tutorial); - Add the jquery.masonry.min.js file to your Base folder; - Copy template.postloop.php and header.php in PlatformPro to PlatformBase; - Edit this header and add the call to the jquery.masonry.min.js and the jQuery(document) stuff (last code box of the tutorial) to the head section just before the closing /head tag; What do you need to do next? - Check the source and make sure your edits are there; - Check if the call to jquery.masonry.min.js works, meaning, is it pointing to the file or elsewhere? ; - change the code you added to base.css and header.php from #linky to what's in your code (if you made any changes). This is where the simple stuff ends. From this point onward is just problem after problem. Masonry works by floating the inner divs (posts) inside the enclosing div. In PlatformPro, these inner divs have a long list of css classes that just get i the way (I deleted them from the platformbase/template.postloop.php and used the class "boxy" to follow the tutorial). You can't access the enclosing div (it's not in template.postloop.php) so I created my own. The problem is that this div is +-15 levels deep in the page and I guess Masonry can't find it. Deleting the majority of the higher level enclosing divs means editing too many files and loosing a lot of functionality. I tried everything I could remember including pointing masonry in the right direction by cascading the enclosing div location (body #content #etc) and adding code to prevent incompatibility with the other jquery scripts. Nothing worked! Removing some "suspect" files and code, renders the site useless. Ricardo

[cdhphoenix 0]

thanks ricardo for your input, the more i try to work with this theme, the more frustrating its becoming on every level of functionality, asking for more jquery for our websites its not an extravagant request, i'm surprised there is no documents how to install add on jquery requests on platformpro because of the way this theme is set up. I am a quick learner and the instructions on the web to install a simple jquery plugin such as jmasonry are simple if you are using a any other theme in wordpress, but this shouldn't be asking for too much to have it working with platform pro.

[cmunns 16]

I do seriously doubt that "everyother theme has instructions for how to implement this" Additionally we cannot guarantee that this will work as layouts and section are generated dynamically in PlatformPro. Creating the new page template as you did is probably best. To add jquery you need to use your functions.php file in the base child theme using a hook like this one: ` add_action('wp_head','masonry'); function masonry(){?> <?php } `

[cdhphoenix 0]

Thank you for responding Adam, i appreciate your patience with me. I apologize for coming off short. I am just a little frustrated about not understanding everything. I understand this theme is great, and I would like to give a good shot at this and if it doesnt work, i will accept it. I have taken your advice and added that code to my functions.php file. However the tutorial also asks that i insert some php script in my page.php file where I want the jmasonry to act. I have tried duplicating the language of hooks to write it successfully into the php, but i get stumped on php scripts within php scripts: the code they want me to input into the page php is:

	<div id="linky">
	
	  <?php
	      $linksPosts = new WP_Query();
	      $linksPosts->query('showposts=15&cat=7');
	  ?>
	  <?php while ($linksPosts->have_posts()) : $linksPosts->the_post(); ?>
	  <div class="boxy">
	    <div class="read">
	    <h4>ID, "url", true)) echo get_post_meta($post->ID, "url", true); else the_permalink(); ?>"><?php the_title(); ?></h4>
	      <?php the_content('Read the rest of this entry »'); ?>
	    </div>
	  </div>
	  <?php endwhile; ?>
	
	</div>[/code]

Side Note: Does

$linksPosts

matter in terms of command? I want this to pull posts from a certain category, is this necessary to change the name, other than modifying the category number in the wp_query? Thank you, its the only other step i'm missing now to see if this will work with this theme. sincerely, Carolyn

[bryan-hadaway 3]

Expect further developer help tomorrow. Thanks, Bryan

[ricardo 0]

Any news about this?

[bryan-hadaway 3]

No, this is still marked for developer support, just needing some refreshing. Thanks, Bryan

[cmunns 16]

Carolyn, What hook are you using to add this into a page? It should be a hook related to the main content area, probably `pagelines_before_theloop` or something like that since it's a brand new query it should be outside of the main loop.

[ricardo 0]

Adam, But have you managed to make it work? The only possible divs to have floats are #theloop and .copy-pad and it simply doesn't work. Just to be clear, I'm not using additional templates because as you know that's way too complicated at this stage of PlatformPro development. Ricardo

[cmunns 16]

Okay I'll try to get it working this weekend.

[cmunns 16]

ok guys I just tested using this hook and adding the js file directly to the root of PlatformBase ` add_action('wp_head','masonry'); function masonry(){?> <?php } ` Of course you have to change the jquery selectors to fit whatever tutorial you are following or whatever HTML id/class you decide to use.

[ricardo 0]

Adam, choosing the html ids/classes is precisely the problem. Like I said before, only #theloop and .copy-pad are suited for floats and it doesn't work with them. Could it be easier to add an html template too? Ricardo

[cmunns 16]

well what are you trying to make into the masonry? I don't see how it would apply to #theloop and .copy-pad...maybe explain your intent a little more?

[ricardo 0]

I'm just trying to add masonry to a stock install of PlatformPro.

[cmunns 16]

Yes, but how...on what site elements? The code obviously has to all be adjacent and without clearing to work