Solved

Adding PrettyPicture to a brand-new, bare-bones custom theme

Posted on 2013-05-24
14
303 Views
Last Modified: 2013-06-12
Hi again Experts --

I'm putting together a very, VERY basic theme that I can use to get a head start on very basic WP sites, and I want to improve on the gallery a little by adding PrettyPicture. I'd rather not do it with a plugin, just go ahead and add everything to the theme so I only need to do it once (and not be at the mercy of developers).

As my name here implies, I really ain't an expert, and I always seem to be moving on to new platforms or languages or whatever... And needing to get up to speed.

So, who wants to tell me what goes where? My theme is so basic so far that it doesn't even have a javascript file yet, okay? We're talking about hand-puppet level of explaining that I'm going to need.

But many, many thanks in advance!
0
Comment
Question by:amateur6
  • 6
  • 4
  • 3
  • +1
14 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39194722
We need to see it to help.  Can you post a link to a test page using it?

Cd&
0
 
LVL 1

Author Comment

by:amateur6
ID: 39194770
Sure, sorry -- http://sullivanandco.com/bkflow-test/

Like I said, this is strictly for personal use -- not that I would object to feedback, but my main and most immediate concern is getting prettyPicture working with it.

I know to download the pP file, unzip it, upload it to the theme directory, then paste a bunch of php and/or js around -- but I've found differing opinions about even where to upload the pP directory itself!

So, again -- thanks Cd&!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39195026
Oh PrettyPicture is some kind of a product?  I'm not familiar with it.  Where can I see the documentation?

Cd&
0
 
LVL 1

Author Comment

by:amateur6
ID: 39195089
Annnd that would be because it's actually called prettyPhoto! Oops.

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/

Looks like I should have put this into jquery instead of javascript, too. D'oh!
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 39195229
I'd rather not do it with a plugin, just go ahead and add everything to the theme so I only need to do it once (and not be at the mercy of developers).

So much wrong with the above.

I'd rather not do it with a plugin

Why?  This is what plugins are for!  Adding features to WordPress that allow theme and content updates while not worrying about breaking references is what well-coded plugins do.  And it's not like there is a shortage of lightbox-style gallery plugins for WordPress.

so I only need to do it once

You would only need to add the plugin once and just apply updates automatically as they are released. You will be doing this for WordPress core anyway so it's not like you will be gaining any extra productivity.

(and not be at the mercy of developers)

You're at the mercy of developers whether you use a plugin or stick coding in by hand.  Unless you are going to use a child theme, any theme-based modifications will be lost if you update the theme (or switch to a new one).  If you do hand-code the lightbox stuff in there, you will also need to add custom page templates to take full advantage of the options or also code in custom shortcodes.  Of greater concern is that unless you are unusually conscientious about checking the above site for updates, you will not get any upgrades or notices of security patches and you could be exposing yourself to a hack.  At least with a plugin that is actively maintained, the authors will patch their code as hacks are discovered by the WordPress community.
0
 
LVL 1

Author Comment

by:amateur6
ID: 39195307
You're at the mercy of developers whether you use a plugin or stick coding in by hand.  Unless you are going to use a child theme, any theme-based modifications will be lost if you update the theme (or switch to a new one).

As much as I appreciate your thoughts, you completely missed the fact that I'm writing a theme just for myself. I started with a child theme (since it's the correct way to start), but even then I wasn't happy.

