WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm building a responsive theme and would like to have different start pages depending on screen width.

In this case, the start page is set in WP admin and contains an image map built on a cunstom page template. On mobilde devices this image map doesn't work so well, so I'd like set one of the other pages as start page.

I guess I can merge front-template with standard-template and somehow achieve this with media queries, but would prefer a javascrip/jQuery solution.


share|improve this question

closed as off topic by s_ha_dum, Michael, toscho Jun 7 '13 at 18:42

Questions on WordPress Development Stack Exchange are expected to relate to WordPress within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

PHP has no idea what the screen width is since it runs on the server before content is sent to the client. – s_ha_dum Jun 7 '13 at 18:13
ah of course.. So jQuery solution then? – BoBoz Jun 7 '13 at 18:23
Media queries and/or Javascript, yes. – s_ha_dum Jun 7 '13 at 18:24
Altered question. On topic? – BoBoz Jun 7 '13 at 18:47
Please explain why this is off topic? – BoBoz Jun 7 '13 at 19:42
up vote 0 down vote accepted

It's pretty hard for PHP to know your screen width. It's more of a job for jQuery. But your approach seems kind of backward. If the site is supposed to be responsive -- why are you trying to deliver different pages to your visitors based on screen width?

It would seem you should handle varying content via media queries.

So if you have 5 pieces of content... let's say

  1. Header A - intended for desktop

  2. Header B - intended for mobile

  3. Content - same for all

  4. Footer A - intended for desktop

  5. Footer B - intended for mobile

You would hide the mobile (B) components when screen width is greater than X, and show the desktop (A) components.

Conversely, when screen width is less than X, you would do the opposite: showing mobile components (B) and hiding desktop components (A).

Make sense?

share|improve this answer
I just want another start page when screen width is below like 768 px. Not many start pages for several diffrent widths. Also this is rather late in development, so instead of reorganize templates I'm lookng for a smart way. jQuery? – BoBoz Jun 7 '13 at 18:23
Ok, this seems not to be doable the way I was thinking. As such, all possible front end content will reside in the same template and be organized by media queries. Your answer is correct. – BoBoz Jun 7 '13 at 23:45

Not the answer you're looking for? Browse other questions tagged or ask your own question.