New to the community? Start here

Display Membership Data print/mobile

Hi there,

I’m working on a website that has a membership both online and offline.

The client would like the members to be able to print a membership card for their wallet and be able to display it on a cell phone (in an app?)

Is there a simple way to pull that data and place it in an image or on a page? (even a css trick with an image and data over it would work)

Also, is there a way to display if they are paid members and which level they are?

Thanks,

KenBosh

Thu, 24 Jul 2014 16:12:54

Patrick Cohen
- Technical Docs Wrangler
- 6,977 pts: Hero points 20,716 pts: Rep. points LEVEL 30
Hi there @KenBosh

I hope you’re having a great day!

That would depend first of all on what you are using for your membership site.

Are you using our Membership plugin, or a different plugin? Or a different system altogether?

At any rate, if the data exists in your database, then it can be fetched via PHP… hopefully it’s not serialized which can be a bit of a pain sometimes. :slight_smile:

Then it’s a matter of writing up a custom function to grab that data for the currently logged-in user, and output it in any on-page container with an image as its background.
KenBosh
- Design Lord, Child of Thor
- 69 pts: Hero points 77 pts: Rep. points LEVEL 3
Hi Patrick,

Thanks for that quick reply.

It would be your membership plugin. :slight_smile:

Any hints to point me in the right direction?

I get it, but HOW?

Thanks,

KenBosh
Ash
- Code Norris
- 3,838 pts: Hero points 38,666 pts: Rep. points LEVEL 30
Hello @KenBosh

I hope you are well today.

The client would like the members to be able to print a membership card for their wallet

Which information of the member you want to show in the image (card)|?

Cheers

Ash
KenBosh
- Design Lord, Child of Thor
- 69 pts: Hero points 77 pts: Rep. points LEVEL 3
Hi Ash!

I’m guessing their looking for the following:

First Name

Email Address

User Number or identifier (Could be WordPress Username? / Or, Membership record Number?)

Paid Membership Level
KenBosh
- Design Lord, Child of Thor
- 69 pts: Hero points 77 pts: Rep. points LEVEL 3
And a BIG THANK YOU ASH! :slight_smile:
Ash
- Code Norris
- 3,838 pts: Hero points 38,666 pts: Rep. points LEVEL 30
Hello @KenBosh

Please try the following code: https://gist.github.com/bappi-d-great/5ab5a1bd9684d8512b39

You can add those codes in your functions.php in the theme, if you think your theme won’t be changed. Otherwise mu-plugins is the best solution. To use mu-plugins, go to /wp-content/ and find the folder with name ‘mu-plugins’. If there is no folder in that name, then create a folder, name it ‘mu-plugins’, create a file inside that, give any name you like and paste the code in there. You don’t need to activate that plugin. Mu-plugins means must use plugins, so it will be activated automatically always. If you use mu-plugins then add a php start tag at the beginning of the code.

Hope it helps :slight_smile: Please feel free to ask more question if you have.

Cheers

Ash
KenBosh
- Design Lord, Child of Thor
- 69 pts: Hero points 77 pts: Rep. points LEVEL 3
Hi Ash,

I created a file called /wp-content/mu-plugins/membercard.php and pasted the code into it.

However, when I run the shortcode on my page here: http://kenbosh.com/l2c/?page_id=17

I’ve turned off the membership so you can see the error:

Warning: implode() [function.implode]: Invalid arguments passed in /home/kenbosh/public_html/l2c/wp-content/mu-plugins/membercard.php on line 28

Is it something I’m doing or a setting somewhere?

Thanks,

KenBosh
Patrick Cohen
- Technical Docs Wrangler
- 6,977 pts: Hero points 20,716 pts: Rep. points LEVEL 30
Hi there @KenBosh

I hope you are well today!

I just tested the code provided by @Ashok on my test site, and it works just fine for me (screenshot).

I’ve attached the code packaged as a plugin for you. Please try simply uploading & activating on your site to see if that works for you.
Patrick Cohen
- Technical Docs Wrangler
- 6,977 pts: Hero points 20,716 pts: Rep. points LEVEL 30
Whoops… screenshot :slight_smile:
KenBosh
- Design Lord, Child of Thor
- 69 pts: Hero points 77 pts: Rep. points LEVEL 3
Gentlemen,

Thank you BOTH! It works GREAT! I had an empty database without any users to test. It was a strange output as superuser.

Thank you again!

Love the PLUGIN!
KenBosh
- Design Lord, Child of Thor
- 69 pts: Hero points 77 pts: Rep. points LEVEL 3
OK Patrick, how’d ya’ do the overlay on the card? Did you create a page template just for that? Or, did you just do it in WordPress?

Inquiring minds want to know. :slight_smile:

And, what are all the other plugins you’re using on your test site?

I like the bottom up messages. And, I’m wondering about ProSites.

And, what is the community? Is that a Bulletin Board or something else?

Any direction you can point me into to make a fantasy a reality?

Thank again!