Let me elaborate a little further: for my needs, most of the lightbox-style galleries have too many bells and whistles. This is what got me writing my own theme in the first place: 1) so that I only include what I need, 2) so that I know what everything does (or at least why it's in there), and 3) so that I actually learn something.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 39195333
No, I saw that.  My points still stand: you still lose the mods if/when you switch to a new theme so rather than modify the theme files, use or code a plugin so that the relevant stuff happens independent of theme activity. Yes, you can use a sledgehammer to hang a picture, it just may not be the most appropriate tool for the job.

--------------------------

In order to add what you want to add, you need to get familiar with the WordPress commands to register and enqueue scripts and styles:

http://codex.wordpress.org/Function_Reference/wp_register_style
http://codex.wordpress.org/Function_Reference/wp_enqueue_style

http://codex.wordpress.org/Function_Reference/wp_register_script
http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Because WordPress already has JQuery running, you shouldn't need to call it again to get the lightbox working.  Alter your theme's header.php file to enque the relevant styles and if you want to customize the script per the documentation, make it a separate file and use register/enqueue to call it properly.  At that point you should be able to add the rel="prettyPhoto" to links.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 350 total points
ID: 39195863
I'm not going to disagree with jason ... he might get mean ;^)

However, learning to do the coding yourself is a good learning tool.  I learned PHP by customizing old style forum code.  That said, it depends on where you intend to go with it.  If the site is going to be public facing, then you need to be concerned about security and reliability. In that case you want to use plugins that are well supported and being maintained.  If the site is experimental, and don't have critical assets attached then doing custom work is fine.

If you intend to build themes for other developers then using a variety plugins will give you a better idea of the problems that developers need to overcome so you avoid creating inflexible bloat.

I don't use any plugins, themes or anything else that is third party off the shelf, but I have been programming since the 60s, and I can pretty much do anything I see faster than I can customize a theme, and my code does not have to carry the bloat that comes with virtually any general use piece.  However I do spend some time dissecting third party code so I know how to do it better; know what to avoid; or know where the security holes are likely to show up.

Cd&
0
 
LVL 7

Expert Comment

by:Alicia St Rose
ID: 39197365
I do this all the time: grab a JQuery plugin that I like and integrate it into Wordpress.

How I do it:

1. Get the source. Store the JS in my JS folder
2. Add the js files to head using wp_register_script/wp_enqueue_script
3. Create a custom post type called "Slides"
4. Create a template called slider.php
5. Plop in the HTML code from JQuery plugin
6. Install Advanced Custom Fields Plugin and create the custom fields for slider:
Image, caption, call-to action text etc.
7. Put these variables in the appropriate places in the HTML code
8. Cloak the code in a loop
9. include this file in any template using get_template_part()

So, yes, that's what I do. But after reading Jason1178's post, I'm concerned about security issues...
Am I running the risk by integrating jQuery in this way?
Should I create a plugin instead?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 39213843
But after reading Jason1178's post, I'm concerned about security issues...

My post covers two different things.

1) Security is always going to a be problem if you are integrating code from "somewhere else" unless you can read and understand the code to the point where you can see the flaws.  By relying on some code from completely outside the WordPress ecosystem, the likelihood of seeing a patch from that code goes way down unless you are unusually good at following up with the original code writer to see if patches are available.  Better to find a WordPress plugin that updates frequently in response to flaws discovered in this case, or...

2) Altering the theme to include slider or lightbox functionality is not the best way to go about it (IMHO).  If you have that level of skill, take it one step further and write a plugin so that your functionality is preserved should you ever decide to change themes or, if you were adding this functionality to a theme other than one you created, if the theme updates.  If you are writing your own JQuery lightbox functionality, then absolutely make it a plugin so others can take advantage of the same things I describe above.  If you embed it in the theme and ever decide to distribute the theme you put others in the same boat.

Altering the theme to add code is not inherently insecure nor a bad idea.  If you are doing your own theme with no intention to distribute to the community, then power to you and good luck.  But if you want to contribute to the community and keep WordPress strong, consider the alternatives.
0
 
LVL 1

Author Comment

by:amateur6
ID: 39216104
Altering the theme to add code is not inherently insecure nor a bad idea.  If you are doing your own theme with no intention to distribute to the community, then power to you and good luck.  But if you want to contribute to the community and keep WordPress strong, consider the alternatives.
While I (the original poster) appreciate all of your input, "good luck" is hardly an answer. And E-E is a place where I pay to get answers, not lectures on why what I'm doing is wrong (unless it's to say "oh, here's where you broke something; you need to do this instead").

Let me ask my question again...
So, who wants to tell me what goes where? My theme is so basic so far that it doesn't even have a javascript file yet, okay? We're talking about hand-puppet level of explaining that I'm going to need.
0
 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 150 total points
ID: 39216313
I did answer the question above.  You are going to need and research and learn the functions linked in this post:

http://www.experts-exchange.com/Web_Development/Blogs/WordPress/Q_28138381.html#a39195333

Use them to add the scripts and styles to your theme.  Once they are serving up through WordPress, add the trigger code to the a tag for images and you should be ok.
0
 
LVL 1

Accepted Solution

by:
amateur6 earned 0 total points
ID: 39229532
Well, for the record, I found my answer. Works perfectly, and is at the hand-puppet level that I needed. I really do appreciate the answers I've gotten, but I just didn't have the time (yet) to do as much in-depth exploring as was suggested.

For anyone in the future with the same question, here's the link that helped me (note the comment regarding the change in the header script to "show_title"):
http://fearlessflyer.com/2011/04/how-to-add-lightbox-to-wp-without-plugin/
0
 
LVL 1

Author Closing Comment

by:amateur6
ID: 39240431
After days of searching, I managed to find exactly what I was looking for -- step-by-step placement instructions -- outside of EE.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now