KenBosh
KenBosh
- Design Lord, Child of Thor
- 69 pts: Hero points 77 pts: Rep. points LEVEL 3
And, wait… is that the Appointment Plugin in there?

That’s exactly what I’m trying to build.

Care to send me a backend screen shot of your plugins and such?
Patrick Cohen
- Technical Docs Wrangler
- 6,977 pts: Hero points 20,716 pts: Rep. points LEVEL 30
Hi again @KenBosh

I hope you’re having a great day!

OK Patrick, how’d ya’ do the overlay on the card? Did you create a page template just for that? Or, did you just do it in WordPress?

Overlaying the shortcode output on an image is achieved by setting the image as a background of one div container, then the shortcode is added to another div inside it. Finally, the whole shebang gets organized with a bit of CSS.

Here’s all you need to put in any post/page editor:
```
<div class="membercard">

<div class="memberinfo">[my_mem_card]</div>

</div>
```
Then add the following CSS to the style-sheet of your active theme/child-theme, or use a handy plugin like this one for all your custom CSS needs:

https://wordpress.org/plugins/simple-custom-css/
```
.membercard {background:url('http://rockysroad.info/wp-content/uploads/2014/07/Membership-Card.png') no-repeat center; width:350px; height:288px;}

.memberinfo {color:#fff; padding: 65px 0 0 86px; transform:rotate(-2deg); -ms-transform:rotate(-2deg); /* IE 9 */ -webkit-transform:rotate(-2deg); /* Opera, Chrome, and Safari */}
```
Of course, the above CSS includes the transform property ‘cos the image I grabbed off Google is skewed, so I wanted the text to be rotated a couple of degrees to fit.

You’re likely gonna be using a flat image to enable your users to print out their own membership card right off the page, so you would want to remove that from the CSS.

And, what are all the other plugins you’re using on your test site?

LOL! There’s a whole boatload of plugins on that test site, most of which aren’t even active.

The “bottom-up messages” are done with our Slide-In plugin:

https://wpmudev.com/project/slide-in/

You can also see our Chat plugin in action in the bottom-right corner:

https://wpmudev.com/project/wordpress-chat-plugin/

And a form from our Subscribe By Email plugin in a tab on the left edge:

https://wpmudev.com/project/subscribe-by-email/

Our Pro Sites plugin enables you to create upgrade “packages” of features your sub-site admins can subscribe to so they can add cool new features and/or themes to their sites, and you make some cash :slight_smile:

https://wpmudev.com/project/pro-sites/

And yes, you are correct, the “Book a Gymnasium” demo page is done using our Appointments+ plugin:

https://wpmudev.com/project/appointments-plus/

The “Community” and all the fun stuff inside it is all BuddyPress:

http://wordpress.org/plugins/buddypress/

I just re-activated a bunch of things on a demo site so you can actually see how they work:

http://patrickcohen.net/
KenBosh
- Design Lord, Child of Thor
- 69 pts: Hero points 77 pts: Rep. points LEVEL 3
Wow. It’s really starting to take shape.

Funny thing… I’ve got it all setup and just one problem…

It doesn’t print the picture when you print the page…

What am I doing wrong?

http://kenbosh.com/l2c/test-membership-card/
Ash
- Code Norris
- 3,838 pts: Hero points 38,666 pts: Rep. points LEVEL 30
Which browser are you using? Make sure you have selected the option to print background color and images too.

Cheers

Ash
KenBosh
- Design Lord, Child of Thor
- 69 pts: Hero points 77 pts: Rep. points LEVEL 3
Thanks Ash! That was it. Silly setting. :slight_smile:

So, I gotta ask… are we using Buddy Press to set permissions for publishing pages?

Like for instance a business can edit their own listing?

Thanks,

KenBosh
Ash
- Code Norris
- 3,838 pts: Hero points 38,666 pts: Rep. points LEVEL 30
Hello @KenBosh

Sorry, I didn’t understand this question. Are you using our directory plugin too? And if it is a different topic that the title, we will appreciate if you open a new thread https://wpmudev.com/forums/#question that will help us to keep things separate :slight_smile:

Cheers

Ash
KenBosh
- Design Lord, Child of Thor
- 69 pts: Hero points 77 pts: Rep. points LEVEL 3
Hi Ash,

Yes, it’s the membership directory. Only, Patrick made a site similar to what I’m trying to do, only, I don’t know what he was using Buddy Press for… Just the community forums and such?
Michael Bissett
- Recruit
- 1,518 pts: Hero points 11,180 pts: Rep. points LEVEL 28
Hey @KenBosh,

Just to let you know, when my colleague Ashok was asking whether or not you were using our Directory plugin, he was referring to this:

https://wpmudev.com/project/wordpress-directory/

As for your question, it’d be best if you could open a new thread for this, and elaborate there, so that way we can keep the two questions separate (seeing as how we answered the question regarding membership cards).

Thanks for your understanding, hope you’re doing well today! :slight_smile:

Regards,

Michael

Need help fast?

Display Membership Data print/mobile

Ready to get started?

Need help fast?

Ready to get started?

How do you rate me?

Thank you for rating your experience!